To achieve this you need to have already loaded the Google Maps API and then in the
headsection of your page load my KMLMapLoader. The when you want to embed a map you create a
DIVto contain it. For example, to create the map I showed above you add the following to your page:
<div kml="http://www.dcs.shef.ac.uk/~mark/blog/blog_files/journeys/to_work_updated.kmz"It is reasonable straightforward but here is an explanation of the different attributes you can set:
zoom="11" latitude="53.4717" longitude="-1.511993"
style="border: 1px solid black; width: 600px; height: 700px;">
- This should be the URL of the KML or KMZ file you wish to display on the map.
- The latitude of the centre of the map.
- The longitude of the centre of the map.
- The zoom level (level 0 shows the whole earth, each increase in zoom level increase the area seen be a power of 2).
- The map type. The default is the street level map, but you can specify any of the types Google supports. Note that id you specify
G_SATELLITE_3D_MAPand the Google Earth plugin isn't installed then rather than an error message the script will revert to using
mapand this can be used to further configure the map (for example adding a large map control rather than the default small control the script uses).
kmlattribute is required, but to set the location of the map
zoommust all be specified.
The script actually does a little more than loading the map, it also provides a fix for a bug in the current version of the Google Maps API. When loading a KMZ file the images etc are accessed through a server side script. Unfortunately the API uses a relative URL to point to this script and so KMZ files display properly if loaded through the main Google Maps website but not when loaded using the API. KMLMapLoader adds code to fix this bug which you can reuse even if you don't want to use the loading facilities.