|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
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.
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 and supplemented the learning using YouTube
videos provided by WebTechsIndia.
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
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.
Click here to view the map created.