Orbitz Mobile Traffic Maps: A Static Maps Story

Posted by Joe Monahan, Maps API Developer


It is my pleasure to be asked by Pamela to write another guest blog post; this time to discuss my experiences in using the new Static Maps API to enhance our Orbitz TLC Traveler Update mobile airport traffic page. I am pleased to report that although the API is in its early stages, it provides enough functionality to easily convey valuable geo-based information (e.g. the top 10 severe traffic incidents surrounding an airport) for our mobile users.

So why are static maps so important to mobile? Well, mobile development is kind of the old Wild West of the internet. Different phones use different browsers: some are common browsers like Opera, while others are proprietary ones written by the device manufacturer. This means you cannot count on universal support for Javascript and Ajax, and therefore there is no way to use the Google Maps Javascript API for people on cell phones and PDAs.

Ok, enough of the history lesson, click on the screenshot below to take a look at the Static Maps API in action.




Originally when starting work on this feature, I of course wanted to use things like clickable markers, custom icons, and so on. But the thing to remember about mobile users is that they are on the go and have limited time to look at your map. Therefore it is best to keep the information as simple and bare bones as possible, as to limit the amount of time needed to interpret what they are seeing.

Instead of custom icons, we used colors to contrast traffic markers from the central airport marker. We found the blue icon drew enough attention that it was the central focal, when surrounded by red icons (our traffic incidents). Additionally, the red color was enough to associate markers on our mobile version of severe traffic incidents with those found on our web site that uses a custom red triangle icon. Also by using labeled markers for the traffic incidents, and no label for the airport, we were able to further create a simple interpretation of traffic markers versus the airport maker. Finally, since most users are used to the alphabet markers signifying a list of similar points on things like maps.google.com, it was enough to help us associate the list of traffic incidents on the map with their specific traffic details located below the map.

There were only two big concerns we found when creating this mobile map: icon size and lack of numbered icons. Since most mobile devices are phone-based, screen size (and thus map size) tends to be limited. As you can see in the example above, there are several times where the icons overlap and make the map look cluttered. If a smaller version of the icons were available, it could reduce the number of overlapping markers and make clear the position of the traffic incidents. Another issue with the icons is that the use of alphabet letters as labels has an inherent limitation, in that you can only place 26 different icons on one map. Because our non-mobile version of the traffic page can list over a hundred distinct incidents, we use numbers there to label those icons. If numbered icons were available for static maps, we could display additional traffic incidents on the mobile map.

As always, the Google Maps API team and I welcome comments and questions on this article, the mobile feature mentioned, and the Static Maps API. Please leave feedback in the Maps API forum.


Disclaimer: These views are mine and not the views of OWW or (subsidiary). I am not a spokesperson for OWW or (subsidiary) and neither OWW nor (subsidiary) endorse any material, content and/or links or assume any liability for any of my actions.

Google Maps Without the Scripting

Posted by Tom Manshreck, Maps API Team

If you’re a regular reader of this blog, you probably already use the Google Maps API and love it as much as we do! But you may find it not useful for certain cases: the Google Maps API requires JavaScript, can take a while to load over slow connections, and requires some overhead to maintain a dynamic website.

The Google Static Maps API provides a simpler way to add maps to your website. Rather than use JavaScript, the Google Static Maps API creates map images on the fly via simple requests to the Static Maps service with HTTP requests. No JavaScript, no overhead. Just create a special URL as the src attribute within an tag and let the Static Maps service create your image.

To see how easy the Static Maps API is to use, note the image below:

This image was created using the following simple tag:

(Note that you will need to replace the key parameter above with your own Maps API key. You can obtain a free key at http://code.google.com/apis/maps/signup.html)

When this blog post was displayed in your browser, the URL in the tag was sent to the Static Maps service, which constructed an image based on the parameters passed in that URL. Voila! You can create maps up to 512 x 512 pixels, and at any zoom level or location on the face of the earth that Google Maps supports. You can even place markers on your map images! This Static Maps Wizard lets you play around with some of the options.

The Static Maps API is especially useful for pages in which you want a map to load quickly. You can even replace the generated Static Map with a JavaScript Maps API map after the page loads, allowing a seamless transition from a quick-loading map to a fully dynamic implementation.

Because the map generated by the Static Maps API is an image, you can also send it to your friends as an email attachment (especially handy for planning your next party!) or display it on any cell phone browser, whether or not it supports JavaScript.

Full documentation on constructing maps with the Static Maps API is available at:

http://code.google.com/apis/maps/documentation/staticmaps/index.html

As always, please post questions in the Maps API forum.