Enable scrollwheel zooming on a map upon click using Google Maps API

Question

I am using the Google Maps API, and wanted to be able to scroll past the map on a mobile device and not have the map zoom when scrolling down a webpage using the scrollwheel.

Here's my code:

var mapOptions = {
  center: new google.maps.LatLng(51.605139, -2.918567),
  zoom: 15,
  scrollwheel: false,
  draggable: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

This is fine but what I would like to achieve is to enable scrollwheel zooming only when the map was clicked.

(So on a webpage, when I click the map, I can zoom on it, or a mobile device, when I tap the screen on, then I can pinch and zoom/drag the map around.)

Can I add an event listener to activate draggable only upon double click or single click?
Is it possible using the API?

---

EDIT

I have tried the following code, but it doesn't seem to work:

google.maps.event.addListener(map, 'click', function (event) {
  var mapOptions = {
    draggable: true,

  };
});

Answer 1

This should work:

        google.maps.event.addListener(map, 'click', function(event){
          this.setOptions({scrollwheel:true});
        });

Answer 2

google.maps.event.addListener(map, 'mouseout', function(event){
 this.setOptions({scrollwheel:false});  
});

this is a handy little consideration in addition to Dr.Molle's answer.

just as it appears, this will re-disable scrollwheel zooming when the mouse leaves the map.

Answer 3

This is what I generally do:

User interacts with the map (mousedown) -> set zoomable
Mouse rests on the map for over 1 second -> set zoomable
Mouse goes out of the map -> set not zoomable

This usually gets the work done. When the user is in the mindset of scrolling the page, the map follows. When the user wants to zoom in/out they need to interact with it or have the pointer there for a short while.

The source code:

  google.maps.event.addListener(map, 'mousedown', function(event){
    this.setOptions({scrollwheel:true});
  });
  google.maps.event.addListener(map, 'mouseover', function(event){
    self = this;
    timer = setTimeout(function() {
      self.setOptions({scrollwheel:true});
    }, 1000);
  });
  google.maps.event.addListener(map, 'mouseout', function(event){
    this.setOptions({scrollwheel:false});
    clearTimeout(timer);
  });

Answer 4

I found a solution and gathered complete code for disabling scroll on load and enable scroll zoom on click.

Disable scroll on load: scrollwheel: false, Listen to click event on map and enable scrollwheel: true,

map.addListener('click', function() {
    map.set('scrollwheel', true);
});

Please find the code in my blog: http://anasthecoder.blogspot.ae/

Answer 5

According to official google documentation, to make it work perfectly fine for mobile and website use this:

var map = new google.maps.Map(document.getElementById(mapid), {
        gestureHandling: 'greedy',
});

Answer 6

This is my example and it works for me. When page loads, google map (wheel scroll) is off, when you click on map (wheel scroll) turned on.

var map = new google.maps.Map(document.getElementById('map-id'), {
            scrollwheel: false,
        });
        google.maps.event.addListener(map, 'mouseout', function(){
            this.setOptions({scrollwheel:false});
        });
        map.addListener('click', function() {
            map.set('scrollwheel', true);
        });

Answer 7

this will set map, on click of map if the scrollwheel value is false it will make it true, & if true will make false.

function initMap() {

      var florida = {
        lat: 27.5814346,
        lng: -81.0534459
      };

      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 6,
        center: florida,
        scrollwheel: false
      });


      google.maps.event.addListener(map, 'click', function(event) {
        if (this.scrollwheel == false) {
          this.setOptions({
            scrollwheel: true
          });
        } else {
          this.setOptions({
            scrollwheel: false
          });
        }
      });

    }