Get the center coordinates after you drag and pan

Question

I would like to track the coordinates of the center of my map. So far I have used this:

// On Drag End google.maps.event.addListener(map, 'dragend', function() { $('.map_center_coords .latitude').html( map.getCenter().lat() ); $('.map_center_coords .longitude').html( map.getCenter().lng() ); }); 

which works by getting coordinates at the end of a drag event.

The problem is that now I am using map.panTo to move to a specific location.

Is there an event basically "whenever the center has *finished* moving in any way" ?

As geocodezip mentioned, I forgot about the center_changed event. But this event is continuously fired when the card is dragged / tinted.

Ideally, I'm looking for an event that fires only once, after any drag / pan.

Answer 1

Instead, watch for an unoccupied event (this event fires when the map becomes inactive after panning or zooming):

  google.maps.event.addListener(map,'idle',function(){ if(!this.get('dragging') && this.get('oldCenter') && this.get('oldCenter')!==this.getCenter()) { //do what you want to } if(!this.get('dragging')){ this.set('oldCenter',this.getCenter()) } }); google.maps.event.addListener(map,'dragstart',function(){ this.set('dragging',true); }); google.maps.event.addListener(map,'dragend',function(){ this.set('dragging',false); google.maps.event.trigger(this,'idle',{}); }); 

Answer 2

Google.maps.Map center_changed event.

 center_changed | None | This event is fired when the map center property changes. 

 // On center changed google.maps.event.addListener(map, 'center_changed', function() { $('.map_center_coords .latitude').html( map.getCenter().lat() ); $('.map_center_coords .longitude').html( map.getCenter().lng() ); }); 

Answer 3

Try using the idle event. Link to documents .

This event is fired when the map becomes inactive after panning or zooming.

If you want an unoccupied event to fire only after drag and drop , try the picture below.

This code prints the coordinates for the console after the dragend and idle events dragend .

 mapObj.addListener('dragend', function () { var idleListener = mapObj.addListener('idle', function () { google.maps.event.removeListener(idleListener); console.log(mapObj.getCenter().lat()); console.log(mapObj.getCenter().lng()); }); });