Google Maps: Mobile Device Detection
If you have the same code base for different devices - say a desktop browser and a mobile phone - you will want to write some JavaScript to detect what platform.
Here is some code
-
Set the <div> containing your map to have width and height attributes of 100%. Be aware that some older desktop browsers don't display well with these values, however.
-
You can detect iPhone and Android devices by inspecting the navigator.userAgent property within the DOM:
function detectBrowser() { var useragent = navigator.userAgent; var mapdiv = document.getElementById("map_canvas"); if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) { mapdiv.style.width = '100%'; mapdiv.style.height = '100%'; } else { mapdiv.style.width = '600px'; mapdiv.style.height = '800px'; } }
This allows you to alter layout for particular devices, as we've done here to change the screen real estate for each device.
-
The iPhone device respects the following <meta> tag:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
This setting specifies that this map should be displayed full-screen and should not be resizable by the user. Android devices running software version 1.5 (Cupcake) also support these parameters. Note that the iPhone's Safari browser requires this <meta> tag be included within the page's <head> element.
For more information on development for the iPhone, consult Apple's Developer documentation. For more information on development of Android devices, consult the Android documentation.
|