Disable double left click on google map

Question

May I know how can I disable double click on google map so that the info window will not close when I double click on google map? Can it be done through google map api?

Answer 1

(Please consider that this is not answer, it is only same solution like Ravindranath Akila has been answering already, for using in wider ranges of solutions [eg. Mobile platforms] concentrated on one reusable method without global variables)

We have similar trouble by Win 8.1 Mobile app. Thanks to Ravindranath Akila we finalized solution which is defined in one method and checking also zooming and moving with center of map. Anyway sometimes happened that the address we get from map-click is wrong - improvements are welcomed.

    // code
    { 
        // adding event method
        addGoogleClickEnventHandler(map, function(e) {
            // example code inside click event
            var clickLocation = e.latLng;
            getAddress(clickLocation);
        });
    }

    // function
    function addGoogleClickEnventHandler(googleEventableObject, handlingFunction) {

    var boundsChanged = false;
    var centerChanged = false;
    var singleClick = false;

    function runIfNotDblClick(obj) {
        if(singleClick && !boundsChanged && !centerChanged){
            handlingFunction(obj);
        }
    };

    googleEventableObject.addListener('bounds_changed', function () { boundsChanged = true; });
    googleEventableObject.addListener('center_changed', function () { centerChanged = true; });
    googleEventableObject.addListener('dblclick', function () { singleClick = false; });

    googleEventableObject.addListener('click', function(obj) {
       singleClick = true;
       setTimeout(function() {
                runIfNotDblClick(obj);
            }, 200);            
        boundsChanged = false;
        centerChanged = false;
    });
    }

Answer 2

You can disable double-click zoom on Google Maps by setting the following google.maps.MapOptions object property:

disableDoubleClickZoom: true

Sample code:

var mapOptions = {
    scrollwheel: false,
    disableDoubleClickZoom: true, // <---
    panControl: false,
    streetViewControl: false,
    center: defaultMapCenter
};

Answer 3

It cannot be done, you would essentially have to block or prevent the event from happening.

You could try something like createInterceptor() like in EXT JS. This would fire before the event is fired, and you can return false to prevent the actual event to fire, but I am not sure it will prevent the code from executing before the event is fired within that code.

Answer 4

You need an external var to do that :

 var isDblClick;
  google.maps.event.addListener(map, 'dblclick', function (event) {
      isDblClick = true;
      myDlbClickBelovedFunction();
  });

  google.maps.event.addListener(map, 'click', function (event) {
      setTimeout("mySingleClickBelovedFunction();;", 200);
  });

function mySingleClickBelovedFunction() {
      if (!isDblClick) {
// DO MY SINGLE CLICK BUSINESS :)             
          }
 // DO NOTHING

  }

Answer 5

You can take advantage of, dblclick fires if it is a double click, and single click fires in such occations only once.

runIfNotDblClick = function(fun){
    if(singleClick){
        whateverurfunctionis();
    }
};

clearSingleClick = function(fun){
    singleClick = false;
};

singleClick = false;

google.maps.event.addListener(map, 'click', function(event) {// duh! :-( google map zoom on double click!
    singleClick = true;
    setTimeout("runIfNotDblClick()", 500);
});

google.maps.event.addListener(map, 'dblclick', function(event) {// duh! :-( google map zoom on double click!
     clearSingleClick();
});

See http://www.ilikeplaces.com

Answer 6

Here's an example that gives a live preview of the coordinates.

When you click once, it saves the cordinates and when you double click it puts a marker.

Remember to sign up and create a key and paste it in where it says YOUR-API-KEY in the src script
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap

<html>
<head>
    <title>Google Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>          
      #map { 
        height: 300px;    
        width: 600px;            
      }          
    </style>        
</head>    
<body>
    <div id="latclicked"></div>
    <div id="longclicked"></div>

    <div id="latmoved"></div>
    <div id="longmoved"></div>

    <div style="padding:10px">
        <div id="map"></div>
    </div>

    <script type="text/javascript">
    let map;

    function initMap() {                            
        let latitude = 27.7172453; // YOUR LATITUDE VALUE
        let longitude = 85.3239605; // YOUR LONGITUDE VALUE

        let myLatLng = {lat: latitude, lng: longitude};

        map = new google.maps.Map(document.getElementById('map'), {
          center: myLatLng,
          zoom: 14,
          disableDoubleClickZoom: true, // disable the default map zoom on double click
        });

        // Update lat/long value of div when anywhere in the map is clicked    
        google.maps.event.addListener(map,'click',function(event) {                
            document.getElementById('latclicked').innerHTML = event.latLng.lat();
            document.getElementById('longclicked').innerHTML =  event.latLng.lng();
        });

        // Update lat/long value of div when you move the mouse over the map
        google.maps.event.addListener(map,'mousemove',function(event) {
            document.getElementById('latmoved').innerHTML = event.latLng.lat();
            document.getElementById('longmoved').innerHTML = event.latLng.lng();
        });

        let marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          //title: 'Hello World'

          // setting latitude & longitude as title of the marker
          // title is shown when you hover over the marker
          title: latitude + ', ' + longitude 
        });    

        // Update lat/long value of div when the marker is clicked
        marker.addListener('click', function(event) {              
          document.getElementById('latclicked').innerHTML = event.latLng.lat();
          document.getElementById('longclicked').innerHTML =  event.latLng.lng();
        });

        // Create new marker on double click event on the map
        google.maps.event.addListener(map,'dblclick',function(event) {
            let marker = new google.maps.Marker({
              position: event.latLng, 
              map: map, 
              title: event.latLng.lat()+', '+event.latLng.lng()
            });

            // Update lat/long value of div when the marker is clicked
            marker.addListener('click', function() {
              document.getElementById('latclicked').innerHTML = event.latLng.lat();
              document.getElementById('longclicked').innerHTML =  event.latLng.lng();
            });            
        });

        // Create new marker on single click event on the map
        /*google.maps.event.addListener(map,'click',function(event) {
            let marker = new google.maps.Marker({
              position: event.latLng, 
              map: map, 
              title: event.latLng.lat()+', '+event.latLng.lng()
            });                
        });*/
    }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap"
    async defer></script>
</body>