Get center coords after drag & pan finished

Question

I would like to keep track of the coordinates of the center of my map. So far I\'ve been using this:

// On Drag End
google.maps.event.addListener(map, \'drag         


        

Answer 1

Try using idle event. Link to docs.

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

If you want idle event to fire only after dragend then try the snippet below.

This code prints coordinates to console after both dragend and idle events fire.

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());
    });
});

Answer 2

Observe the idle-event instead(This event is fired when the map becomes idle 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 3

The 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() );
});