HowTo: Googlemaps outside 'active' Bootstrap Tab

[SmaRTeY]

Hi,

if you, like me, have a theme that uses 'tabs' on item page and you have a location tab I experienced the google map NOT correctly showing when using an other tab than the 1st tab. I have searched the internet and found a lot of people are experiencing the same issue and luckily some have been able to create solutions!

Now, in my case I use the following javascript code that enables me to use Googlemaps map in the last tab which is inactive when page is visited/opened.
When user clicks on location tab it now shows the map correctly so I am VERY happy and wanted to share this solution

1st make sure the tab (pill) that carries the GoogleMaps map has the following id:

Code: [Select]

id="Gmap"So in html the whole line looks similar to this line which is used in Boxer theme:

Code: [Select]

<li><a id="Gmap" href="#location" data-toggle="tab"><?php _e('Location', 'boxer'); ?></a></li>
Put the following javascript in the page underneith the tabular html:

Code: [Select]

<script>
$("#Gmap").on('shown.bs.tab', function() {
lastCenter=map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(lastCenter);
});
</script>

That's it!

When page opens for first time, page loads fine and my active tab is shown. When user now clicks on Location tab the Google map is displayed AND centered the way it initially was displayed when using maps on Active tab.

Hope this helps others with similar challenge

Regards,
Eric