Scroll on a div

Question

I work on the customization of a google map for a website. I managed to get what I wanted with the API and the site of customization.

Currently, it is possible to scroll over my map to get closer or highter. I wonder if we could do the same on my div placed over my map (which contains a form) ?

My map (the form is on the right): *remove*

Ps: I've pixelate the map for security reasons.

Thank you in advance,

Answer 1

Sure thing. The maps api exposes the methods getZoom and setZoom for that kind of thing. All you need to do is set up the event handler for the mousewheel event in your container.

It's going to look something like this:

$('#container').on('mousewheel', function (e) {
  var currentZoom = map.getZoom();
  if (e.originalEvent.wheelDelta > 0) {
    map.setZoom(currentZoom + 1);
  }
  else {
    map.setZoom(currentZoom - 1);
  }
});

Here is a working jsFiddle so you can see it in action.

Also, if you're trying to zoom in to a particular point, you can use setCenter before you do the zoom. The point you select as your center will be the point that the map zooms in towards.