Antes de comenzar, solo quiero aclarar que ya he leído los siguientes artículos SO de principio a fin, he intentado replicar la solución y hasta ahora no puedo.

La API de Google Map en Foundation revela que el modal no se muestra correctamente

La API de Google Map dentro de un Reveal Modal no se muestra completamente

Cómo utilizar google.maps.event.trigger (mapa, 'redimensionar')

Así como la lista de problemas de la Fundación Zurb aquí ->https://github.com/zurb/foundation/issues

Mi problema parece ser idéntico, e incluso verifiqué su código fuente enhttp://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html y parece que él consiguió su arreglo, pero no puedo arreglar el mío.

No estoy seguro si es una diferencia en Foundation 3 y 4 lo que está causando mi problema (ya que esas publicaciones SO tienen casi un año de antigüedad) pero en cualquier caso no parece que el método de cambio de tamaño esté funcionando.

Aquí hay un enlace a mi página básica en db ->http://db.tt/gdl3wVox

Como puede ver, el mapa pequeño funciona bien, pero cuando hace clic en el enlace "Ver mapa más grande" hay dos problemas.

El problema principal: solo 1/3 del mapa está renderizado. Al inspeccionar el elemento o abrir Dev Tools (F12) en Chrome o IE, el mapa se vuelve a representar y se ajusta al ancho completo del div.Problema menor: el mapa revelado no está centrado en el marcador como el mapa más pequeño.

El archivo foundation.css no se ha personalizado más que para agregar los dos elementos en esta página. Así que no tienes que ir a cavar por su estilo, aquí 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; }

He implementado elgoogle.maps.event.trigger(map, 'resize'); arreglar como se describe en otros mensajes (reemplazandomap conbigmap ya que tengo dos 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>

pero este guión:

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

Parece estar causándome un error. Cuando veo la consola en la herramienta de desarrollo de Chrome, veo esto:

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

el cual cuando se profundiza muestra otros dos errores:

(anonymous function) map.html:96

handler.proxy zepto.js:933

No estoy seguro de por qué no funciona ya que replicé la solución en los temas anteriores. Me siento culpable por volver a revisar un problema "resuelto", pero he estado arreglando esto por horas y parece que no puedo hacerlo funcionar como lo han hecho las publicaciones anteriores.

Cualquier aclaración sería muy apreciada, gracias de antemano!