google map v3 how fitbounds with zoom on user's location

Question

I am using google v3, i want to fitbounds with center on userPinLoc object, i have the following code

 var bounds = new google.maps.LatLngBounds();
            bounds.extend(userPinLoc)// wants to center on userPinLocation
            for (i in nearestEntitiesToZoom) {
                    entity = nearestEntitiesToZoom[i];
                    var googleLatLng = new google.maps.LatLng(entity.latitude,entity.longitude);
                    bounds.extend(googleLatLng);
                }

                bounds.extend(userPinLoc);
                //googleMap.setCenter(userPinLoc) this not working

googleMap.fitBounds(bounds);

any quick fix after update i am pasting new code

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);
        setTimeout(function() {
            google.maps.event.clearListeners(googleMap, 'bounds_changed');
        }, 3000);
    }

Answer 1

Remove the setCenter from where it is currently. You need to have an event listener for when the map's bounds change. I think when you call fitBounds, you have to wait for it to redraw before you can adjust the centre. One way would be to use a timeout, but you can simply add this to your initialize function:

google.maps.event.addDomListener(googleMap, 'bounds_changed', updateCenter);

And then create a new function to update the centre, which takes the userPinLoc value (needs to be a global variable):

function updateCenter() { 
    googleMap.setCenter(userPinLoc);
}