|Visual displays dramatically improve the
communications process, and for a community based newspaper, the use of
maps is essential. Google's gold standard for interactive maps
changed on May 19, 2010. The version 2 API was deprecated and
replaced by version 3.
provides the starting point for learning how to create a basic
map. Google wants developers to use Google Maps so they have made
found the documentation and examples a bit too terse. YouTube
videos provided by WebTechsIndia were very helpful.
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.
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,
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.
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.
the Page Source to see the code. Create the basic code for one
marker, then replicate to create the full set of properties given
Click here to view the map created.