Карты Google с несколькими маркерами в Bootstrap Modal

Question

Я пытаюсь отобразить карту Google в модуле Bootstrap с несколькими маркерами. Я нашел несколько сообщений, в которых у людей возникли проблемы с отображением карты на модальном уровне только с одним маркером, но ни с одним маркером. Это то, что у меня сейчас есть, но моя карта просто отображается серым цветом.

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

Есть 2 вещи, которые я должен был сделать, чтобы сделать эту работу. Первая вещь была очевидной ошибкой - я выбрал неправильный элемент метода «показанный.bs.modal». Мне нужно было выбрать мой Bootstrap modal, а не карту Google. Во-вторых, нужно было вызвать метод «fitBounds», прежде чем вызывать событие «изменить размер» и устанавливать центр.

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