Tuesday, July 1, 2008

5 Ways to Use Static Maps, Plus New Features!

First, let's go over a few new features for static maps:

  • We support larger maps, up to 640X640 pixels.
  • We use a more compact Google logo for maps less than 100 pixels wide.
  • We support the ability to specify a map viewport by sending in a span and center (instead of zoom and center).

More info in the documentation.

Now, for the good stuff. I've just spent the last 3 hours surfing the web, looking for example sites using our Static Maps API, and I'll admit that I had no idea developers were using static maps in so many different ways. Below, I've summarized the various techniques and linked to example sites for each. I urge you to 1) visit each of them, and 2) decide your favorite technique and implement it on your own site.

  1. Include a static map on the page, go to a large interactive map when clicked. This is a good technique for those of you who'd like to cater to map-centric users versus text-centric users.

    Example sites: Booking.com (pictured above), TripAdvisor, OpenRice, Qype, HotelTravel, and ADN


  2. Include a static map on the page, and replace that with an interactive map after some user interaction. This is a good technique if you'd like interactive maps on every page, but are worried about them making the page load too slowly for users on a slow connection.

    Example sites: Yelp, GumTree, and Geocaching (pictured above - For a good laugh, check out the difference between their map when you're logged in versus when you're not)


  3. Include a static map on the page that's centered on the geographical region that a page is about. This is a good technique if you just want a quick reference map for the user, and if you don't have multiple points to display.

    Example sites: Wedding Mapper Venues (pictured above), Adriagate, citybeat, and Opt.be (this one links to a maps.google.com URL for the displayed location, which is a good variation on this technique and should be minimal extra work for the developer.)


  4. Use static maps inside a gadget. This is a great technique for all gadgets, since often times users will have multiple gadgets on the same page (on iGoogle or their own sites). Each gadget should ideally take as little time as possible to load, so that the parent page loads quickly.
    Example Sites: Geo IP Locator Gadget (pictured above), and Google Map Search Gadget


  5. Use static maps for mobile implementations of map sites. This is a no-brainer, as Javascript isn't supported across most/all mobile browsers (and loading all the interactive map resources can be a bit much over a mobile connection).
    Example Sites: Mobile YellowBot, Mobile Lonely Planet (pictured above), OrbitzTLC Traveler Update, and Non-JS Local Search (this demo is running on Google App Engine, using code written by a Googler and open sourced here).