CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3fitbounds
Jan Banan
Jan Banan

Reputation: 161

Google Maps JavaScript API - fitbounds together with setCenter

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!

Upvotes: 3

Views: 4287

Answers (3)

Jeremy Lind
Jeremy Lind

Reputation: 11

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;
        });
    }
}

Upvotes: 0

ebbishop
ebbishop

Reputation: 1983

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);

Upvotes: 0

geocodezip
geocodezip

Reputation: 161404

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.

Upvotes: 4

Related Questions