• Introduction
• Step 1: Line up the venue floor plan with Google Maps imagery
• Step 2: Scale down the floor plan for multiple zoom levels
• Step 3: Register an anchor point in your floor plan images with a latitude/longitude
• Step 4: Run gmaps-tiler.py on your images to generate Maps API tiles
• Step 5: Write some fancy JavaScript using the Maps API and GTileLayerOverlay
• Bonus Step: Use the Spreadsheets API for storing marker data

Introduction

If you attended Google I/O 2009 a few weeks ago, you may have noticed a kiosk station on the 2nd and 3rd floors of Moscone West labelled 'Interactive Conference Map, powered by Google Maps'. The kiosk simply pointed to a JavaScript Maps API-based interactive map of the venue.

Today, I'm going to run through the steps I went through to create this map, so that you can build a similar application for your own event, venue, campus, or whatever.

First, some prerequisites:

• Python 2.5+, with PIL (Python Imaging Library) installed.
• A basic knowledge of JavaScript and the Google Maps API v2 for JavaScript.

A quick note before we begin, most of the code and Adobe(R) Photoshop(R) sources used in the Google I/O 2009 map are available at this open source project.

Step 1: Line up the venue floor plan with Google Maps imagery

So the first thing you'll want to do is get a high-resolution graphic of the venue floor plan. This part will vary severely by use case, so I won't go into detail on it. For Google I/O, we had a third party contractor design the floor plan.

Next, you'll want to take a few screenshots of the venue in Google Maps at the closest zoom level possible (I used zoom level 21) and import them into your image editor, along with the venue floor plan graphic. You may need to use some image editing wizardry to align multiple Google Maps screenshots into one.

Note: we aren't actually going to use any Maps imagery in the final output (that would violate our Terms of Service); we're just using the imagery to help align our venue floor plan.

Once you have Maps screenshots and the source graphic in your image editor, rotate and scale your source graphic so that it lines up as closely as possible to the corresponding location in Google Maps. After your floor plan lines up cleanly with Google Maps imagery, remove the Maps imagery so you are just left with the floor plan.

At this point, you may want to add in static text labels onto the floor plan (Note, these won't be clickable in the final application).

Here's an example of output from this step: L2_21.png

Step 2: Scale down the floor plan for multiple zoom levels

Now that you have a giant hi-res image that looks good overlayed on top of Google Maps imagery at a high zoom level such as 21, you'll want to scale it down several times for several smaller zoom levels (20, 19, 18, etc.).

Since imagery at zoom level n - 1 is 50% the width and height of corresponding imagery at zoom level n, you can simply scale down your hi-res image by 50% repeatedly to create the lower zoom levels.

One thing to note is that, if you added static text labels, you'll probably want to keep those from scaling down in size, because otherwise you'd end up with unreadable text. Also, if your text labels start to clutter the map, you should probably selectively remove labels of lesser importance at lower zoom levels.

Here's an example of output from this step: L2_20.png, L2_19.png, L2_18.png

Step 3: Register an anchor point in your floor plan images with a latitude/longitude

Now that you have a floor plan image for different zoom levels, you'll need to register a point on your venue floor plan to a latitude/longitude. To do this, visit a site like getlatlon.com to get the latitude and longitude of a point somewhere along the edges of the venue location. We'll call these the 'anchor' latitude and longitude.

Then, compute the (x, y) of the same point in your highest zoom level floor plan image as a fraction. For example, if your largest floor plan image is 3000x2000 and the point on the floor plan corresponding to the anchor lat/lon is at (1000, 1000) then your (x, y) as a fraction is (0.33333, 0.5).

Step 4: Run gmaps-tiler.py on your images to generate Maps API tiles

Now that you have the floor plan images, an anchor (x, y) and anchor lat/lon, you're ready to make some tiles for the Google Maps API using the gmaps-tiler.py script.

Download the gmaps-tiler.py script and run this command for each zoom level from your shell/command prompt, replacing the values in italics with information from the previous steps:

   python gmaps-tiler.py <floorplan-image-for-zoom-level> <zoom level> <anchor-latitude>,<anchor-longitude> <anchor-x>,<anchor-y> <output-format>.png

For example, running this command with these paramters:

   python gmaps-tiler.py L2_18.png 18 37.78384,-122.40389 0.58278,0.00647 "output/L2_%z_%x_%y.png"

will create images such as L2_18_41940_101316.png.

A more complex sample usage of gmaps-tiler.py can be found by looking through the maketiles.sh source file.

Step 5: Write some fancy JavaScript using the Maps API and GTileLayerOverlay

At this point, you've got tiles ready for consumption in the Google Maps API. Getting custom tiles into a JavaScript Maps API application is pretty simple with the GTileLayerOverlay and GTileLayer classes. All you need to do is create a class that extends GTileLayer and implements the getTileUrl method to tell Maps how to get to your generated tile set. Here's a pseudo-excerpt:

MyTileLayer.prototype.getTileUrl = function(tile, resolution) {
  ...
  
  var template = 'http://path/to/your/tiles/output/L2_{Z}_{X}_{Y}.png';
  return template
      .replace('{Z}', resolution) // zoom level
      .replace('{X}', tile.x)
      .replace('{Y}', tile.y);
};

For a full example of implementing GTileLayer, check out the mallmaptilelayer.js source file.

The rest is really up to you; check out the full source of the Google I/O 2009 interactive map for more code and creative ideas.

Bonus Step: Use the Spreadsheets API for storing marker data

You may also notice that there are extra content in the form of Maps markers that appear above the map for each floor in Moscone West. These markers are stored in Google Spreadsheets in a very basic format (click for CSV) and are fetched via JavaScript using JSONP. The majority of the code used for this can be found in the content.js source file with the marker creation code in index.js (look for createContentMarker).

For more information on using the Google Spreadsheets Data API in Maps, see this demo application.