My maps on your website

Context

I have started a couple of months ago a web service enabling users to create a Google Maps and to customize it (adding of point of interest, icons and paths). Before having the chance to put it on-line and to become a millionaire, Google itself caught me on the hop by putting on-line the service My Maps.

In my service, I was providing also the possibility to integrate their customized maps easily on their website by using a simple javascript code.

Since I found this function very useful but because the realisation of the service itself was not needed anymore (thank you Google), I have done some researched on the functions available on Google Maps and I faced the fact that this particular function was not (yet) available.

Here is MY solution (and thus non official and non acknowledged by Google) to integrate My Maps Google Maps on the pages of a web site.

Preliminary explanations

To create a customized map, you have to register to the service Google Maps Mes Cartes.

When you create a customized map on Google Maps, informations related to this map (points, lines…) are saved on Google’s server. You can modify your maps from any computer.

If your map is public, it will be accessible by any user via Google Maps or Google Earth search services. If it is private, it will be accessible only by users knowing the URL address.

The URL to look at a map is like:

 http://maps.google.com/maps/ms?om=1&msa=0&msid=XX.YY&z=7

The parameter msid is the unique login of your map (XX corresponds to your account and YY to the specific map), z corresponds to the default zoom of the map.

Google provides a very useful function that enable to export a map to KML format. This format (based on XML) is used to stock geographical informations used in mapmaking (Google Earth, Google Maps) or navigation (GPS) softwares.

Thanks to Google great ideas, the KML file of a specific map is always accessible via an URL like (you can find this URL by right-click/Copy the shortcut on the KML link of your map):

 http://maps.google.fr/maps/ms?om=1&msa=0&msid=XX.YY&output=kml

The URL is identical to the maps one with only the parametre output in addition. Your map is thus usable in almost any KML compatible software.

The Google Maps coding interface (Google Maps API) allows the webmasters to insert a map Google Maps onto the pages of their website.

The successive evolutions of Google Maps, make it possible today to open a KML file and to display it thanks to the object GeoXML.

In order to use Google Maps programming functions, one has to register and provide the URL of the website where the maps will be displayed. Google will then be able to analyse, screen, make displaying statistics and bannish in case of non respect of Terms and Conditions.

After the registration is completed, Google gives an only login named Google Maps API Key. This login will be use in the javascript written to insert the Google Maps map.

The solution

When you insert a map Google Maps into a web page, you simply have to add the two following lines in order to load the KML file and to display its content.

 var geoXml = new GGeoXml("KML_URL"); map.addOverlay(geoXml);

Note: The object GGeoXml takes in parametre the complete URL towards a KML file. This KML file can be hosted on any website (it does not have to come from Google). Hence, KML generated by other softwares can be used. Google does not load the KML file at each call and prefers to use the cache version. To force the use of the modified file, the URL has to be changed (for example by adding any parametre at the end http://www.site/com/fichier.kml{{?741852963)

Here is the complete code of a webpage integrating a map Google Map:

<html><br />
<head><br />
<script type=”text/javascript”<br />
  src=”http://maps.google.com/maps?file=api&v=2.x&key=YOUR_GOOGLEMAPS_API_KEY”></script><br />
  <script type=”text/javascript”><br />
  var map;<br />
  function onLoad() {<br />
    if (GBrowserIsCompatible()) {<br />
      map = new GMap2(document.getElementById(“map”));<br />
      map.addControl(new GLargeMapControl());<br />
      map.addControl(new GMapTypeControl());<br />
      var geoXml = new GGeoXml(“http://maps.google.fr/maps/ms?om=1&msa=0&msid=XX.YY&output=kml”);<br />
      map.addOverlay(geoXml);<br />
      map.setCenter(new GLatLng(0, 0), 3);<br />
    }<br />
  }<br />
  </script><br />
</head><br />
<body onload=”onLoad()”><br />
  <div id=”map” style=”width:500px;height:300px;”></div><br />
</body><br />
</html>

For example: the URL of the map “My holiday trips” is:
http://maps.google.fr/maps/ms?om=1&msa=0&msid=1009281564…

Here is the result of its integration in this page:

Comments

Google uses the exact objects GGeoXml on its own site, thus, notable differences can sometimes be seen between the KML file display on your website and its appearance on Google Maps. Mainly the differences are:

GGeoXml on your website have to load the KML file with HTML respecting the XHTML norm in the descriptions. In other words, the HTML opening tags <...> in the CDATA needs their closing matches () or have to be atomic (<.../>
GGeoXml does not display all the labels if their are too many in the KML file or if the KML file is too big. Moreover, the file generated by Google Maps states a style for each label even if this style is already stated somewhere else, this increase the file size even more. My advice is to take the KML file from Google and to modify it in order to lighten the styles declaration (it is a bit boring to do manually but it can be automatised). If the file is still too big, it has to be cut into several files (for example: by theme, by place, by kind of place…) and to declare in javascript several GGeoXml (each opening a different KML file) and to add each GGeoXml with the function AddOverlay.
Google is doing a bit of automatic formatting when displaying the InfoWindow (Title is in bold, URLs are converted in links…), stuff that you have to do manually on your website.