CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3meteor
Gardezi
Gardezi

Reputation: 2842

resizeevent is not firing

I am using meteor-google-map. I am trying to resize the map like this google.map.event.trigger(GoogleMaps.maps.exampleMap , resize) but the problem is it's not working. My map is hidden in a tab so whenever I open that tab the map does not shows. I tried using the resize function but that is also not doing anything. Can anybody tell me why it is not displaying

CODE ADDED

map HTML 

<body>
<div class="row">
<ul>
  <li><a href="#what">What</a></li>
  <li><a href="#where">Where</a></li>
</ul>
</div>

<div id="what" class="col s12">
</div>
 <div id="where" class="col s12">
  <div class="map-container">
    {{> googleMap name="exampleMap" options=exampleMapOptions}}
  </div>
 </div>
</body>

map.js 

Template.body.helpers({
  exampleMapOptions: function() {
    // Make sure the maps API has loaded
    if (GoogleMaps.loaded()) {
      // Map initialization options
      return {
        center: new google.maps.LatLng(-37.8136, 144.9631),
        zoom: 8
      };
    }
  }
});

Template.body.onCreated(function() {
  // We can use the `ready` callback to interact with the map API once the map is ready.
  GoogleMaps.ready('exampleMap', function(map) {
    // Add a marker to the map once it's ready
    var marker = new google.maps.Marker({
      position: map.options.center,
      map: map.instance
    });
  });
});
Template.body.event({
   'click .where a':function(){
    debugger;
    google.maps.event.trigger(GoogleMaps.maps.exampleMap , 'resize');
  }
});

When the page loads the what tab is open. When user clicks on where link inside the li the where tab opens. The first time it open I cannot see the map but after resizing the browser the map loads. I tried to trigger the resize event myself but that didn't work out either

Upvotes: 2

Views: 547

Answers (2)

Nath
Nath

Reputation: 6864

It looks like your not passing in the correct instance that the maps lib requires

google.maps.event.trigger(GoogleMaps.maps.exampleMap.instance , 'resize')

Upvotes: 1

duncan
duncan

Reputation: 31922

Firstly, your code is using google.map.event. However the Google Maps namespace is maps not map. i.e. it should be google.maps.event

Secondly, when you call trigger you need to pass the name of the event as a string, i.e. google.maps.event.trigger(GoogleMaps.maps.exampleMap , 'resize').

See:

Upvotes: 1

Related Questions