In Google Maps V3, how can I get a draggable marker to pan the map?

Question

I have found several V2 examples of how to pan the map while a marker is being dragged. For example: http://www.putyourlightson.net/projects/coordinates

    // create map and add controls
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());        
map.addControl(new GMapTypeControl());

// set centre point of map
var centrePoint = new GLatLng('53.34870686020199', '-6.267356872558594');
map.setCenter(centrePoint, 14); 

// add a draggable marker
var marker = new GMarker(centrePoint, {draggable: true});
map.addOverlay(marker);

// add a drag listener to the map
GEvent.addListener(marker, "dragend", function() {
    var point = marker.getPoint();
    map.panTo(point);
    document.getElementById("latitude").value = point.lat();
    document.getElementById("longitude").value = point.lng();
});

This page seems to "auto-pan" while the marker is being dragged; note that its only event listener is for "dragend". But I assure you that that map pans while the marker is being dragged.

I am trying to achieve the same thing with the V3 API, without any success. I even tried calling map.panTo() while the icon is being dragged, with unsatisfying results: http://www.publicgloucester.com/test.html

function initialize ()
   {
   Gloucester = new google.maps.LatLng (42.6159285, -70.6619888);

   myOptions = 
      {
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: Gloucester,
      streetViewControl: false
      }

   map = new google.maps.Map (document.getElementById ("map_canvas"), myOptions);

   marker = new google.maps.Marker ({position: Gloucester, title: "Gloucester, MA"});
   marker.setMap (map);
   marker.setDraggable (true);

   google.maps.event.addListener (marker, 'drag', function (event) 
      {
      // Pan to this position (doesn't work!)
      map.panTo (marker.getPosition());
      });

   }

It makes sense to me that this wouldn't work, since panning to place the marker in the center of the map, while the map is moving, is bogus.

Is it as simple as the V2 API doing this automatically, while the V3 API does not? How can I achieve this effect with the V3 API?

Thanks.

Answer 1

use dragend instead of drag. the code will be,

google.maps.event.addListener(marker, "dragend", function(event) {

   var point = marker.getPosition();
   map.panTo(point);

    });

Answer 2

The event you want to listen is the one used in your example "drag", what you can do to make it look less "bogus" is add a delay, so the maps follows the marker instead of being immediately updated. Try this:

google.maps.event.addListener(marker, "drag", function(event) {
  var point = marker.getPosition();
  window.setTimeout(function(){
    map.panTo(point);
  }, 100);
});

Answer 3

Hi xmarcos - have you tried to implement this to get the bouncy action back? http://groups.google.com/group/nycjs/browse_thread/thread/259a325fa980e575