CODEWITHSUNDEEP
javascripthtmlgoogle-mapszurb-foundation
Jeremy Flaugher
Jeremy Flaugher

Reputation: 437

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

Upvotes: 18

Views: 75129

Answers (5)

Ilya Semenov
Ilya Semenov

Reputation: 31

As now, google.maps.event.trigger(map, 'resize') does nothing. Like we having mat-dialog containing google map in it and there is the same problem. I`ve found some ways you can handle it:

  1. Init map with a timeout.
  2. Change the size of the parent container after map inits and then change it back.

But as for me, all these ways are pretty bad and I`m looking for something better.

Upvotes: 2

Mir Shakeel Hussain
Mir Shakeel Hussain

Reputation: 517

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

Upvotes: 5

Andrey Davis
Andrey Davis

Reputation: 31

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>

Upvotes: 3

MarcoK
MarcoK

Reputation: 6110

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!

Upvotes: 20

Cristiano Fontes
Cristiano Fontes

Reputation: 5088

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>

Upvotes: 11

Related Questions