Custom Google Maps

Recently, I launched our new Interactive Campus Map that integrates with the Google Maps interface. Some of you may remember my past experiences working with the Google Maps API. Well, this is much more complicated. Although this took me more time than I would have liked to get working, I now know my way around the API (mostly). This is a huge advantage moving forward because there’s even more that I can do with it and even more to come.

Unlike the last post, this will not be a tutorial but more of a guide to get you started. You may want to walk through my source code to understand what I’m talking about. If you haven’t yet read my previous post on how to get a simple Google Maps working on your site, you might want to start there. Okay, let’s get to it.

Here’s a list of tools and resources that I used:

• Google Maps API key
• Photoshop CS3
• Dreamweaver or some kind of HTML editor
• Automatic Tile Cutter
• Mapki’s Add Your Own Custom Map
• Google Maps API Tutorial
• Google Maps API Reference
• Google Maps API Discussion Group
• csv2xml converter

What I wanted out of my custom Google Map was to use my own images (Google calls these tiles), to be able to zoom in and out, have a marker for every building with some data in the info bubble, and have some kind of search function. What you end up with is a fully interactive map in an interface that most users will already be familiar with.

Here are the steps you need to take to integrate a custom tiled map onto your site:

1. Find an image to use, preferably one with high quality for zooming
2. Use this tool to figure out the coordinates of your tiles over the standard Google Maps tiles. NOTE: if you plan on showing the standard Google Maps in addition to your custom map, you will need to ensure your image lines up and scales correctly. If you do not do this, the markers you place later will be aligned incorrectly. However, if you know you only want to show your custom map, you can be a little more forgiving on the coordinates.
3. Once you obtain the coordinates, you can configure the Automatic Tile Cutter script.
4. After you plug in your options and save the file, go into Photoshop, open your image and run the script (File->Scripts->Browse). Here it will cut up your image into 256×256 squares for all of the different zoom levels you wanted.
5. Now that you have all of your images, you are ready to add the code to make them show up in Google Maps. Follow the steps in the Mapki to create all of the GCopyright Javascript objects you need.
6. The next step is to add the custom GTileLayer object. This is what tripped me up the most because the Mapki’s tile function is a little out of date. I referenced this tutorial and used the second CustomGetTileUrl function at the bottom of the page. Eventually, I added bounds checks to display a blank image outside of the x/y coordinates. NOTE: the zoom levels passed to the GTileLayer are based off an array numbering system. For example, my lowest zoom level is 15 and my highest is 17. Therefore, in the GTileLayer object I must pass 14 and 16, respectively, in order for the tiles to show up correctly.
7. Now all that is left to do is add our custom map and center it.
8. From there, you can add your own markers via XML. Make your life easier by storing your data in a CSV file and generating the XML from that. If you were industrious, you could store your data in a SQL database and dynamically generate the XML that way.

Whew. As you can see, there’s really a lot to it with quite a few pitfalls. Google doesn’t make this any easier by providing less than helpful documentation. Plus, whatever tutorials you find are either too simple or out of date. But, the upside is that Google lets you customize just about any aspect that you would like. The one downside I would point out is that we can’t have a “Directions To/From Here” function yet. Because of all the construction and road changes around campus, the default Google Maps tiles have yet to be updated which means Google’s directions would be incorrect most of the time.

Keep an eye on the Interactive Campus Map because it will continue to be improved with new functionality. If you have any questions, just let me know.

UPDATE

The campus map has been updated and no longer uses custom tiles.  For more information on this change, please read this post.  However, if you would still like to see the results of the above steps, click here to view the old custom Google map.

About these ads