0

I have a working version of map with a draggable marker. Zoom-in to include all markers works

bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);

where results[0].geometry.location is new draggable location.

This works if the new location is forming a bigger area. But when I drag the marker to a closer location to the rest of the markers, I don't think this extends the bounds and therefore, no zoom-in.

Any idea?

kyc
  • 85
  • 1
  • 12
  • Extending the bounds with a marker that is already contained in the bounds won't change the bounds. It should zoom to show all the markers. If you want it to zoom in on the newly added marker, you need to do something else. If that is not the problem, you need to include more context to your question. – geocodezip Dec 28 '12 at 19:16

1 Answers1

0

When you drop the marker, add the marker position to a temporary LatLngBounds object that includes the original bounds and fit the maps bounds to that on each drag drop.

var mapOptions = {
  center: new google.maps.LatLng(38.68551, -96.341308),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);

var bounds = new google.maps.LatLngBounds(),
    markers = [];

markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.69, -96.14),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.65, -96.44),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.56, -96.56),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.42, -96.98),map: map}));
markers.push(new google.maps.Marker({position: new google.maps.LatLng(38.31, -96.45),map: map}));

for (var m in markers) {
    bounds.extend(markers[m].getPosition());
}

map.fitBounds(bounds);

var dropMarker = function(latlng) {
    var marker = new google.maps.Marker({position: latlng, map: map}),
        tempBounds = new google.maps.LatLngBounds();

     // notice we use the union method here to add the original bounds object
    tempBounds.union(bounds).extend(marker.getPosition());
    map.fitBounds(tempBounds);
}

// imitate dropping marker far away from others
setTimeout(function() {
    dropMarker(new google.maps.LatLng(31, -96));
}, 2000);

// imitate dropping marker close to others
setTimeout(function() {
    dropMarker(new google.maps.LatLng(38.5, -96.5));
}, 5000);

Instead of just fitting the temporary bounds you could try the map panToBounds method to get a nice smooth transition.

Seain Malkin
  • 2,273
  • 19
  • 20
  • This is basically re-do the bound every drag end event. I will imagine that there is a smarter way to tackle this. – kyc Dec 31 '12 at 20:54
  • You aren't re-calculating the bounds on each drop. You calculate the initial bounds once, and just add the marker position to the initial bounds on each marker drop. That would work for both zooming out and in. – Seain Malkin Jan 01 '13 at 05:58