2

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.

  1. 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.
  2. 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!

Community
  • 1
  • 1
cassidymack
  • 797
  • 4
  • 17
  • 41

1 Answers1

3

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.

coorasse
  • 5,278
  • 1
  • 34
  • 45
jmsg1990
  • 165
  • 5
  • I changed `$('#myModal').reveal();` to `$('#myModal').foundation('reveal', 'open');` but I don't know what you mean when you say "should be bound to the opened event" or "bigmap is out of the variable scope". Sorry for asking beginner questions, but I am a beginner. Regardless, thanks for taking the time to post an answer : ) – cassidymack Aug 29 '13 at 14:20
  • 1
    What you want to do is to resize the map once the modal has opened, not when you click #myModal1. Try replacing your click event on myModal1 with something like this: `$('#myModal').on('opened', function () { google.maps.event.trigger(bigmap, 'resize'); });` Regarding the variable scope, you defined bigmap inside initialize() but you are also trying to use it inside document.ready. You should define `var bigmap;` right under `var ourLocation = new ...` so that both functions can access bigmap. Hope this helps! By the way, we were all beginners once, don't worry! – jmsg1990 Sep 18 '13 at 15:59
  • Thanks, I tried moving `var bigmap;` right under `var ourLocation = new ... ` but then get a `mapOptions is not defined` error. I managed to get the two scripts condensed into one (starting to understand this "scope" business) but I'm still having the display issue. Thanks for the continued support :) – cassidymack Oct 09 '13 at 19:42
  • Update: I made `mapOptions` a global variable by changing it to `window.mapOptions` and now bigmap is displaying the correct area, but the marker is missing, almost there! – cassidymack Oct 09 '13 at 19:56
  • I'm not really sure but may be you could try calling initialize() inside $(document).ready() – jmsg1990 Oct 22 '13 at 14:36