Прежде чем мы начнем, я просто хочу прояснить, что я уже прочитал следующие статьи SO сверху вниз, попытался воспроизвести решение, и пока не могу.

Google Map API в Foundation показывает, что модальное отображение не отображается должным образом

Google Map API внутри модального сообщения не отображается полностью

Как использовать google.maps.event.trigger (map, 'resize')

А также список выпусков Фонда Зурба здесь ->https://github.com/zurb/foundation/issues

Моя проблема, кажется, идентична, и я даже проверил его исходный код наhttp://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html и похоже, что он починил, но я не могу починить.

Не уверен, что это различие в Foundation 3 и 4, которое вызывает мою проблему (так как этим постам SO уже почти год), но в любом случае не похоже, что метод resize работает.

Вот ссылка на мою основную страницу на БД ->http://db.tt/gdl3wVox

Как видите, небольшая карта работает нормально, но при нажатии на ссылку «Просмотреть большую карту» возникают две проблемы.

Основная проблема - только 1/3 карты составляет рендеринг. Проверка элемента или открытие Dev Tools (F12) в Chrome или IE приводит к повторной визуализации карты и ее заполнению на всю ширину div.Незначительная проблема - показанная карта не центрируется на маркере, как карта меньшего размера.

Foundation.css не был настроен, кроме как добавить два элемента на этой странице. Так что вам не нужно копаться ради их стиля, вот оно:

#mini-map  {
  min-width: auto;
  max-width: 100%;
  width: 220px;
  min-height: auto;
  max-height: 100%;
  height: 154px; }

#big-map  {
  min-width: auto;
  max-width: 100%;
  width: 600px;
  min-height: auto;
  max-height: 100%;
  height: 300px; }

Я реализовалgoogle.maps.event.trigger(map, 'resize'); исправить, как описано в других сообщениях (заменаmap с участиемbigmap как у меня две карты)

         <script>
            var ourLocation = new google.maps.LatLng(46.213769, -60.266018);

            function initialize() {
                var mapOptions = {
                    center: ourLocation,
                    zoom: 14,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                minimap = new google.maps.Map(document.getElementById("mini-map"), mapOptions);
                bigmap = new google.maps.Map(document.getElementById("big-map"), mapOptions);

                minimarker = new google.maps.Marker({
                    map: minimap,
                    draggable: false,
                    animation: google.maps.Animation.DROP,
                    position: ourLocation
                });
                bigmarker = new google.maps.Marker({
                    map: bigmap,
                    draggable: false,
                    animation: google.maps.Animation.DROP,
                    position: ourLocation
                });
            }
            initialize();
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#myModal1').click(function () {
                $('#myModal').reveal();
                    google.maps.event.trigger(bigmap, 'resize');
                });
            });
        </script>

но этот скрипт:

        <script type="text/javascript">
            $(document).ready(function () {
                $('#myModal1').click(function () {
                $('#myModal').reveal(); /* Problem is here */
                    google.maps.event.trigger(bigmap, 'resize');
                });
            });
        </script>

кажется, вызывает ошибку для меня. Когда я смотрю Консоль в Chrome Dev Tool, я вижу это:

Uncaught TypeError: Object #<Object> has no method 'reveal' map.html:96

который при детализации показывает еще две ошибки:

(anonymous function) map.html:96

handler.proxy zepto.js:933

Я не уверен, почему это не работает, так как я повторил исправление в вышеупомянутых темах. Я чувствую себя виноватым за то, что вернулся к «решенной» проблеме, но я уже часами возился с этим и, похоже, не могу заставить его работать, как это делали предыдущие посты.

Любые разъяснения будут с благодарностью, заранее спасибо!