CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Jeremy Belolo
Jeremy Belolo

Reputation: 4539

Google maps - keep center when zooming

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 matter where you double tap (or double click) or where you pinch, the map remains centered on your marker. So it's possible...

The best I came up with for now is :

google.maps.event.addListener(mymap, 'zoom_changed', function() {
    mymap.setCenter({lat: myLoc.lat, lng: myLoc.lon});
})

But it's far from perfect, it just re-center the map after the user already zoomed...

Thanks a lot !

[EDIT] absolutely nothing helps in the API ref... Or elsewhere I'm blind and missed it !

Upvotes: 15

Views: 6682

Answers (4)

HoangHieu
HoangHieu

Reputation: 2840

Purely using Javascript

  • First you disable scroll zoom function by default of google map by scrollwheel=false,
  • Next create custom scroll zoom function by capture mouse event and set zoom level for google map

Check my sample code: Fiddle URL: https://jsfiddle.net/vh3gqop0/17/

var map, i = 12;
function initialize() {
		var myLatlng = new google.maps.LatLng(46.769603, 23.589957);
		var mapOptions = {
			center: myLatlng,
			zoom: i,
			scrollwheel: false,
  		disableDoubleClickZoom: true,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		map = new google.maps.Map(document.getElementById("map_canvas"),
			mapOptions);

		var marker = new google.maps.Marker({
			position: myLatlng,
			map: map,
			title: 'Any Title'
		});


	}

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

$( document ).ready(function() {
    $('#map_canvas').on("wheel", function(evt){
   // console.log(evt.originalEvent.deltaY);
    		if(evt.originalEvent.deltaY > 0){
        	map.setZoom(++i);
        }else {
        	map.setZoom(--i);
        }
    		
    });
});
#map_canvas{
    height:400px;
    width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>

Upvotes: 4

Stubbies
Stubbies

Reputation: 3114

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;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9d3jaUX6Qdr0Uzvq6fQXVmZ1PBuHEVAQ"></script>

Upvotes: 2

Kaique Garcia
Kaique Garcia

Reputation: 528

You should try the center_changed event with panTo function.

google.maps.event.addListener(mymap, 'center_changed', function() {
    mymap.panTo({lat: myLoc.lat, lng: myLoc.lon});
})

You can see an example about it here and documentation about panTo function here. Becareful, it should mess up all the draggable thing.

Upvotes: 0

Odaym
Odaym

Reputation: 1858

I have no idea why you tagged this question as both Javascript and Android. On Android you need to wrap your MapView inside another view and detect Double Tap motion inside onInterceptTouchEvent which you can override if your class can override FrameLayout for example. Then return true to prevent the map from handling this event and you handle it instead.

For full code please see my answer here: https://stackoverflow.com/a/30118649/764897

Upvotes: 2

Related Questions