크기 조정시 Google지도의 경계 맞추기

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> 

불행히도, 이것은 어떻게 든 작동하지 않습니다. 창 크기를 조정하면지도가 다시 정렬되지 않고 모든 마커 (경계)를 새 창에 맞추기 위해 '확대'도되지 않습니다.

감사 & 안부, 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); 
    [...]