Google Maps API v3 + Foundation 4 Reveal modal not displaying properly

问题

Before we begin I just want to make clear that I have already read the following SO articles top to bottom, tried to replicate the solution, and so far cannot.

Google Map API in Foundation reveal modal not displaying properly

Google Map API inside a Reveal Modal not showing fully

How to use google.maps.event.trigger(map, 'resize')

As well as Zurb's Foundation Issue List here - > https://github.com/zurb/foundation/issues

My issue seems to be identical, and I even checked his source code at http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html and it looks like he got his fixed, but I cannot get mine fixed.

Not sure if it's a difference in Foundation 3 and 4 that's causing my problem (since those SO posts are almost a year old) but in any case it doesn't seem like the resize method is working.

Here's a link to my basic page on db -> http://db.tt/gdl3wVox

As you can see small map works fine, but when you click link for "View Bigger Map" there's two problems.

The main problem - only 1/3 of the map is rendering. Inspecting the element or opening Dev Tools (F12) in either Chrome or IE cause the map to re-render and fit the full width of the div.
Minor problem - the revealed map is not centered on the marker like the smaller map.

The foundation.css has not been customized other than to add the two elements on this page. So you don't have to go digging for their style, here it is:

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

I have implemented the google.maps.event.trigger(map, 'resize'); fix as described in other posts (replacing map with bigmap as I have two maps)

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

but this script:

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

seems to be causing an error for me. When I view the Console in Chrome's Dev Tool I see this:

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

which when drilled down shows another two error:

(anonymous function) map.html:96

handler.proxy zepto.js:933

I'm not sure why it is not working since I replicated the fix in the above topics. I feel guilty for revisiting a "solved" issue but I've tinkered with this for hours now and can't seem to get it working as previous posts have done.

Any clarification would be greatly appreciated, thank you in advance!

回答1:

You should use

$('#myModal').foundation('reveal', 'open');

to show the modal.

Also, google.maps.event.trigger(bigmap, 'resize'); should be bound to the opened event of the #myModal:

$('#myModal').on('opened', function () { google.maps.event.trigger(bigmap, 'resize'); });

And check bigmap, it's out of the variable scope.

来源：https://stackoverflow.com/questions/16321577/google-maps-api-v3-foundation-4-reveal-modal-not-displaying-properly

标签

javascript

google-maps-api-3

resize

modal-dialog

zurb-foundation