Google Maps Standalone Mode

Did you ever wish you could display a Google Maps map view—with custom data—on your own web page? No? Well, maybe you should go take up geocaching or something. On the other hand, if it sounds like something you'd like to do, read on...

New: myGmaps enables you to create, save and host custom data files and display them with Google Maps.
Visit myGmaps.com for custom Google Maps.

Note: The Unofficial Google Maps Embedding How To now demonstrates how you can embed or include a Google Maps viewer widget in your own web page. In most cases you will probably want to use the base technique described there. This page still has useful information though.

First up, read the disclaimer, no web page should be without one! Then, check out the Gmaps standalone mode demonstration (Update: New demo--also features two views on one page) featuring custom XML data and XSL stylesheet.

How it works

[Update 1: ...or not, as the case may be. Yeah, apparently this is b0rked in IE, so I need to look into that... Mozilla/Firefox should work fine though. If you want to debug it for me, feel free. :-) ]

[Update 1.1: I'm thinking the problem is that IE won't let me replace the open method of the XMLHttpRequest object. If this turns out to be the case I'll probably have to use the proxying approach I used originally.]

[Update 2: Okay, the latest version is 0.0.3 (example usage), let me know if it breaks anything. It uses maps.5.js, new Gmaps constants and needs fewer files. (Download (see part 5 for new download link) it if you want to run your own server (you don't have to, though).]

[Update 3: Internet Explorer now works with standalone mode (at least the version I used did...). Also, updated to use latest Google JavaScript code and changed preferred URL. See Part 4 below.]

If you wanted to include the above demo on your web page you would include the following HTML snippet: (Update: now uses version 0.0.5)

<iframe src="http://stuff.rancidbacon.com/gmaps-standalone/gmaps-standalone-0.0.2.cgi?url=http://stuff.rancidbacon.com/gmaps-standalone/demo1.xml" width="600" height="400" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" />

<iframe src="http://mygmaps.com/show/0.0.5/?url=http://stuff.rancidbacon.com/gmaps-standalone/demo1.xml" width="600" height="400" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" />

The "service" is provided via the URL http://stuff.rancidbacon.com/gmaps-standalone/gmaps-standalone-0.0.2.cgi http://mygmaps.com/show/0.0.6/ which accepts one parameter url that should refer to an XML file in a format Google Maps recognises. For our demo we used http://stuff.rancidbacon.com/gmaps-standalone/demo1.xml, which we can see here:

<?xml version="1.0"?>
<page>
<title>Custom XSL Demo</title>
<query>Why?</query>

<center lat="49.29" lng="-123.12"/>
<span lat="0.017998" lng="0.027586"/>

<overlay panelStyle="/mapfiles/geocodepanel.xsl">
<location infoStyle="http://stuff.rancidbacon.com/gmaps-standalone/geocodeinfo-demo1.xsl" id="A">
<point lat="49.286428" lng="-123.116856"/>
<icon image="http://libgmail.sourceforge.net/man.png" class="local"/>
<info>
<title xml:space="preserve">
</title>
<address>
<line>Mr G. Oogle</line>
</address>
<image>
http://www.google.co.nz/images/logo_sm.gif
</image>
</info>
</location>

<location infoStyle="http://stuff.rancidbacon.com/gmaps-standalone/geocodeinfo-demo1.xsl" id="B">
<point lat="49.287428" lng="-123.126856"/>
<icon image="/mapfiles/marker.png" class="local"/>
<info>
<title xml:space="preserve"></title>
<address>
<line>Here be spiders...</line>
</address>
<image>
http://libgmail.sourceforge.net/spider.png
</image>
</info>
</location>
</overlay>
</page>

Note: Make sure any URL you supply does not require authorisation.

In fact, this file isn't quite the standard Google Maps format, for a couple of reasons:

• It includes a custom XSL stylesheet.
• It includes the custom tag <image>.

The custom XSL stylesheet used is based on the standard Google Maps stylesheet with some modifications:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:template match="/">
    <xsl:apply-templates select="location"/>
  </xsl:template>

  <xsl:template match="location">
    <div style="padding-right: 8px; margin-top: 2px">
      <xsl:apply-templates select="info"/>
    </div>
  </xsl:template>

  <xsl:template match="info">
  
    <xsl:variable name="page" select="../@arg0"/>
    <xsl:variable name="address">
        <xsl:for-each select="address/line">
          <xsl:if test="position() &gt; 1">, </xsl:if>
          <xsl:value-of select="."/>
        </xsl:for-each>
    </xsl:variable>

    <div style="font-weight: bold">Custom!</div>

    <div>
	<img>
	   <xsl:attribute name="src">
		<xsl:value-of select="image"/>		
	   </xsl:attribute>
	</img>
    </div>

    <div style="font-size: small; margin-top: 14px">
      <xsl:apply-templates select="address/line"/>
    </div>

  </xsl:template>

  <xsl:template match="line">
    <div style="margin-top: 2px"><xsl:value-of select="."/></div>
  </xsl:template>

  <xsl:template name="getSingleLineAddress">
    <xsl:for-each select="address/line">
      <xsl:if test="position() &gt; 1">, </xsl:if>
      <xsl:value-of select="."/>
    </xsl:for-each>
  </xsl:template>

</xsl:stylesheet>

If you want to plot your own custom data (like this: Live Seattle 911 Incidents, you would begin by modifying the XML file and then the stylesheet. (If it survives long enough I intend to go into a little more detail on how to do this, but you might find some ideas on the pages linked from the Google Maps Hacking and Bookmarklets page.)

This is just a quick introduction and doesn't really tell you much, but it's a start.

Note: While I was working on this, I discovered Google Local search now includes a mini-map view (see: Google Local search with mini-map), I haven't had a chance to find out how easy it would be to switch to using the mini-map view for standalone mode.

Here's a quick archive of (I think) all the files used to run the "service": gmaps-standalone-0.0.2.tgz (see part 5 for new download link).

Part 2 : Some tips on using custom data

Troubleshooting your XML file

I've noticed a few people are using custom data already and have observed a couple of issues:

• The first characters of the XML file must be: <?xml version="1.0" no blank lines, no single quotes. This is because the file retrieval helper script rejects any file that does not begin with those characters.
• If you can't get your file to work try the following steps:
  1. View the target URL in your browser, also ensure it's publically accessible (perhaps via an online proxy). e.g. http://stuff.rancidbacon.com/gmaps-standalone/demo1.xml
  2. Ensure the file can be retrieved successfully by the helper script. e.g. http://stuff.rancidbacon.com/getrawfile.cgi?url=http://stuff.rancidbacon.com/gmaps-standalone/demo1.xml
  3. Update: If the map still does not display correctly, view the source of the page generated by the gmaps-standalone script and look for a line containing var _initialUrl = and check the URL matches yours. If it doesn't, email me the URL you supplied and I'll look at modifying the script to accept it. (The script is very unpermissive when it comes to characters in the URL.) Update: Don't worry about this, we now handle the URL differently, so any characters in the URL should work (But the protocol still needs to be http.)

Generating XML files in Google Maps format

Also, if you've got Python installed I've created a helper script that will accept a file with a list of location queries and will output an XML file in the correct format which includes all the locations. It includes the start of Python bindings to Google Maps (libgmaps). Download generate-gmaps-0.0.1.tgz

Generate the XML file, upload it to a public URL and try it out.

Update: As I added in a comment over at Engadget:

http://stuff.rancidbacon.com/search2xml.cgi

It's really basic, not fully functional and limited to ten locations, which can take up to a minute to generate. Save the generated file then upload where necessary. (Note: The title doesn't display using the standard Gmaps style-sheet.)

Your attempts not to kill the server would be appreciated. :-)

Part 3 : Display Custom HTML in Info Window Pop-Up

I have modified the standard Google Maps XSL stylesheet (Google Maps custom HTML info window stylesheet) for the info window pop-up to allow it to include custom HTML from the XML file. This means there are now essentially no restrictions on the content of the pop-up (Custom HTML info window example XML data): In addition to the example in the image above, I have also successfully included a Flash movie in the pop-up. Note the width of the pop-up seems fixed. (Update: Pop-up width now seems essentially unrestricted.)

Part 4 : Now works with another browser

Newly released standalone map version 0.0.4 0.0.5 now appears to work with Internet Explorer (and Safari?) (let me know if you have a version that works on the official Google Maps site but not with standalone mode). The official URL is now http://mygmaps.com/show/0.0.5/?url= and this custom Google Maps example should work in Internet Explorer.

Some notes from development of 0.0.4:

• Google now seems to have deleted all the old maps.X.js files from their server, so the only version remaining is now maps.6.js. Standalone mode 0.0.4 actually doesn't link to this file directly, it uses a technique observed on the briefly available Google RideFinder site. Rather than link to maps.6.js directly, we link to http://maps.google.com/maps?file=js, which includes some configuration information previously included in the HTML page and conditionally loads one of three sub-versions (http://maps.google.com/mapfiles/maps.6.js, http://maps.google.com/mapfiles/maps.6.safari.js or http://maps.google.com/mapfiles/maps.6.xslt.js). (Trivia note: It appears we are using this technique before the main Google Maps site does. :-) )
  
  
• I haven't looked closely at the changes in maps.6.js but it seems there is now no maximum pop-up width restriction. I also noticed the height calculation was incorrect in at least one example pop-up with an image (it worked okay in a previous version).
  
  
• Incidentally, it appears the reason Internet Explorer did not work was because it didn't allow us to directly modify the behaviour of the XmlHttpRequest object. (In Mozilla/Firefox we could simply replace the open method directly, but it appears IE's ActiveX implementation doesn't allow that approach.) As a result, we now proxy the whole object (for both IE & Moz) which seems to do the trick.
  
  
• Turns out my code also had a bug however, (shock, horror!) because I didn't set the onreadystatechange callback before I called send on the XmlHttpRequest object. Mozilla/Firefox didn't seem to mind or notice but IE didn't see the function at the time the callback was called. (Maybe it copies the object at the time the callback is set rather than passing a reference? Don't know.)

Here's a quick archive of (I think) all the files used to run standalone mode version 0.0.4 (you only need this if you want to run it on your own server, which you don't need to do.): gmaps-standalone-0.0.4.tgz (See part 5 for new download link.)

Part 5 : Satellite of lurve...

The addition of the satellite image viewing mode broke the standalone viewer, so we're now up to version 0.0.5 0.0.6 0.0.7 (I redirect requests for version 0.0.4 & 0.0.5 & 0.0.6 so hopefully the upgrade was transparent). Also, apologies for not including the new standalone code in downloadable form until now: gmaps-standalone-0.0.7.tgz (For future reference I'll probably include later versions in a similarly named location.) (Update: Check out the README with installation instructions created by Louis--thanks Louis!)

Some notes from development of 0.0.5:

• The two different viewing modes are abstracted out as "specifications". Currently there are two specifications defined, they are named _GOOGLE_MAPS_SPEC and _KEYHOLE_SPEC. The interesting thing about them is it may provide a way to use the Gmaps interface with other data sources, like, ummm, TerraServer, maybe? As much as I'd like to be the person to do this (or not, potentially) I can't keep up with the email (apologies to those still waiting for a reply) and new features for the Standalone Viewer and myGmaps.com as it is, so I thought I'd suggest a starting point. A specification seems to need to implement the following interface:
  
  
  • Fields: tileSize, backgroundColor, emptyTileURL, numZoomLevels, baseURL, isNew
  • Methods: adjustBitmapX, getBitmapCoordinate, getLatLng, getTileURL, getTileCoordinate, getLowestZoomLevel, getPixelsPerDegree, getLinkText, getURLArg, getCopyright, getCopyrightColor
  
  The above comes from the object named Pb (or _KEYHOLE_SPEC) in maps.keyhole.1.js. So, I guess it's "Go, go, Lazy Web...".
  
  
• Keyhole tiles come from http://kh.google.com/kh.

Some notes from development of 0.0.6.

Some notes from development of 0.0.7:

• Only significant issue is the _MapsApplication constructor now takes an argument containing the map specifications.

Remember to check out myGmaps.com to create, save and host custom data files and display them with Google Maps.

-- follower at myrealbox.com (Original page: http://stuff.rancidbacon.com/gmaps-standalone/)