Google Maps API for Touch

by Abid Shaik

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<!-- Google Maps API for Touch Brian's approach  -->
<div id="map-canvas"></div>

CSS

html, body {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      
#map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

JavaScript

/**  Google Maps API for Touch 
 * Trick the Maps API into using the Touch UI.
 * Replaces the UserAgent to look more like an android device
 * and less like a desktop computer.
 */


/**
 * Only enable the touch UI if the device supports touch events.
 */
function optionallyEnableTouchUI(){
  // Check if the browser supports touch events
  if('ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch) {
    forceTouchUI();
  }
}

/**
 * Force the API to use a Touch UI which disables mouse input.
 *
 * This method should be called before any map is initialized on the page.
 * 
 * Tested on a Chromebook Pixel, but should work on any device.
 * Note: If you do not have touch input, you will not be able to interact
 * with the UI or map at all.
 *
 * Star https://code.google.com/p/gmaps-api-issues/issues/detail?id=4599.
 */
function forceTouchUI(){
  // Trick the API into thinking we are using an android-like device to get the touch UI
  var newUserAgent = navigator.userAgent.toLowerCase();
  var osBlacklist = ['x11', 'macintosh', 'windows'];
  for(var i = 0; i < osBlacklist.length; ++i){
    newUserAgent = newUserAgent.replace(osBlacklist[i], 'android');
  }

  navigator.__defineGetter__('userAgent', function(){
    return newUserAgent;
  });
}


    function initialize() { 
      var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(35.8174217,-78.7978218)
      };
      optionallyEnableTouchUI();
      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    }
    google.maps.event.addDomListener(window, 'load', initialize());