As many of us know, Google makes it easy to add interactive maps to
your website for free. This article shows one approach to
plotting sites on a map.
The first step in this approach is to create a view that contains a
name, location (lon/lat), address info, and an html string for each
site/location. Then use some javascript to read the view,
load the data into an array, and place points on a map.
Finally, we iterate through the array to build a clickable
menu of sites that appear on the map.
A google map can be a great tool for plotting things like service
issues or customers. You can modify the code to add color
codes, show subsets of the data, or anything else you can think of.
Google maps require a key for use. The key is free.
To get one, go to the
google maps api page
and click "Sign Up".
Once you have your key, you can start creating the form. You
need to se the form as HTML and use the ?ReadForm url command to use
this implementation.
You'll need longitude and latitude coordinates to plot items on the
map. For U.S. sites, you can get them at
www.geocoder.us.
My approach is to create a global array of location objects in
javascript. Then I read the "sites" view that contains name,
address, longitude, latitude, etc.and add that data to the array.
Simultaneously I place the icons on the map.
I read the sites view with ajax and then extract the view
column data using xmlToArray
locations[i] = new Object;
locations[i].name = xmlToArray( xml, 0 )[j];
locations[i].lat = xmlToArray( xml, 1
)[j];
...
Adding the icon and marker to the map is easy with the API
/* google map object properties ( icon, marker, point ) */
var objPoint = new GPoint(locations[i].lon, locations[i].lat );
locations[i].point = objPoint;
/* create an icon based on the code */
var oIcon = new GIcon(objIcon);
oIcon.image = _serverUrl + "/" + _webDbName + "/images/pins/pin" +
locations[i].code + ".png";
/* create a marker for the location based on point and location*/
var oMarker = new GMarker( objPoint, oIcon);
The callout box html is added with a google-provided listener
/* add a listener to show the infowindow on click */
GEvent.addListener( objMark, "click", function() {
objMark.openInfoWindowHtml(h);
});
Rather than writing volumes detailing the implementation, I'm providing a demo and download for you to dissect. The demo is based on a page I created for my recent wedding website. You can add locations to the map yourself. Please email me if you have questions.