Add Traffic to Your Mashup (Button + Legend, too)!

Friday, June 15, 2007 at 11:31:00 AM

When traffic was released in Google Maps to the celebration of cranky drivers everywhere, API developers immediately asked if they could include this useful overlay in their maps as well. Well, we heard the call and quietly released GTrafficOverlay in the API v2.81 (along with driving directions). The following line of code will add the traffic overlay to your map, which will show colored lines on major roads indicating traffic speeds wherever data is available:

map.addOverlay(new GTrafficOverlay());

Now that you've happily got Traffic on your map, you may be wondering how to add the Traffic button to your GMapTypeControl. The traffic button option isn't available through the API, but is now available through the open source Google Maps API Utility Library in ExtMapTypeControl. In this GControl extension, you have the option (through options sent in the constructor) to mimic GMapTypeControl exactly, add a Traffic button to it, or add a Traffic button that includes a drop-down legend. The drop-down legend may help your users understand what the colored traffic lines indicate, as found in the Google Maps help.

Here's an example of ExtMapTypeControl with the traffic button and legend:

You can also use ExtMapTypeControl as a basis for creating a GMapTypeControl customized to your website's look&feel. Just download it to your server, tweak the styles used for the buttons, and presto - a GMapTypeControl all your own.

Enjoy, and please let us know in the forums if you run into any issues with GTrafficOverlay or ExtMapTypeControl.