Bootstrap 3, modal и map

Question

Я занимаюсь разработкой веб-сайта для предприятия и на странице их агентств. Я поместил карты для его локализации. Карты видны в полноэкранном режиме, и есть гибкий режим для планшетов и смартфонов.

Вот моя проблема:

Существует кнопка для открытия карты в модальном и мы можем видеть только одну треть или менее карт (или при изменении размеров окна или открыть консоль, но это логический). Я посмотрел на Stack и другой сайт и нашел других парней, у которых такая же проблема, но не могу найти проблему в js. Как я могу использовать «google.maps.event.trigger (map, 'resize')».

Вот fiddle и код ниже

function initialize() 
{ 
    var latlng = new google.maps.LatLng(49.0931702,6.083775599999967); 
    var latlng1 = new google.maps.LatLng(48.691925, 6.175345200000038); 
    var latlng2 = new google.maps.LatLng(48.1116311, 5.13722800000005); 
    var myOptions = 
    { 
     zoom: 18, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.EARTH 
    }; 
    var myOptions2 = 
    { 
     zoom: 18, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.EARTH 
    }; 
    var myOptions3 = 
    { 
     zoom: 18, 
     center: latlng1, 
     mapTypeId: google.maps.MapTypeId.EARTH 
    }; 
    var myOptions4 = 
    { 
     zoom: 18, 
     center: latlng1, 
     mapTypeId: google.maps.MapTypeId.EARTH 
    }; 
     var myOptions5 = 
    { 
     zoom: 18, 
     center: latlng2, 
     mapTypeId: google.maps.MapTypeId.EARTH 
    }; 
     var myOptions6 = 
    { 
     zoom: 18, 
     center: latlng2, 
     mapTypeId: google.maps.MapTypeId.EARTH 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    var map2 = new google.maps.Map(document.getElementById("map_canvas_2"), myOptions2); 
    var map3 = new google.maps.Map(document.getElementById("map_canvas_3"), myOptions3); 
    var map4 = new google.maps.Map(document.getElementById("map_canvas_4"), myOptions4); 
    var map5 = new google.maps.Map(document.getElementById("map_canvas_5"), myOptions5); 
    var map6 = new google.maps.Map(document.getElementById("map_canvas_6"), myOptions6); 

google.maps.event.trigger(map, 'resize') 
google.maps.event.trigger(map2, 'resize') 
google.maps.event.trigger(map3, 'resize') 
google.maps.event.trigger(map4, 'resize') 
google.maps.event.trigger(map5, 'resize') 
google.maps.event.trigger(map6, 'resize') 
} 

Позвольте мне знать, если это необходимо больше разъяснений.

Answer 1

После того, как анимация для модальности будет завершена, вы должны позвонить google.maps.event.trigger(map, "resize").

В Вашем Javascript, вначале изменить show.bs.modal на shown.bs.modal в вашем коде $(document).on. Это правильное имя в Bootstrap 3. Затем вызовите initialize() изнутри shown.bs.modal.