The ubiquity of Google Maps across the web is undeniable. As a novice web developer my insights on it are fledgling, but I can’t resist sharing my excitement to dive into its utilization. I found the Javascript version of the Google Maps API to be much more engaging than the Static Maps API. The web application that I used it to build allows a user to browse the global map to choose a country, and then passed the location of their marker to a different API that would provide information on the most popular music artists listened to in that country. This required a dynamic and interactive map to do so, as a static map image would not grant the user nearly as much intuitive control over their search.
As expected from a service provided by Google the depth of functionality (and corresponding documentation) is enormous. For the purpose of this brief reflection I’ll shed some light on how to construct an interactive map for your webpage, and how to let a user place map pins — or “markers” — on that map.
To use the unique Javascript functions provided in Google Maps Javascript, first register an account with the Google Cloud service to obtain your own API key, and place the generated <script> element into the <body> of your HTML. This will allow you to use their pre-defined functions in your own script.js file, as pictured below.
The function initMap() is your money-maker… I mean map-maker… Within it you declare the map variable and set it equal to new google.maps.Map(), within which you can define rules for it to behave by. It is necessary to declare the HTML element that the map will be appended to in the first argument in the Map() method, and the rules described below as the second argument. In my example, the center of the map is set to the coordinates of the center of the continental United States, the default zoom is set to a value of 4.1 (larger numbers cause the map to start more zoomed in), and restriction prevents the user from zooming out or panning the map beyond the coordinate bounds written there. If you want your user to be able to peruse the global map like in the final version of my app, a restriction rule will not be helpful. I’ve included it here just because I thought it was cool and useful in other contexts.
At the bottom of the code snippet above I use the addListener() method on the map to listen for the user’s “click” anywhere on the map, at which point the function placeMarker() is called at the exact coordinates of the click event. It is essential to create this event listener within the initMap() function, or else you will receive an error that map is undefined, even if you have already declared it as a global variable.
Similar to how one constructs a map, you create a marker using new google.maps.Marker() with rules contained therein. Here I specified the marker animation as DROP to make the marker slide down from the top of the map before landing at the chosen location. The values of “location” and “map” are placeholders that correspond to the arguments of the placeMarker() called at the end of the first code snippet up above. For my app I only wanted to allow the user to create a single marker, which necessitated the use of the if/else statement seen here. If the marker did not already exist then the click event would create a new marker, but if the marker did exist with some value (and therefore was not null) then the same marker’s position was simply moved with the setPosition() method.
Finally, I used the methods getPosition() and toUrlValue() on the marker to respectively obtain the marker’s position and convert it to an uninterrupted string of its longitude and latitude together, which can be passed to other APIs as needed.
I hope this brief guide was informative to you. It certainly took me a lot longer to figure out how to use these tools than it did to write all this!
