2006  August 28

Google Map in a Blog

With all the interesting services being "mashed-up" around the Google Map API I thought it would be easy to figure out how to simply show a map inside a blog entry. I discovered it really wasn't that simple at all. First of all place the little code snippet here in your HTML header (between the <head> and </head> tags). Note that you will need a superlong string of text that is your Google Maps API key that needs to map to your originating URL.

[Click on Me to Fetch Google Map]

Then all you do is give your map a name, size in width/height, a title, and an address by putting this where you want the map to go all on a single line in raw HTML mode:

<div id="mappy" style="400px; height: 300px; background-color:white; padding: 10px"><span onclick="googlemap('The Media Lab','20 ames street, cambridge ma 02139','mappy')">[Fetch Google Map]<span></div>

Note that the map is named mappy and that this exact name has to be used twice in the above incantation. You want to use a unique name each time you insert this little snippet into your blog. I do hope this works for you. The map does not automatically display because I wanted to be able to have multiple map entries easily displayable within a blog architecture -- which doesn't work quite right in the Javascript world so my solution is a compromise.

Back to Top

Copyright 2005 - 2014, John Maeda