ckportfolio.com - Mashup: Google Static Map

Mashup: Google Static Map

Important note

Google Static Map

This first exercise allows us to experiment with one of the simpler APIs (application programming interfaces) that are at our disposal: Google Static Map.

Upon clicking "Get Google Map," the code will contact Google's server and retrieve an image of the location and place it in the page.

After preparing your jsFiddle with jQuery connection, let us proceed with implementing the core HTML elements. We need a total of three elements:

  • Text field <input> that allows us to specify the address
  • Button <button> that triggers the map generation action
  • Empty <div> that hosts and displays the generated image

Place these elements in HTML pane of jsFiddle, and style them via CSS as necessary. Here is an example for your reference:

<input type="text" id="address" placeholder="ex. 100 McCaul St." />
<button id="parse">Get Google Map</button>
<div id="result">-Insert image here-</div>

Note that each entry requires an id attribute in order to facilitate the JavaScript / jQuery component (it is always easier to select elements via ID attributes).

In JavaScript pane, create an empty function named "placeMap," and connect this function to the trigger for "parse" button:

function placeMap() {
    alert("This is a test pop up box");
}

$("#parse").click(placeMap);

If you can see the message popup, jQuery has been successfully connected -- and it is safe to delete the test alert function.

Once the "placeMap" function kicks in, we need to declare a variable based on the text field and verify whether it is an empty string or not. Upon confirming that the string is valid, it will contact the Google server.

function placeMap() {

    var address = $("#address").val();

    if (address == "") {
        alert("Please check your address.");
    } else {
        alert("Address confirmed");
    }

}

If the new variable "address" is empty, it will display "Please check your address." Otherwise, it will display another message: "Address confirmed." Upon verifying this, refer to the following URL:

https://maps.googleapis.com/maps/api/staticmap?center=100%20McCaul%20St&zoom=13&size=400x400&maptype=roadmap&sensor=false&markers=size:medium|color:red|100%20McCaul%20St&key=AIzaSyAGYKIdvUg4J3TWHVi1Ks1xCldz68Og-VY

Above URL is an example of a static map image generated by Google. This is a primitive form of API that allows users to generate map images "on-the-fly" by changing various parameters in the URL. Upon splitting this URL into multiple sections:

https://maps.googleapis.com/maps/api/staticmap
?
center=100%20McCaul%20St
&
zoom=13
&
size=400x400
&
maptype=roadmap
&
sensor=false
&
markers=size:medium|color:red|100%20McCaul%20St
&
key=AIzaSyAGYKIdvUg4J3TWHVi1Ks1xCldz68Og-VY

The "base" URL acts as the main destination for API, but the string that follows question mark (?) is responsible for providing various parameters to change this map image. Glued together with ampersands (&), the parameters are responsible for following elements:

  • center: center "location" of the map -- can be an address or a pair of longitudinal / latitudinal values
  • zoom: zoom level of the image -- higher number means that the map will be more zoomed in
  • size: size of the resultant image
  • maptype: type of maps you can display (roadmap, satellite, terrain, etc.)
  • sensor: whether to detect the user's location (irrelevant for this exercise, but required by API)
  • markers: size, color, and location of each marker to display in the map
  • key: unique key that identifies applications using Google Static Maps API

Our job is to construct the new URL every time the button is pressed and display the resultant image in the page. After deleting the alert code for "Address confirmed," place the following code in between the braces:

var src = "https://maps.googleapis.com/maps/api/staticmap";
var center = "center=" + address;
var zoom = "zoom=13";
var size = "size=400x400";
var maptype = "maptype=roadmap";
var sensor = "sensor=false";
var markers = "markers=size:medium|color:red|" + address;
var key = "key=AIzaSyAGYKIdvUg4J3TWHVi1Ks1xCldz68Og-VY";

While the majority of the parameters remain constant, note that "center" and "markers" are directly related to the new address variable that has been generated. We can now proceed with combining all these variables into a single string. Note that these variables need to be glued together with question mark / ampersands:

var imagePath = src + "?" + center + "&" + zoom + "&" + size + "&" + maptype + "&" + sensor + "&" + markers + "&" + key;

After generating this variable, we need to place this element not as a piece of text but an image. We can place a new image element in our "result" div and use the newly generated variable as a path to the image:

$("#result").html("<img src='" + imagePath + "' />");

Now, a new map image will be created every time you populate the text field and click "Get Google Map" button.

Screencast Recording

https://www.dropbox.com/scl/fi/7bcskylkva94egnwpxvez/Page-1.mov?rlkey=uxo1nsnzhqk0jv7d6fm03oolt&dl=0

Fin