javascript - Google Map API inside a Reveal Modal not showing fully - Stack Overflow

admin管理员组

文章数量:1390965

I am having problems with a Google Map that I have inside a div, which upon button click, pops up on screen. The Google Map is only partially showing. I know that I need to that I need to create a resize event, but do not know how, or where to put it. Any help would be much appreciated! Please keep in mind that I have little knowledge of JS!

Link to test site: CLICK ON GOOGLE MAP BUTTON TO SEE THE PROBLEM AT HAND:

/foundation/contact_us.html#

My Google API script:

<script type="text/javascript">
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(39.739318, -89.266507),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    }  
</script> 

The div which contains the map:

<div id="myModal" class="reveal-modal large">
    <h2>How to get here</h2>
    <div id="map_canvas" style="width:600px; height:300px;"></div>
    <a class="close-reveal-modal">&#215;</a>
</div>

The script which calls the map upon button click:

<script type="text/javascript">
    $(document).ready(function() {
        $('#myModal1').click(function() {
            $('#myModal').reveal();
        });
    });
</script>

I am having problems with a Google Map that I have inside a div, which upon button click, pops up on screen. The Google Map is only partially showing. I know that I need to that I need to create a resize event, but do not know how, or where to put it. Any help would be much appreciated! Please keep in mind that I have little knowledge of JS!

Link to test site: CLICK ON GOOGLE MAP BUTTON TO SEE THE PROBLEM AT HAND:

http://simplicitdesignanddevelopment./Fannie%20E%20Zurb/foundation/contact_us.html#

My Google API script:

<script type="text/javascript">
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(39.739318, -89.266507),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    }  
</script> 

The div which contains the map:

<div id="myModal" class="reveal-modal large">
    <h2>How to get here</h2>
    <div id="map_canvas" style="width:600px; height:300px;"></div>
    <a class="close-reveal-modal">&#215;</a>
</div>

The script which calls the map upon button click:

<script type="text/javascript">
    $(document).ready(function() {
        $('#myModal1').click(function() {
            $('#myModal').reveal();
        });
    });
</script>

• javascript
• jquery
• google-maps
• google-maps-api-3
• zurb-foundation

Share Improve this question Follow edited Sep 18, 2014 at 23:49 Stephan Muller 27.6k1818 gold badges8686 silver badges127127 bronze badges asked Oct 25, 2012 at 2:38 Jeremy FlaugherJeremy Flaugher 43722 gold badges88 silver badges1616 bronze badges 3

• 1 Someone please save my forehead from being smashed against the table..this is driving me nuts. – Jeremy Flaugher Commented Oct 25, 2012 at 3:04
• 1 My forehead is now gushing blood..someone quick..only help with this problem will subdue the bleeding! For real though, this is driving me insane as I know it is probably a simple fix. – Jeremy Flaugher Commented Oct 25, 2012 at 3:25
• 2 you already asked this very same question here: stackoverflow./questions/13056637/… – yodog Commented Oct 25, 2012 at 13:25

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

Following Two solutions worked for me

function initialize() {
   var mapOptions = {
    center: new google.maps.LatLng(39.739318, -89.266507),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  return map;
}

<div id="myModal" class="reveal-modal" data-reveal>
  <div id="map_canvas" style="height: 300px"></div>
  <a class="close-reveal-modal">&#215;</a>
</div>


$(document).ready(function() {
  var myMap;
  $('#myModal').bind('open', function() {
    if(!myMap) {
      var myMap = initialize();
      setTimeout(function() {
        google.maps.event.trigger(myMap, 'resize');
      }, 300);                  
    }
  });
}

OR

$(document).ready(function() {
  var myMap;
  $('#myModal').bind('opened', function() {
    if(!myMap) {
      var myMap = initialize();
      google.maps.event.addDomListener(window, 'load', initialize);
    }
  });
});

First, based on the source linked to, the script which calls the map upon button click is doing nothing but throwing an error because you have it in the page before jQuery is loaded. You can see it in the error console. You need to move that to the bottom of the page after the rest of the scripts.

Your reveal is "working" because you are using the data-reveal-id attribute on the menu item and the reveal script wires it up automatically.

You are creating the map onload which is bad practice. Don't create it until/unless it is needed.

So to fix your issue, this is what I did. Remove the data-reveal-id from the menu item and replace it with an ID, or you can just use some other selector to access it. I changed it to id="myModal1" since that is what you had in your event code already.

Move your script which calls the map upon button click to the bottom, and change it to look like this:

$(document).ready(function() {
var map;
$('#myModal1').click(function() {
    if(!map){
        var mapOptions = {
          center: new google.maps.LatLng(39.739318, -89.266507),
          zoom: 5,
          mapTypeId: google.maps.MapTypeId.ROADMAP

        };
         map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);          
    }

    $('#myModal').reveal();
});

});

This will create the map only when the user clicks the link to show it and only creates it once. That should fix it for you. If you have to, you can pass an opened callback to the reveal() call and trigger resize there but in my limited testing it was not necessary.

You can also get rid of the entire initialize function.

Now go get a band-aid and put some ice on that head.

Removing width: 600px; on the <div id="map_canvas"> and triggering resize on your map after opening the modal should do the trick:

$(".reveal-modal").on("reveal:opened", function(e) {
  google.maps.event.trigger(map, 'resize')
});

Try this

<script type="text/javascript">
    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(39.739318, -89.266507),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    }
    $( document ).bind( "pageshow", function( event, data ){
        google.maps.event.trigger(map, 'resize');               
    }); 
</script>  

$("#myModal").on('shown.bs.modal', function(){
     google.maps.event.trigger(map, 'resize')
});

本文标签： javascriptGoogle Map API inside a Reveal Modal not showing fullyStack Overflow