Center map on specific marker and fitToBounds on other markers

0
votes

I have a map with few markers which one of them is "Major" and should be in the center of the map. What I want to achieve is

  1. Have the "Major" marker at the center of the map.
  2. Have all other markers visible at optimal zoom level.

Fittobounds will center the map not taking into consideration the "Major" marker. Is there anyway I can achieve both #1 and #2?

2
javascriptgoogle-mapsgoogle-maps-api-3

2 Answers

1
votes
  1. add all the markers to an empty google.maps.LatLngBounds object with .extend
  2. call google.maps.Map.fitBounds on the resulting bounds (will center and zoom the map to show all the markers)
  3. once the bounds has changed (in the bounds_changed event listener), center the map on the "Major" marker
  4. once the bounds has changed a second time (in the bounds_changed event listener), get the updated bounds of the viewport (google.maps.getBounds) (check to see if any of the markers moved off the visible map)
  5. iterate through all your markers, if bounds.contains(markers[i].getPosition()) is false for any marker, decrease the bounds by 1 (zoom out once).
0
votes

Yes, simply declare your new bounds object.

 var bounds = new google.maps.LatLngBounds();

Then for each marker, extend your bounds object:

bounds.extend(myLatLng);
map.fitBounds(bounds);

API: google.maps.LatLngBounds