Google Maps Api - Do not change map center on Zoom

Question

Is it possible to keep the same map center on the zoom in/out events? whether it is with the scroll wheel, double clicking or with the zoom controls it should behave the same.

I've noticed there is a bias towards the mouse pointer position on the map when zooming in/out with the Scroll Wheel, I haven't found any options on the Docs, but overriding that bias would be ideal.

here is a simple fiddle of how i am initializing my map.

var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 15,
    disableDefaultUI: true
  });

There are no API functions to do that. But there isn't any reason you can't implement your desired functionality by turning off the API implementation and doing it yourself. — geocodezip
I was afraid there was no way to do this "out of the box" but i will look into it. Thanks. — randomguy04
Why would you want to? Users who have interacted with google maps API on other sites know that zooming with the scroll wheel will zoom with bias to where their pointer is. Overriding that functionality would serve nothing but to annoy/irritate your users. That being said, you can disable scroll wheel zoom in the mapOptions, then listen yourself for scrollwheel and do something like map.setZoom(map.getZoom()+1) which would cause a zoom without recentering. — Adam
Good question, i'm working on a responsive web app, and there is an input where i display the address of the current center of the map, you can move the map around and using the places library and geocoding i query for the address sending lat and lng, this means i'm using the maps api repeatedly, and could consume my quota faster than anticipated having to pay more. if i could keep the center of the map unmoved it would mean less api calls hence less money invested. — randomguy04
@Adam i've implemented your suggestion, it does what i wanted, thanks! — randomguy04

randomguy04 randomguy04 · Accepted Answer · 2017-08-04T19:36:27

Following @Adam's suggestion on the comments, I disabled the scroll wheel zoom, plus the double click zoom when instantiating the map and added event listeners to handle those events with my own implementation.

Here is a working fiddle and the code explained:

/*
 * declare map as a global variable
 */
var map;
/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function() {
  var myMap = document.getElementById("map_div");
  /*
   * create map
   */
  var map = new google.maps.Map(myMap, {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 15,
    disableDefaultUI: true,
    scrollwheel: false,
    disableDoubleClickZoom: true
  });
    //function that will handle the wheelEvent
  function wheelEvent(event) {
    var e = window.event || e; // old IE support
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); //to know whether it was wheel up or down
    map.setZoom(map.getZoom() + delta);
  }

  function zoomIn() {
    map.setZoom(map.getZoom() + 1);
  }

  //add a normal event listener on the map container
  myMap.addEventListener('mousewheel', wheelEvent, true);
  myMap.addEventListener('DOMMouseScroll', wheelEvent, true);

  //same with the double click
  myMap.addEventListener('dblclick', zoomIn, true);

  //add center changed listener for testing
  google.maps.event.addListener(map, 'center_changed', function() {
    console.log("this is what i'm trying to avoid");
  });
});

Google Maps Api - Do not change map center on Zoom

1 Answers