3

I've been looking around for a solution to this problem, but i can't seem to find somthing that solves this. The closest i get is this thread. But this doesn't work.

What i'm trying to do is to run fitbounds based on a set of markers which works fine. But i would also like to center the map based on the users location (the bouncing marker in the plunk) and still keep all markers within the map view. If i try to setCenter after fitBounds, some markers are outside of the map view. Is there some nifty way of combining these two functions? Here's the plunk illustrating the issue.

function initialize() {
  var userCenter = new google.maps.LatLng(51.508742, -0.120850);

  var userCenterMarker = new google.maps.Marker({
  position: userCenter
});

 userCenterMarker.setAnimation(google.maps.Animation.BOUNCE);

var mapProp = {
  center: userCenter,
  zoom: 12,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),   mapProp);

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

$(markers).each(function() {
  bounds.extend(this.position);
  this.setMap(map);
});

userCenterMarker.setMap(map);

map.fitBounds(bounds);

setTimeout(function() {
  map.setCenter(userCenter);
}, 1500);
}

Thanks!

Community
  • 1
  • 1
Jan Banan
  • 161
  • 2
  • 7

3 Answers3

4

Simple solution: Add your "user marker" to the bounds, do fitBounds, then decrement the resulting zoom by 1 and center on that marker.

  bounds.extend(userCenterMarker.getPosition());
  map.fitBounds(bounds);

  google.maps.event.addListenerOnce(map,'bounds_changed', function() {
        map.setZoom(map.getZoom()-1);
  });

working fiddle

More complex solution: Center on the "user marker", check to see if the marker bounds is completely included in the map's current bounds (map.getBounds().contains(markerBounds)), if not, decrement the zoom level by 1.

geocodezip
  • 158,664
  • 13
  • 220
  • 245
  • Thanks @goecodezip! I will give both of the provided ways a shot. I think the more complex one is more suitable in my case. I didn't know you could do .contains(bounds), just .contains.(marker). Seems promising! – Jan Banan Feb 13 '15 at 21:03
  • 2
    ,Are you sure you can pass a bounds class into the .contains function? This throws an exception for me. Looking at the API docs, it says that bounds.contains() accepts a latlng, not a bounds class. https://developers.google.com/maps/documentation/javascript/reference#LatLngBounds – Jan Banan Feb 16 '15 at 07:35
0

The above answer didn't work for me. Here's what did:

contained = true;
map.fitBounds(bounds);
map.setCenter(center);
newbounds = map.getBounds();
for (i = 0; i < l; i ++) {
  if (!newbounds.contains(markers[i].getPosition())) {
    contained = false;
  }
}
if (!contained) map.setZoom(map.getZoom() - 1);
ebbishop
  • 1,833
  • 2
  • 20
  • 45
0

If you have the bounds and the center, you can do this by checking to see that the current map bound contain the center and the corners of the markers bounds, and incrementing zoom if not:

function fitBoundsAroundCenter( center, bounds, map ) {
    map.fitBounds( bounds );
    map.setCenter( center );
    let zoomPoints = []
    zoomPoints.push( center );
    zoomPoints.push( bounds.getNorthEast() );
    zoomPoints.push( bounds.getSouthWest() );
    
    let allInView = false;
    while ( false === allInView ) {
        map.setZoom( map.getZoom() - 1 );
        allInView = zoomPoints.every( point => {
            if ( map.getBounds().contains( point ) ) {
                return true;
            }
            return false;
        });
    }
}
Jeremy Lind
  • 11
  • 2