March 2007 Archives

Mashup seems to be the latest buzz word and Google Maps seems almost ubiquitous these days. While the challenge of using the Google Maps API may seem daunting, it's actually not nearly as difficult as you'd imagine. Having recently tackled my first one I thought I'd put together a quick step-by-step guide on how to setup the basics for anyone else who may be interested in doing the same.

Step 1 - Obtaining your Google Maps API Key
Point your browser to http://www.google.com/apis/maps/signup.html, fill out the form and get your free API key. You need this in order to make your mashup work online. Embed it into the head tag of you page like so:

Step 2 - Plotting your points
For the purposes of this example I'm picking a few of my favorite restaurants in Washington, DC. While you can easily hard-code these into the Google Maps javascript, I think including them in an external XML file makes it easier to make updates so I've taken that route. My XML looks like this:

Each marker on the map is represented by a node in the XML doc with attributes that will be used for the display of the map. Note that Google Maps uses latitudes and longitudes to plot markers. While there is a built in function to convert address into lat/long values (a process called geocoding), it wouldn't be efficient to call it for these static locations so I've included the geocoded values into the XML. To batch geocode a bunch of address values I recommend http://www.batchgeocode.com/

Step 3 - HTML Setup
In order for your map to show up within your site you'll need a simple div tag which will house the information from Google.

You can give it whatever ID you like and adjust the width and height accordingly.

Next you'll need to initialize the map by adding some javascript to the HTML body tag like so...

Step 4 - Javascript
This is where the actual magic happens. All of the settings for drawing the map and plotting the markers are handled via javascript. The following code will show you how to draw a basic map and plot the markers we defined earlier in our XML document.

That's basically all there is to it...

Google Maps Demo of this code in action

Download the source files

Further reading

Much of what I know was learned with a lot of help from these two sites.

• The official Google Maps API Documentation
• Mike Williams' Google Maps Tutorial

The Google Maps API is incredibly complex and you can do much more more than what I've outlined here. Hopefully this post will serve as a baseline and help you get started building your own mashups.

I just spent the last several days troubleshooting this bug and since I couldn't find any information anywhere on the web for this obscure problem, I'm posting it here.

For a new site I'm building I have randomly loading promo buttons which are created in Flash. Since they're random and will appear on multiple pages, they need to be transparent. Nothing out of the ordinary, but when I put the page together I noticed a very peculiar error...

ONLY in Firefox 1.5 on a PC (2.0 was fine, Mac was fine) and ONLY when the swf had it's wmode property set to transparent, the swf would load but then be inoperable. No rollover animation or button click events would fire. It just sat there doing nothing on the page.

I tried everything to make it work... multiple embed methods, different flash publishing settings, etc. Nothing seemed to help until a colleague steered me, oddly enough, toward the CSS for my page.

My Flash promos where in a floated div tag for the left column of my page. The container element for the page columns contained a few styles, one of which was "overflow: auto;". This was being used to help clear the floats. A simple switch to "overflow: hidden;" magically solved the problem.

I’m still not 100% as to why this problem occurred. I was careful with my widths and paddings to make sure there weren’t any actual overflow problems but for some reason older versions of Firefox were just not happy with it. So there it is… if anyone else ever encounters this very odd random bug, check the CSS overflow property for the solution.