StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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.</p> <pre><code>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); </code></pre> <p>Instead of just fitting the temporary bounds you could try the map panToBounds method to get a nice smooth transition.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload