Maps provided by Google can be embedded into a website using three approaches. The first approach consists in simply creating a custom map via the custom map editor. It allows you to add placemarks, draw lines and shapes, and publish your map for public consumption. The map can be then embedded in your website.

The second approach consists in customizing the map via javascript using the Google Maps JavaScript API.

The downside of these two approaches is that it requires the client to download complex pieces of JavaScript. With mobiles, the bandwidth is always a bottleneck. Additional, the clients on some older mobiles may not be advanced or powerful enough to let the user interact, and in some cases, view the map.

The third option then consists in relying on static images to deliver maps. Google provides such a functionality via the Static Maps API. This service creates a map based on URL parameters sent through a standard HTTP request and returns the map as an image that can be displayed on the web page. Similarly to custom maps, placemarks and lines can be added via additional URL parameters.

A common scenario is to create and publish a custom map, and choose to convert it later to a static image for an easier consumption by mobiles. Unfortunately, there is no built-in mechanism to convert a custom map to an equivalent static map. The solution starts by downloading the KML file of your custom map. As KML is based on the XML standard, it can be processed by a XSL transformation to generate a static URL with a format compatible with the Google Static Maps API. </p>

To illustrate the process, I have created a custom map listing the places where I worked. I have then downloaded the related KML file. The structure of this file is easy to follow as it is a collection of placemarks defined by a name, a set of coordinates, and a style. In the following excerpt, the placemark “Boca Raton” is associated to style 9 which is, in turn, rendered by a red dot.

<Placemark>
    <name>Boca Raton, FL</name>
    <description><![CDATA[See  <a href="http://pierrerebours.com/category/geography/usa/florida/boca-raton" target="_blank">details</a>.]]></description>
    <styleUrl>#style9</styleUrl>
    <Point>
      <coordinates>-80.088997,26.350460,0.000000</coordinates>
    </Point>
  </Placemark>
<Style id="style9">
    <IconStyle>
      <Icon>
        <href>http://maps.google.com/mapfiles/ms/micons/red-dot.png</href>
      </Icon>
    </IconStyle>
  </Style>

I have included below an example of a XSL transformation which identifies all the placemark tags and produces the final image URL. For each of these tags, the related style is located and the final color of the marker is extracted. The first letter of the name of the placemark is used as the label in the final transformation. The XSL transformation can be adapted to accommodate more complex scenarios such as the rending of lines or shapes.

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:kml="http://earth.google.com/kml/2.2" >
<xsl:template match="/">
  <xsl:text>&#xa;</xsl:text>
  <xsl:apply-templates select="kml:kml/kml:Document"/>
</xsl:template>

<xsl:template match="kml:kml/kml:Document">
  <!-- 
    http://maps.googleapis.com/maps/api/staticmap?center=30,0&amp;size=400x200&amp;zoom=1&amp;scale=2&amp;sensor=false&amp;maptype=roadmap
  -->
  <xsl:for-each select="kml:Placemark">    
    <xsl:text>&amp;markers=</xsl:text>
    
    <xsl:variable name="styleUrlId" select="substring-after(kml:styleUrl, '#')" />
    <xsl:variable name="styleUrl" select="../kml:Style[@id=$styleUrlId]/kml:IconStyle/kml:Icon/kml:href" />
    <xsl:variable name="color" select="substring-after(substring-before($styleUrl, '-dot.png'),'micons/')" />
    <xsl:text>color:</xsl:text>
    <xsl:value-of select="$color" />
    
    <xsl:text>%7Clabel:</xsl:text>
    <xsl:value-of select="substring(kml:name,1, 1)"/>
    
    <xsl:text>%7C</xsl:text>
    <xsl:value-of select="substring-before(substring-after(kml:Point/kml:coordinates, ','), ',')"/>
    <xsl:text>,</xsl:text>
    <xsl:value-of select="substring-before(kml:Point/kml:coordinates, ',')"/>
     
     
  </xsl:for-each>
</xsl:template>

</xsl:stylesheet>

The end result follows. The first map is created using the Google Static Map API, while the second map is simply created by embedding the custom map directly in the page.

Google map defined as an image URL

Google Map defined in a HTML frame