Google Map API внутри модального сообщения не отображается полностью
У меня проблемы с картой Google, которая у меня есть внутри div, который при нажатии кнопки появляется на экране. Карта Google отображается только частично. Я знаю, что мне нужно, чтобы создать событие изменения размера, но не знаю, как и где его разместить. Любая помощь приветствуется! Пожалуйста, имейте в виду, что у меня мало знаний о JS!
Ссылка на тестовый сайт: НАЖМИТЕ НА КНОПКУ GOOGLE MAP, ЧТОБЫ ВИДЕТЬ ПРОБЛЕМУ НА РУКУ:
http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#
Мой скрипт Google API:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(39.739318, -89.266507),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
Div, который содержит карту:
How to get here
<a class="close-reveal-modal">×</a>
Скрипт, который вызывает карту при нажатии кнопки:
$(document).ready(function() {
$('#myModal1').click(function() {
$('#myModal').reveal();
});
});