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

问题

I am new to JS, and have found the answer to a previous question, which brought up a new question, which brought me here again.

I have a Reveal Modal that contains a Google Map API. When a button is clicked, the Reveal Modal pops up, and displays the Google Map. My problem is that only a third of the map is displaying. This is because a resize trigger needs to be implemented. My question is how do I implement the google.maps.event.trigger(map, \'resize\')? Where do I place this little snippet of code?

Here is my test site. Click on the Google Map button to see the problem at hand. http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

The Reveal Model script:

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

My Google Map 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 holds the Google 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>

UPDATE 2018-05-22

With a new renderer release in version 3.32 of Maps JavaScript API the resize event is no longer a part of Map class.

The documentation states

When the map is resized, the map center is fixed

The full-screen control now preserves center.

There is no longer any need to trigger the resize event manually.

source: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, \"resize\"); doesn\'t have any effect starting from version 3.32

回答1:

There were actually a couple of problems with your source code.

The initialize() function is created, but never called
The $(document).ready should be called after jQuery us loaded
The map should be a global variable (like @Cristiano Fontes said) and not a var map
(Important) The click event is never called. You're trying to combine the two methods Reveal from Zurb provides to open a dialog (one with JS, one with only HTML). You need to use the only JS method.
You're using the wrong ID (#myModal1 is never located in the HTML).

And now: Download the solution (Please provide us with a download/JSFiddle next time, so we don't need to create this ourselves).

Hope it helped!

回答2:

Just add it here

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

BUT you need to put the map as a global variable, so lose the var here

<script type="text/javascript">
   function initialize() {
     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);
 }

 </script>

回答3:

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
                google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
                    google.maps.event.trigger(map, 'resize');
                });
});

回答4:

Didn't found how to leave a comment for the last answer, but +1 for Cristiano Fontes help! It worked. In my case:

<script type="text/javascript">    

$('div.map-box').hide();
$('li.map').mouseover(function(){
    $('div.map-box').show();
    google.maps.event.trigger(map, 'resize');
});

</script>

来源：https://stackoverflow.com/questions/13059034/how-to-use-google-maps-event-triggermap-resize

标签

javascript