Google maps JS API zoom in/out mouse scroll wheel without panning map

Question

When you zoom in/out with mouse scroll wheel it pans the map in wired way that i don't like, is there option to disable panning this with google maps API?

I want map to zoom in/out with scroll wheel like when i press zoom in and out buttons on map interface (on center of map).

http://jsfiddle.net/4ozyvknr/

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

Answer 1

I wanted to prevent panning of map when zooming with mouse wheel.

Here's how i done it, note when you zoom in/out with mouse wheel map stay's centered at same coordinates regardless of cursor position.

Working fiddle

function initMap() {
    var map_div = document.getElementById('map');

    map = new google.maps.Map(map_div, {
        center: {lat: 34.049388, lng: -118.259901},
        zoom: 10,
        scrollwheel: 0
    });
    
    map_div.addEventListener('wheel', function(event) {

        if (event.deltaY && event.deltaY < 0) {
            //scroll up = zoom in;
            map.setZoom(map.getZoom() + 1);
        } else {
            //scroll down zoom out;
            map.setZoom(map.getZoom() - 1);
        }

        //disable scrolling of window
        event.preventDefault();

    });
    
}

<div id="map" style="width:100%; height:200px;"></div>
<div style="height:300px;"></div>
<h1>End of Page</h1>

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>

Answer 2

If you want to disable zoom with scollwheel just add scrollwheel: false

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8,
    scrollwheel: false
  });
} 

EDIT: If you want to change the way it zooms with the scroll wheel, then have a look at this thread