Я пытаюсь вставить карту Google в модальную версию, используя Twitter Bootstrap. Модальная фигура отображается с формой присутствующей карты, но отображается только часть карты, а остальная часть - серая. При изменении размера экрана карта всегда отображается правильно, хотя и не в том месте.
Я искал и нашел такие предложения, как вызов события изменения размера карты или установление максимальной ширины изображения карты в none, но ни одно из этих предложений не помогло до сих пор. Кажется, что карта не может определить правильный размер, пока он скрыт в скрытом элементе.
JS
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.219987, 4.396237),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapCanvas"),
mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.219987, 4.396237)
});
marker.setMap(map);
}
HTML
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3></h3>
</div>
<div class="modal-body">
<div id="mapCanvas" style="width: 500px; height: 400px"></div>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
Я использую Twitter Bootstrap v2.0.4. Мне нужна помощь, потому что я не могу правильно запустить событие изменения размера или редактировать css, чтобы карта Google осталась одна.