Upham's Corner Online

Adding Interactive Google Maps to Your Website

Posted: June 6, 2012     Nancy J Conrad

Consider adding an interactive Google map to your website, one with markers that have special meaning to you - where you went on your vacations, where you have lived or worked - a map that creates a source of memories and nostalgia.

Visual displays dramatically improve the communications process, and for a community based newspaper, the use of maps is essential.  Not being JavaScript savvy, UC News decided to document the multi-hour learning process so anyone else could easily implement a map.

Google's gold standard for interactive maps changed on May 19, 2010.  The version 2 API was deprecated and replaced by version 3. 

Google Maps JavaScript API V3 Documentation provides the starting point for learning how to create a basic map.  Google wants developers to use Google Maps so they have made the process pretty simple.  Not being JavaScript savvy, UC News found the documentation and examples a bit too terse and supplemented the learning using   YouTube videos provided by WebTechsIndia.

WebTechsIndia Channel
Objective:  Create a map centered on Upham's Corner with a marker at each site where a UCIA Beautification Award had been issued.  The marker should act as a tooltip and provide the address.  Furthermore, the marker needs to be accurately located at the site, not just close by.

Results:  To see the final code, use "view Page Source" of the web page that displays the map (link to map at bottom of this page0.  Following are the steps taken to create the interactive map.

Step 1.  Use the Google Geocoding Utility to identify the longitude and latitude of the map center.

For Upham's Corner, the map center is the intersection of Columbia Rd and Dudley Street - the official center of Upham's Corner. (42.317035, -71.065149)

Step 2.  Use the Geocoding Utility to identify the longitude and latitude pairs for each of the sites given a UCIA Beautification Award. 

As of June 6, a total of seven sites have been given awards.  Note:  Google's documentation states that locating a point in accuracy greater than 3 decimal points is not necessary.  Our experience is that it does seem to make a difference.  We found examples of the Geocoding Utility  providing a location pair and a marker in the wrong location (many houses down the street, for example).  The utility does provide the ability to relocate the marker and to grab the correct location pair for encoding purposes.

Step 3.  Obtain an API key.  Though not a requirement, Google touts advantages to the user to have an API key.  More likely it is for Google's tracking purposes though an API key does allow the owner to restrict  the key's use on other websites. 

Step 4.  Google provides starter code for one marker here:  https://google-developers.appspot.com/maps/documentation/javascript/examples/marker-simple
View the Page Source to see the code.  Create the basic code for one marker.

Step 5.  If you prefer a little more guidance at this stage before attempting to create the code for multiple markers, then browse videos by WebTec         .  We found them to be more helpful than Google maps documentation. 

Step 6.  Adjust the javascript to create the final map presentation.

Click here to view the map created.

| Copyright © 2010-2014 Uphams Corner News - All Rights Reserved |