Javascript Google map api V3 fitbounds with center

Question

I want to fitbound pushpins to visible all around user's location pushpin. i wrote the following code it center the user location but few pushpin goes out of map ??

FYI: userPinLoc is pushpin object which is already populated

 function setInitialZoom() {
            mapZoom = googleMap.getZoom(); 
            var bounds = new google.maps.LatLngBounds();
            bounds.extend(userPinLoc);
            for (i in nearestEntitiesToZoom) {
                entity = nearestEntitiesToZoom[i];
                var googleLatLng = new google.maps.LatLng(entity.latitude,entity.longitude);
                bounds.extend(googleLatLng);
            }

            google.maps.event.addDomListener(googleMap, 'bounds_changed', function() {
                googleMap.setCenter(userPinLoc);
            });
                 googleMap.fitBounds(bounds);
        }

Answer 1

I did it using java and javascript

public static void calculateMapFitBounds(GeoLocation userLocation, List<GeoLocation> contents, Map<String, GeoLocation> latlngBounds){

    if (Util.isEmtpyGeoLocation(userLocation) || contents == null || contents.isEmpty()) {
        return;
    }

    //SW
    double minLat = userLocation.getLatitude();
    double minLng = userLocation.getLongitude();

    //NE
    double maxLat = userLocation.getLatitude();
    double maxLng = userLocation.getLongitude();

    for(GeoLocation content: contents){

        /*
         * Populating Top left cordinate (SW)
         */
        minLat = Math.min(minLat, content.getLatitude());
        minLng = Math.min(minLng, content.getLongitude());

        /*
         * Populating Bottom right cordinate (NE)
         */
        maxLng = Math.max(maxLng, content.getLongitude()) ;
        maxLat = Math.max(maxLat, content.getLatitude());
    }

    /*
     * Calculating Delta fit bounds
     */

    double latDelta = Math.max(Math.abs(userLocation.getLatitude() - minLat), Math.abs(maxLat-userLocation.getLatitude()));

    double lngDelta = Math.max(Math.abs(userLocation.getLongitude() - maxLng), Math.abs(minLng - userLocation.getLongitude()));

    //Calculating SW
    minLat = userLocation.getLatitude() - latDelta;
    minLng = userLocation.getLongitude()- lngDelta;


    latlngBounds.put("swLatLng", new GeoLocation(minLat, minLng));


    //Calculating NE
    maxLat = userLocation.getLatitude() + latDelta;
    maxLng = userLocation.getLongitude()+ lngDelta;

    latlngBounds.put("neLatLng", new GeoLocation(maxLat, maxLng));

}

I am using velocity views so here is velocity and js code

#if($swLatLng && $neLatLng)
        var swLatLn = new google.maps.LatLng($!swLatLng.latitude, $!swLatLng.longitude, false);
        var neLatLn = new google.maps.LatLng($neLatLng.latitude, $neLatLng.longitude, false);

        var bounds = new google.maps.LatLngBounds(swLatLn, neLatLn);
        googleMap.fitBounds(bounds);

        #end

Answer 2

When I've done this before, I've done the bounds.extend() for the map center as the very last one, not the first one. Which seemed to work better for some reason.

function initialize() {
    var points = [
        {
            lat: 51.498725,
            lng: -0.17312
        },
        {
            lat: 51.4754091676,
            lng: -0.186810493469
        },
        {
            lat: 51.4996066187,
            lng: -0.113682746887
        },
        {
            lat: 51.51531272,
            lng: -0.176296234131
        }
    ];

    var centerLatLng = {lat: 51.532315, lng: -0.1544};

    var map = new google.maps.Map(document.getElementById("map"), {
        zoom:               15,
        center:             centerLatLng,
        mapTypeId:          google.maps.MapTypeId.ROADMAP
    });

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

    var homeMarker = new google.maps.Marker({
        position: centerLatLng,
        map: map,
        icon: "http://maps.google.com/mapfiles/ms/micons/green-dot.png"
    });

    for (var i = 0; i < points.length; i++) {       
        var marker = new google.maps.Marker({
            position: points[i],
            map: map
        });

        bounds.extend(points[i]);
    }

    bounds.extend(centerLatLng);

    map.fitBounds(bounds);
}

Answer 3

I'm not sure where you're getting userPinLoc from. Give this a go:

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

// Go through each...
for (i in nearestEntitiesToZoom) {
    entity = nearestEntitiesToZoom[i];
    var googleLatLng = new google.maps.LatLng(entity.latitude, entity.longitude);
    bounds.extend(googleLatLng);
};

// Fit these bounds to the map
googleMap.fitBounds(bounds);
...

Remember, fitCenter or fitBounds needs a LatLng object as a parameter.

This code is adapted from: http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/