Disable inertia and drag momentum on Google Maps V3

Question

Is there a way to disable drag inertia on Google Maps V3? It looks like it should be MapOption, but I can't find a way to do this.

Answer 1

This is currently not possible with the Maps API V3. Consider submitting a feature request here:

http://code.google.com/p/gmaps-api-issues/

Answer 2

Use the undocumented disablePanMomentum option for example:

 new google.maps.Map(document.getElementById(id), { disablePanMomentum: true, backgroundColor: 'none', disableDefaultUI: true, center: { lat: 40.674, lng: -73.945 }, zoom: 2, ... 

Answer 3

Today I ran into the same problem, with some custom Div floating above the map that needs to be moved to the Movement map. My reposition worked fine until the user stopped completely after dragging before letting the mouse move (so there would be no momentum), but if you just dragged and dropped quickly, the div will end a bit.

To fix this, I connected to the drag event and the idle event:

 var map = /* All the map config */ var stickyCenter = map.getCenter(); /* ... Code ... */ google.maps.event.addListener(map, 'drag', function(){ stickyCenter = map.getCenter(); }); google.maps.event.addListener(map, 'idle', function() { map.setCenter(stickyCenter); }); 

What happens is that after you drag the card and the card stops (after the impulse is completed), the card “snaps” into place.

If the click is too sudden, it is possible that something will change or animate the movement. Hope this helps, this is not ideal, but it is a way to reverse the momentum from the drag event.

Answer 4

I am sure that impulse can at least be counteracted. Someone please correct me if I am wrong! For simplicity, for example, suppose your map container has a width of 100vw and a height of 100vh . Do you just call getCenter() on the function called by the mouseup event, and then use these coordinates immediately with setCenter() ?

 function initMap(){ ... var win = window; google.maps.event.addDomListener(win, 'mouseup', setCoords); function setCoords(){ var x = myMap.getCenter(); var lat = x.lat(); var lng = x.lng(); myMap.addListener('center_changed', function(lat, lng){ myMap.setCenter(new google.maps.LatLng(lat, lng)); }; }; 

Actually, this code works, but the kicker consists in the fact that it works only once, until the browser seems to be overloaded, and throws an Uncaught RangeError error : maximum call stack size .

Not sure what to do now.

Read more about it here .