帶Bootstrap模式中的多個標記的Google地圖

Question

我試圖在Bootstrap模式中顯示帶有多個標記的Google地圖。我發現了幾個帖子，人們在用一個標記顯示模式上的地圖時出現問題，但沒有多個標記。這是我目前所擁有的，但是我的地圖顯示爲灰色。

var locations = [...] 

var complexMap = new google.maps.Map(document.getElementById('complexes-modal-map-canvas'), { 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

//create empty LatLngBounds object 
var bounds = new google.maps.LatLngBounds(); 
var infowindow = new google.maps.InfoWindow(); 

for (i = 0; i < locations.length; i++) { 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
     icon: locations[i][3], 
     map: complexMap 
    }); 

    //extend the bounds to include each marker's position 
    bounds.extend(marker.position); 

    google.maps.event.addListener(marker, 'click', (function (marker, i) { 
     return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(complexMap, marker); 
     } 
    })(marker, i)); 
} 

$("#complexes-modal-map-canvas").on("shown.bs.modal", function() { 
    var currentCenter = complexMap.getCenter(); 
    google.maps.event.trigger(complexMap, "resize"); 
    complexMap.setCenter(currentCenter); 
    complexMap.fitBounds(bounds); 
}); 

Answer 1

有兩件事我不得不做的這項工作。第一件事是一個明顯的錯誤 - 我在「shown.bs.modal」方法中選擇了不正確的元素。我需要選擇我的Bootstrap模式，而不是Google Map。第二件事是在調用「調整大小」事件並設置中心之前調用「fitBounds」方法。

$("#complexes-modal").on("shown.bs.modal", function() { 
    complexMap.fitBounds(bounds); 
    var currentCenter = complexMap.getCenter(); 
    google.maps.event.trigger(complexMap, "resize"); 
    complexMap.setCenter(currentCenter); 
});