Antes de começarmos, quero apenas deixar claro que eu já li os seguintes artigos de SO de cima para baixo, tentei replicar a solução e até agora não consegui.

API do Google Map na Fundação revela que o modal não é exibido corretamente

API do Google Maps dentro de um Reveal Modal não mostrando totalmente

Como usar o google.maps.event.trigger (map, 'resize')

Bem como a lista de problemas da Fundação Zurb aqui ->https://github.com/zurb/foundation/issues

O meu problema parece ser idêntico e chequei até o código fonte delehttp://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html e parece que ele foi consertado, mas eu não consigo consertar o meu.

Não tenho certeza se é uma diferença na Foundation 3 e 4 que está causando o meu problema (uma vez que essas postagens SO são quase um ano de idade), mas em qualquer caso, não parece que o método de redimensionamento está funcionando.

Aqui está um link para minha página básica em db ->http://db.tt/gdl3wVox

Como você pode ver, o mapa pequeno funciona bem, mas quando você clica no link para "Visualizar Mapa Maior", há dois problemas.

O principal problema - apenas 1/3 do mapa é renderizado. Inspecionar o elemento ou abrir as Dev Tools (F12) no Chrome ou no IE faz com que o mapa seja renderizado novamente e se ajuste à largura total da div.Problema menor - o mapa revelado não está centrado no marcador como o mapa menor.

O foundation.css não foi personalizado, exceto para adicionar os dois elementos nesta página. Então você não precisa procurar o estilo deles, aqui está:

#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; }

Eu implementei ogoogle.maps.event.trigger(map, 'resize'); corrigir como descrito em outros posts (substituindomap combigmap como eu tenho dois mapas)

         <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>

mas esse script:

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

parece estar causando um erro para mim. Quando vejo o console na Dev Tool do Chrome, vejo isto:

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

que quando perfurado mostra outro erro dois:

(anonymous function) map.html:96

handler.proxy zepto.js:933

Não sei por que não está funcionando desde que repliquei a correção nos tópicos acima. Sinto-me culpado por ter revisado uma questão "resolvida", mas tenho trabalhado com isso há horas e não consigo trabalhar como as postagens anteriores fizeram.

Qualquer esclarecimento seria muito apreciado, agradeço antecipadamente!