Google Maps API for Touch Setting Navigation.msMaxTouchPoints

by ofirattia

HTML

<script src=" https://maps.googleapis.com/maps/api/js?v=3.exp&amp;key=AIzaSyBVmmpqywb-hytfgXoJwCQxFXa9XfooPgk"></script>
<!-- Google Maps API for Touch Setting Navigation.msMaxTouchPoints property   -->
<div id="box">
 
</div>
<br/>
<div id="map-canvas"></div>

CSS

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px
}

#a {
  height: 10%;
  margin: 0px;
  padding: 0px
}

#map-canvas {
  height: 90%;
  margin: 0px;
  padding: 0px
}

#id { 
 width:300px;
 height:300px;
 background-color: 'red';
 z-index:999;
 
}

JavaScript

function EnableTouchUI() {
   // Check if the browser supports touch events
   if ('ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch) {
     navigator = navigator || {};
     navigator.msMaxTouchPoints = navigator.msMaxTouchPoints || 2;
   }
 }
 var map;
 var zoom = false;

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

 $(document).ready(function() {
   EnableTouchUI();
   var text = 'text goes here';

 });

 google.maps.event.addListener(map, 'dragstart', function() {
   console.log('dragstart');
   
   //navigator.msMaxTouchPoints = 0;
 });
 
 google.maps.event.addListener(map, 'drag', function() {
  console.log(map.getZoom());//'drag');
 });
 
 google.maps.event.addListener(map, 'click', function(data) {
 console.log("Latitude: ",data.latLng.lat());
  console.log("Longitude: ",data.latLng.lng());

  console.log("click");//'drag');
  var xy = {lat: data.latLng.lat(), lng: data.latLng.lng()};
  var marker = new google.maps.Marker({
    position: xy,
    map: map,
    title: 'Your location'
  });
 });

 google.maps.event.addListener(map, 'zoom_changed', function() {
   console.log('zoom');
 });

 google.maps.event.addListener(map, 'idle', function() {
   console.log('dragend');
   navigator.msMaxTouchPoints = navigator.maxTouchPoints;
 });