Making a Chapter Member Map Mashup with Google Maps

by Tom Johnson on Feb 8, 2007
categories: technical-writing • web-design

For a long time now I've wanted to make a chapter member map mashup with Google maps. To see what I'm talking about, look at this page: http://stc-suncoast.org/map.html. I'm not finished putting all the members up there — this is obviously just a start.

Google Maps has an API that allows you to blend your own data with their mapping system. It's really much easier to create a Google map mashup than it may initially appear.

To create a member mashup with Google maps:

1. Go to the Google API page and sign up for an API key. This is a long string of digits you'll need.
2. Go to this sample page, right-click to view the source code, and copy the source code. More map possibilities are here.
3. Paste the source code into a notepad file, change the API key to your own API key (this appears near the top after the word "key"), and save the file with a .html extension.
4. Look for the following text in your file:// Set up three markers with info windows
   var point = new GLatLng(43.65654,-79.90138);
   var marker = createMarker(point,'<div style="width:240px">Some stuff to display in the First Info Window. With a <a href="http://www.econym.demon.co.uk">Link</a> to my home page</div>')
   map.addOverlay(marker);
5. Replace the coordinates inside GLatLng() with the coordinates of the markers that you want. To convert your addresses into coordinates, use single geocoder for small addresses or this batch geocoder for larger jobs.
6. Replace the text "Some stuff to display in the First Info Window..." with text that you want to accompany your marker.
7. Repeat that chunk of marker text for as many markers as you want to create.
8. Upload the .html file somewhere on your directory. Voila, your Google mashup map appears.