简体   繁体   中英

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

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM