Making a Chapter Member Map Mashup with Google Maps

February 8th, 2007 | Posted in Web 2.0, Web Design 7 Comments »

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:

Go to the Google API page and sign up for an API key. This is a long string of digits you’ll need.
Go to this sample page, right-click to view the source code, and copy the source code. More map possibilities are here.
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> 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 for small addresses or this batch geocoder 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.

These icons link to social bookmarking sites where readers can share and discover new web pages.

Latest Comments

healthy meals: Schooling is an extremely significant component to each child’s life, but I really do feel... (18)
Ben: I actually have the opposite experience with UI text changes that I log in JIRA. The customers prioritize... (9)
Social Network Software: “which tools are best to use for creating a social network, and his response was... (16)
Rengaraman: Another good way to track these last minute updates is to be a part of QA team (besides being a TW).... (9)
Gil Vinokoor: You hit the nail on the head here, Tom. Nice! As the saying goes, “When in Rome, do as the... (9)
bedavasexizle: swdw (14)
Alan J. Porter: Excellent post this morning – was having a lengthy conversation on this very topic... (9)
Larry Kunz: Oh, my, yes. I’ve been there. Great article, Tom. In addition to keeping tabs on what’s... (9)
Jason: Good topic, Tom. When my current company adopted the scrum methodology of agile development, I was very... (9)
Patty Blount: Tom, this one’s spot on… Happens all the time here, despite the various methods we have... (9)

Brian says:

February 13, 2007 at 2:57 pm

Small world! I was asked today to use the Google Maps API to design a map of my company’s offices for our website! Thanks for the references!

FYI there is a Canadian counterpart to that geocoder site at http://geocoder.ca/

Tech Writer Voices: Podcasts on Technical Writing » Online Communities, Member Maps, Virtual Chats, Sparkpeople, Intercom, and More says:

March 22, 2007 at 3:45 pm

[...] and I talk about the following: Suncoast Member map, Virtual Chat, Ze Frank Show, Google Maps API, Making a map, Batchgeocoder, Searchmash, Ask a Ninja, Sparkpeople, DMN C0mmunications, Software Saturdays, Web [...]

VJ says:

April 6, 2007 at 11:39 pm

http://www.econym.demon.co.uk is a great site, it helped us to finish our GM mashup project with world-wide panoramic virtual tours on http://3dtour.cz . Worth browsing through the site and learning how different things in GM API work.

Tom says:

April 9, 2007 at 12:58 am

Thanks for the site recommendation. It has some great tutorials. I remember finding that site when I was searching about Google maps. It’s very helpful.

Thanks,

Tom

Member map says:

May 2, 2007 at 5:43 pm

[...] to see where everybody is. member map…some random forum Or something like this: another map (done like this) I dunno if this is easy, feasible, or what…just thought I’d bring it up… … [...]

ppb2 meetings? - Page 9 - [pushpullbar]2 says:

May 28, 2007 at 6:02 am

[...] below- http://stc-suncoast.org/map.html and page with instructions on how to do it here: http://www.idratherbewriting.com/200…h-google-maps/ Who is up to the [...]

Damaged Roses -> Map says:

June 10, 2007 at 6:53 pm

[...] I'm not certain, but this may help…http://www.idratherbewriting.com/2007/02/0…th-google-maps/ [...]