---
title: "Making a Chapter Member Map Mashup with Google Maps"
date: 2007-02-08
description: "$( document ).ready(function() { // Handler for .ready() called. $("
canonical_url: https://idratherbewriting.com/2007/02/08/making-a-chapter-member-map-mashup-with-google-maps/
---
# Making a Chapter Member Map Mashup with Google Maps
[![google map mashup](https://s3.us-west-1.wasabisys.com/idbwmedia.com/images/map.png)](http://stc-suncoast.org/map.html)

Google Maps [has an API](https://www.google.com/apis/maps/) 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:

- Go to the [Google API page](https://www.google.com/apis/maps/)and sign up for an API key. This is a long string of digits you'll need.

- Go to [this sample page](http://www.econym.demon.co.uk/googlemaps/examples/map.htm), right-click to view the source code, and copy the source code. More map [possibilities are here](http://www.econym.demon.co.uk/googlemaps/).

- 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.

- 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](http://www.econym.demon.co.uk)> to my home page</div>')
map.addOverlay(marker);

- Replace the coordinates inside GLatLng() with the coordinates of the markers that you want. To convert your addresses into coordinates, use [single geocoder](http://geocoder.us/) for small addresses or this [batch geocoder](http://www.batchgeocode.com/) for larger jobs.

- Replace the text "Some stuff to display in the First Info Window..." with text that you want to accompany your marker.

- Repeat that chunk of marker text for as many markers as you want to create.

- Upload the .html file somewhere on your directory. Voila, your Google mashup map appears.