Google Mashups For The Masses

Google Maps has just unveiled a new feature called My Maps, which is a new tab in the left sidebar of the standard maps interface. Its a really cool drag-and-drop app to let you create your own Google Maps mashup. No coding experience needed!

I whipped out one called Travel 2007 that marks which places I've visited thus far this year. No fancy integration with my Flickr photosets yet... but that's next

After generating the map with the drag-and-drop interface, I noticed that I could access the raw Keyhole Markup Language (KML) data stream for my mashup simply by clicking on the KML button in the toolbar. That stream contains all the data about where I placed my markers, and all the HTML to display when I click the marker. It also means that I can easily embed my mashup on any web page with the GGeoXml object in the Google Maps API!

I decided to experiment a bit more, and discovered that it was very easy to embed my new custom map on my own site. I used the following code:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAlf8a3CMvzrFgicdVBptHFxSAGU9J3S8Ih5k7oH5LU0CnSiViQxTbhZMpZiKer6MFPjGiVEv8LwGPsg" type="text/javascript"></script> <script type="text/javascript"> var map; var geoXml = new GGeoXml("http://maps.google.com/maps/ms?ie=UTF8&hl=en&om=1&msa=0&msid=113578547697545679944.00000111c76c0c4088183&output=kml"); function onLoad() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.setCenter(new GLatLng(49.496675,-102.65625), 3); map.addControl(new GLargeMapControl()); map.addOverlay(geoXml); } } </script> <div id="map" style="width: 480px; height: 320px; float:left; border: 1px solid black;"></div> <script>setTimeout(onLoad, 500);</script>

After which, I could see my map embedded on this very page:




If you wish to re-use my code on your website to display your maps, be sure to make the following changes:

  • Change the Google Maps API key to the one you registered for, since my API key only works for bexhuff.com.
  • Change the URL in the GGeoXml object to the URL of the KML data you wish to display. Again, you can get this by right-clicking on the KML button on your map, and getting the URL.

After this, you can embed any Google My Maps onto any HTML page... which means that maintaining quick mashups just got a whole lot easier...

UPDATE: Because of some bugs in Microsoft Internet Explorer 6, I has to wrap the call to onLoad in a setTimeout call. The 100% safest method is to place the call in the onLoad event handler for the body tag, but the above code is more portable.

Recent comments