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.
Panning and Zooming with Google Maps To move the map click and hold the left mouse button and drag the map to a new place. You can also move the map North, South, East or West using the pan arrows. These can be found on the top left hand corner of the map.
You can add a simple marker to the map at a desired location by instantiating the marker class and specifying the position to be marked using latlng, as shown below.
initialize() function creates a google Map with location Marker. transition() & moveMarker() are used to move location marker smoothly on Google Map.
use dragend instead of drag. the code will be,
google.maps.event.addListener(marker, "dragend", function(event) {
var point = marker.getPosition();
map.panTo(point);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With