Adobe Robohelp

Get new posts delivered straight to your inbox.

Subscriber count: 3,505

Stitcher radio

follow us in feedly

Want more tech comm blogs to follow? See my Tech Comm Collection of Blogs on Feedly.

Adobe Robohelp

Making a Chapter Member Map Mashup with Google Maps

Feb 8, 2007 • general, 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 map mashup

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.

follow us in feedly


Get new posts delivered straight to your inbox.

Subscriber count: 3,505

Powered by ZipRecruiter

About Tom Johnson

Tom Johnson

I'm a technical writer based in the California San Francisco Bay area. Topics I write about on this blog include technical writing, authoring and publishing tools, API documentation, tech comm trends, visual communication, technical writing career advice, information architecture and findability, developer documentation, and more. If you're a professional or aspiring technical writer, be sure to subscribe to email updates using the form above. You can learn more about me here.