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

dom-events, google-maps, javascript

Solution

This should work:

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

Problem

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, }; }); ```

Original source