KML overlays in Google Maps in two minutes
Posted: June 23, 2007
Following on from the Google Developer Day a few weeks back, in which we were all encouraged to encode our geographical data in KML format (Google can index data encoded in KML), I thought I’d have a play around with KML overlays in Google Maps. KML is used mainly to mark up overlays in Google Earth, but a subset of it is available for use in Google Maps.
The title of this post is a little misleading — show me anything you can do in Google Maps in two minutes and I’ll buy you a bun. By the time you’ve worked out the longitude and latitude references for your map and its placemarks you’ve probably lost a couple of hours at least but we’ll brush over that for now.
However, using KML overlays for maps can save you a bit of time fiddling around with the API when creating your markers and setting the event listeners and the like. Encode your data in a KML file, point your maps script at it and much of the work is done. It’s not quite as flexible as using the API, but for a basic map it will save you some time. What’s more, you can use your KML file on the Google Maps site, export it for use in Google Earth and get your data indexed on Google.
I’ve created a basic example which plots three points of interest in Greenwich, London. The references may not be very accurate but I don’t care, it’s a demonstration. First create your KML file. This is a XML file with a .kml extension:
<kml xmlns="http://earth.google.com/kml/2.1">
<Document>
<name>A small map of Greenwich</name>
<description>A very basic map of Greenwich,
SE10 made to demonstrate KML
overlays</description>
<placemark>
<name>The National Maritime
Museum</name>
<description>
<!--[CDATA[
<!-- html code goes in here -->
]]-->
</description>
</placemark>
<point>
<coordinates>
-0.003747,51.481154,-1
</coordinates>
</point>
</Document>
</kml>
Then create your Javascript file. Create an instance of GGeoXML and give it the location of your KML file. Then use the overlay method of GMap2 to overlay it on your map. Be warned that your KML files will be cached by Google Maps which can be a tad frustrating when you’re trying to debug your file. To avoid caching, add a query string parameter to your file name with a value of the date and time (this will change every second which should be enough for you).
E.g.
url_end = "?nocache=" + (new Date()).valueOf();
myKML = "http://www.myserver.com/kml.file" + url_end
var map = new GMap2(document.getElementById("map"));
// Add controls
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
geoxml = new GGeoXml(myKML);
map.addOverlay(geoxml);
That’s about it.
If you want to play with the code yourself, don’t forget you’ll need to substitute my maps API key for yours.
A couple of things to look out for
Make sure you keep the CDATA sections in the placemark description tag, otherwise you’ll need to escape your html with entities.
Don’t bother putting class names into the HTML in your KML file’s description tags as these will be stripped by Google Maps. Google Maps uses inline styles instead. Ouch. To get round this problem you can build some styles in your map page stylesheet. As a default Firefox will display the text of the name element of your placemark in bold, although Internet Explorer 7 won’t. I got round this problem thus:
#map div { font-weight:bold;}
#map #iwsw p { font-weight:normal !important;}
The iwsw id is what appears to be generated around your placemark window, so you can use this to cascade your styles down.
If you make a syntax error in your KML file, you won’t get any warnings — it just won’t display. It may be best to edit your file as .xml file in your editor of choice and then save it out as .kml.
No comments? The comments haven't exactly been coming thick and fast recently so I've disabled them for the time being. Instead, why not drop me a Tweet at @littlednet or email me at info@littled.net?