CODEWITHSUNDEEP
javascriptgoogle-maps
tolga
tolga

Reputation: 2800

Zoom with double click with disableDefaultUI: true

In my application, all default functionality is disabled with:

disableDefaultUI: true

and click is bind to placeMarker function.

mapObj.addListener('click',
    (event) => {
        this.placeMarker(event.latLng) // creates a marker, works fine.
    }
)

What I try to achieve is, I want to zoom map when I dblclick (as in default functionality) but I don't want click listener to fire when I double-click. 

mapObj.addListener('dblclick',
    (event) => {
        console.log("This doesn't fire when I double click")
        // I expect only this to fire.
    }
)

This doesn't fire when I double click but click listener functionality works instead.

Upvotes: 0

Views: 895

Answers (1)

MrUpsidown
MrUpsidown

Reputation: 22490

disableDefaultUI as its name says, disables the default UI, not the default gesture behavior so there is no reason that this disables the double click zoom (proof is the below snippet). You should check that you haven't used disableDoubleClickZoom or set gestureHandling to none but we can't tell because you haven't shared that part of your code.

Regarding the click listener firing along with the double click, the best way is to set a timeout in the single click listener and clear it in the double click listener. You need to decide on the timeout length (here it is set to 200ms).

function initialize() {

  var myLatLng = new google.maps.LatLng(46.2, 6.17);
  var mapOptions = {
    zoom: 4,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  var update_timeout = null;

  google.maps.event.addListener(map, 'click', function() {

    update_timeout = setTimeout(function() {
      console.log('click');
    }, 200);

  });

  google.maps.event.addListener(map, 'dblclick', function() {
    clearTimeout(update_timeout);
    console.log('double click')
  });
}
#map-canvas {
  height: 180px;
}
<div id="map-canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize">
</script>

Upvotes: 1

Related Questions