CS2020: Web Science, Sytems and Design

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.