Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 !

like image 949
Jeremy Belolo Avatar asked Nov 23 '14 22:11

Jeremy Belolo


People also ask

How do I make Google Maps stay centered?

In the bottom right of the map, you should see a button that looks like a target. Tap that, and it centers the map over you and tracks your movements.

How do I fix zoom on Google Maps?

You can change the zoom level of the map using simple steps. Step 1 Go to Add or Edit Map page . Step 2 Select 'Default zoom level' in the 'Map Information section'. Step 3 click save map and see the changes.

Why do some places disappear when you zoom out on Google Earth?

If you have very dense data, sometimes you may notice that some of the features "disappear" from your map at high zoom levels - that is, at country or continent scale. What is happening at these high zoom levels is our feature shedding algorithm.

How do I zoom in on Google Maps without Street View?

The shortcut is simple: just double-tap the maps interface, but instead of lifting your finger after the second tap (the shortcut for zooming in), you leave it touching the screen. Then a swipe up zooms out, and a swipe down zooms in.


2 Answers

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>
like image 116
HoangHieu Avatar answered Oct 26 '22 19:10

HoangHieu


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

like image 24
Odaym Avatar answered Oct 26 '22 19:10

Odaym