» Visit the new RISD 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.

This entry was posted on Monday, August 28th, 2006 at 3:03 pm and is filed under code. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Comments Area

NOTE: I reserve the right to edit or delete inappropriate comments. But I'm also a believer in free speech. Keep it simple.

(required)