Fit bounds в google map on resize

Question

Я пытаюсь связать метод map.fitBounds (bounds) с событием изменения размера окна, к сожалению, без успеха. Может, у вас есть идея?

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
<script src="http://www.mysite.url/label.js"></script> 
<script> 

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

function initialize() { 
    var mapOptions = { 
    panControl: true, 
    scaleControl: false, 
    overviewMapControl: false, 
    zoomControl: true, 
    mapTypeControl: false, 
    streetViewControl: false, 
    mapTypeId: google.maps.MapTypeId.HYBRID, 
    center: { lat: 0.0, lng: 40.0}, 
    zoom: 2 
    }; 

    var destinations = [ 
    {lat:13.7246005, lng:100.6331108, myTitle:'Bangkok'}, 
    {lat:8.722049, lng:98.23421, myTitle:'Khao Lak'}, 
    {lat:1.3146631, lng:103.8454093, myTitle:'Singapore'}, 
    {lat:-36.8630231, lng:174.8654693, myTitle:'Auckland'}, 
    {lat:34.0204989, lng:-118.4117325, myTitle:'Los Angeles'}, 
    {lat:25.782324, lng:-80.2310801, myTitle:'Miami'} 
    ]; 

    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

    var image = { 
    url: 'plane-icon-medium.png', 
    size: new google.maps.Size(24, 24), 
    origin: new google.maps.Point(0,0), 
    anchor: new google.maps.Point(12, 12) 
    }; 

    var flightPath = new google.maps.Polyline({ 
    path: destinations, 
    geodesic: true, 
    strokeColor: '#FF0000', 
    strokeOpacity: 1.0, 
    strokeWeight: 2 
    }); 

    flightPath.setMap(map); 

    for (var i = 0; i < destinations.length; i++) { 
    var myTitle = destinations[i].myTitle; 
    var myLatLng = new google.maps.LatLng(destinations[i].lat, destinations[i].lng); 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     icon: image, 
     title: 'test', 
     text: myTitle, 
    }); 
    var label = new Label({ 
     map: map 
    }); 
    label.bindTo('position', marker, 'position'); 
    label.bindTo('text', marker, 'text'); 
    bounds.extend(marker.position); 
    } 
    map.fitBounds(bounds); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 
google.maps.event.addDomListener(window, "resize", function() { 
    var center = map.getCenter(); 
    var bounds = map.getBounds(); 
    google.maps.event.trigger(map, "resize"); 
    map.setCenter(center); 
    map.fitBounds(bounds); 
    }); 

</script> 
<div id="map_canvas"></div> 

К сожалению, это как-то не работает. Когда я изменяю размер окна, карта не делает рецензента и не «rezoom», чтобы поместить все маркеры (то есть границы) в новое окно.

благодаря & наилучшими пожеланиями, Klayman

Answer 1

нормально, решение выглядит следующим образом:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
<script src="http://www.mysite.url/label.js"></script> 
<script> 

var bounds = new google.maps.LatLngBounds(null); 
//globally declare map variable here 
var map; 

function initialize() { 
    var mapOptions = { 
    panControl: true, 
    scaleControl: false, 
    overviewMapControl: false, 
    zoomControl: true, 
    mapTypeControl: false, 
    streetViewControl: false, 
    mapTypeId: google.maps.MapTypeId.HYBRID, 
    center: { lat: 0.0, lng: 40.0}, 
    zoom: 2 
    }; 

    var destinations = [ 
    {lat:13.7246005, lng:100.6331108, myTitle:'Bangkok'}, 
    {lat:8.722049, lng:98.23421, myTitle:'Khao Lak'}, 
    {lat:1.3146631, lng:103.8454093, myTitle:'Singapore'}, 
    {lat:-36.8630231, lng:174.8654693, myTitle:'Auckland'}, 
    {lat:34.0204989, lng:-118.4117325, myTitle:'Los Angeles'}, 
    {lat:25.782324, lng:-80.2310801, myTitle:'Miami'} 
    ]; 
    //remove declaration of map as already declared globally 
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
    [...]