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.

 

© Lynne Grewe