In usability we trust

UX and all things web

Google Maps API 3 – Mobile devices

A lot of the web browsing these days takes place on mobile devices. Therefore it’s important to know how to design web pages and maps for these. When it comes to incorporating Google Maps on a web page, it’s done pretty much the same way as for desktop browsers, at least for advanced devices like the iPhone and Android based phones. There are however some things to consider. In this article I will explain what these things are and how it’s done.

As opposed to previous version of Google Maps API, version 3 is designed specifically with mobile devices in mind. What this means is that the performance on mobile devices is a lot better. Version 3 of the API loads, for example, more than twice as fast on the iPhone as the old version. This makes it especially well suited for mobile browsing. You don’t have to do anything particular to make it work on these devices but there are a few things that you need to consider.

Tip: If you don’t yet know how to use the Google Maps API v3, I suggest that you read the previous articles in this series before plunging into this one.

Maximizing the Viewport

Since the screens of mobile devices are a lot smaller than on desktop platforms the first thing you want to do is to make sure that as much screen estate as possible is used for the map. This is done by setting the width and the height of the map to 100%. Assuming that the element containing the map has the ID="map", here’s what the CSS will look like:

html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 100%;
}

Notice that the height of the <html> and <body> tags are set to 100% with zero margin. The reason for this is to make sure that the web page covers the entire height of the browser and that there’s no white space around the map.

In the left image the default margin prevents the map from covering the entire screen, whereas in the right image the margin is set to zero.

Disabling page zoom

Mobile devices with touch screens often uses the pinch maneuver for zooming the web page. When you have a map on that page, you probably want the map to zoom rather than the entire web page. Fortunately there’s a special <meta> tag that can be used to disable page zooming. It must be placed in the <head> section of the page and looks like this:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

Using this you make sure that the map work as expected. Browsers that doesn’t support this tag will simply ignore it, so it’s safe to use.

No hover state

One final consideration that needs to be made is that there’s no such thing as hover state (mouseover) on mobile devices. Therefore you need to make sure that you don’t use this for essential interactions such as showing vital information.

Live demo

To see that this demo actually works as expected you need to access it from an iPhone or an Android based phone. But it is of course entirely usable by desktop browsers too. What you get is a web page with a maximized map regardless of what device you use to access it.

Check out the live demo.

Conclusion

Developing maps for mobile devices is really not that different from developing them for desktop browsers. As long as you’re aware of their limitations you should be fine. If you want to learn more about developing for the iPhone, check out the Safari Dev Center. To learn more about developing for Android based phones, check out the Android documentation.

Do you know of any other considerations that need to be made when developing maps for mobile devices? Please share in the comments!

My Google Maps book

If you found this article useful you might be interested in my book Beginning Google Maps API 3. It covers everything you need to know to create awesome maps on your web sites. Buy it on Amazon.com

7 Comments

  1. the google maps api 3 is the easiest one to use so far

  2. I’m using this technique and it works really well. Although I’m having trouble with showing an infowindow. It renders fine in portrait mode, but in landscape it re-sizes itself cutting off most of the content. I tried quite a few things with css, but nothing seems to work. Please let me know if you have any possible solution to fix this.

  3. it works fine for android and apple devices, but for symbian (nokia) and Blackberry there are marker issues i haven’t yet been able to figure out .
    i.e. in your example: http://www.svennerberg.com/examples/google_maps_3/info_windows.html
    – nokia: doesn’t render the marker
    – blackberry: renders the marker, but it’s not clickable…
    (not even taking into consideration that there is no “touch/finger-panning” in the maps)

  4. rfgfrwegwertgwertertw

  5. good answer….

  6. Ranjith Kogandu

    March 5, 2012 at 10:36 am

    test :)

  7. If you already have a working v1 map that doesn’t use any undocumented features, then you can just change the version number when you load the API code and it may well work the same. android apps developer

Leave a Reply

Your email address will not be published.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>