google maps - resizeevent is not firing -
i using meteor-google-map. trying resize map google.map.event.trigger(googlemaps.maps.examplemap , resize)
problem it's not working. map hidden in tab whenever open tab map not shows. tried using resize function not doing anything. can tell me why 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 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() { // can use `ready` callback interact map api once map ready. googlemaps.ready('examplemap', function(map) { // add marker 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 page loads tab open. when user clicks on link inside li tab opens. first time open cannot see map after resizing browser map loads. tried trigger resize event myself didn't work out either
it looks not passing in correct instance maps lib requires
google.maps.event.trigger(googlemaps.maps.examplemap.instance , 'resize')
Comments
Post a Comment