Google maps - keep center when zooming

Question

In Google Maps, I would like to be able to keep the center of the map on a marker on my location when I\'m zooming in or out. It\'s something that Ingress does, it doesn\'t matt

Answer 1

Unfortunately Google Maps Api does not provide this behaviour.

The following example doesn't require jQuery and supports double-click and mouse scrolling, but you can add more events if you want.

View in Codepen

Disable:

• Double-clickin
• Scrolling
• Panning

Add dblclick and zoom_changed events on the map and a mousewheel event on the canvas.

I have commented the code, hopefully this works for your case. Keep in mind that you need to normalize mousewheel speed for all browsers and devices. Hammer.js is a good library for that.

var map, zoom;

function initialize() {

  // The white house!
  var myLatLng = new google.maps.LatLng(38.8977, -77.0365);

  // Default zoom level
  zoom = 17;

  // Keep a reference for evens
  var $map = document.getElementById("map");

  // Disable scrolling + double-click + dragging
  map = new google.maps.Map($map, {
    zoom: zoom,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    //draggable: false
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map
  });


  // EVENTS

  // Double Click: event zoom by 1
  map.addListener('dblclick', function(e) {
    zoomHandler(e.latLng, 1);
  });

  // Zoom changed: update current zoom level
  map.addListener('zoom_changed', function(e) {
    // Using a timeout because `getZoom()` does not return a promise.
    setTimeout(function() {
      zoom = map.getZoom();
    }, 50);

  });

  // Dom event: On mousewheel
  $map.addEventListener('mousewheel', wheelEvent, true);
}

// Mouse Scrolling event
function wheelEvent(event) {
  if (event.deltaY > 1)
    zoomHandler(event, -1);
  else
    zoomHandler(event, 1);
}

// Zoom in/out
function zoomHandler(event, zoomin) {
  zoom += zoomin;
  map.setZoom(zoom);
}

google.maps.event.addDomListener(window, 'load', initialize);

#map {
  width: 100%;
  height: 240px;
}