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.
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
Pingback: 14?Google???JavaScript??