Bootstrap tabs + MapPress, trigger resize?

[EyesX]

Hi,

I’m using bootstrap tabs to show MapPress maps. I’m aware of the Google Maps API bug, but not sure how to trigger the resize. I’m far from a JS ninja 😉

Source: http://twitter.github.com/bootstrap/javascript.html#tabs

If I would trigger a resize on a manually added map using bootstrap, it would look something like this (working example):

$('#showMap').on('shown', function (event) {
google.maps.event.trigger(map, 'resize');
});

Where would mapp0.resize(); fit in to the above?

[Chris]

Hi,

You should be able to use either of the snippets below.  The only difference is the MapPress function re-centers the map after resizing it.

You can remove the ‘alert’ line once it seems to be working:

$(‘#showMap’).on(‘shown’,function(event){
alert (“resizing”);
mapp0.resize();
});

Or:

$(‘#showMap’).on(‘shown’,function(event){
alert (“resizing”);
google.maps.event.trigger(mapp0.getMap(),‘resize’);
});

I hope that helps!

[EyesX]

Thanks for your quick answer Chris.

Had already tried the first one, turns out I had other JS conflicts messing things up (don’t debug tired). So the first one will work fine with bootstrap tabs 🙂

[Author]

Posts