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.