set zoom for google maps v3 does not work on document ready

Question

This doesn't work on document ready, but it works on ajax updates.

map.fitBounds(bounds);
map.setZoom(map.getZoom() - 1);

and I don't know why when I am using the same function of updateBounds(). I am trying to accommodate the infowindows after I call fitbounds for the markers by zooming out one level. Any other solutions for accommodating info windows to prevent clipping would be appreciated, or any suggestions to make my current solution work would be great.

var map, mapCenter = new google.maps.LatLng(0, 0);
var bounds = new google.maps.LatLngBounds();
var driverMarker;
var orderMarker;
var LatLngO;
var LatLngD;

function initializeMap() {
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 13,
        center: mapCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControl: false
    });
}
function getOrder() {
    var lat = $('#orderLat').text();
    var lng = $('#orderLng').text();
    LatLngO = new google.maps.LatLng(lat, lng);
    orderMarker = new google.maps.Marker({ map: map, position: LatLngO, icon: "images/greenHouse.png" });
}
function getDriver() {
    var lat = $('#driverLat').text();
    var lng = $('#driverLng').text();
    LatLngD = new google.maps.LatLng(lat, lng);
    driverMarker = new google.maps.Marker({ map: map, position: LatLngD, icon: "images/greenCircle.png" });
}
function update() {
    $.get("driverLocation.aspx?id=" + $('#driverId').text() + "&orderId=" + $('#orderId').text(), function (data) {
        $("#LatLng").html(data);
        updateDriver();
        updateBounds();
    });    
}
function updateDriver() {
    var lat = $('#driverLat').text();
    var lng = $('#driverLng').text();
    var LatLng = new google.maps.LatLng(lat, lng);
    driverMarker.setPosition(LatLng);
}
function updateBounds(){
    bounds.extend(orderMarker.getPosition());
    bounds.extend(driverMarker.getPosition());
    map.fitBounds(bounds);
    map.setZoom(map.getZoom() - 1);
}

$(document).ready(function () {
    initializeMap();
    getOrder();
    getDriver();
    updateBounds();
    updateTimer = setInterval('update()', 10000);
});

Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates the problem. My suspicion is that there aren't valid values for `orderMarker` and `driverMarker` when you call it on `ready`. — geocodezip, Sep 07 '15 at 16:49
Thanks for answering. That is what I attempted to do. And I have run this through the debugger and the values "seem" correct. Would you like less code? — user192632, Sep 07 '15 at 16:54
Your problem lays with the `map.fitBounds()` function inside your `updateBounds()`. You cannot use `map.setZoom()` right afterworrds. See a workaround [here](http://stackoverflow.com/questions/2437683/google-maps-api-v3-can-i-setzoom-after-fitbounds) — uri2x, Sep 07 '15 at 16:57
The markers show up and fitbounds works and they all fit within the map. But it seems like it ignores map.setZoom(map.getZoom() - 1) which is called after fitbounds. But it only seems to ignore it on document ready. But it does not ignore it when I call the same function (upDateBounds) with map.setZoom(map.getZoom() - 1) during updating from call to update function — user192632, Sep 07 '15 at 16:58
Thanks uri2x. Sounds right. But I don't get why the same exact function works when it's called to update via ajax — user192632, Sep 07 '15 at 16:59

score 0 · Answer 1 · answered Sep 07 '15 at 18:42

map.getZoom will not get the new bounds unless you call it inside an event handler that is listening for the zoom_changed event (.fitBounds sets the zoom asynchronously and fires the zoom_changed event after setting the new zoom)

map.fitBounds(bounds);
google.maps.event.addEventListenerOnce(map,'zoom_changed', function() {
  map.setZoom(map.getZoom() - 1);
});

set zoom for google maps v3 does not work on document ready

1 Answers1