Google Maps and jQuery Tabs

Question

I have slight problem with Google maps included in simple jQuery Tabs.

Below I pasted the code:

jQuery:

$(document).ready(function() {

             


        

Answer 1

I have been struggling with this as well. So I will provide the code which helped me get this done, thanks to the code provided by Fuzz (I'm sorry I can't vote your answer up as I don't have enough reputation...)

I use Advanced Custom Fields for displaying a Google Map. I used the code provided by ACF of the documentation on the acf website and modified the last bit (The "Document ready" part) to be able to show my map using Bootstraps collapse. The div with the map is hidden by the collapse script and when it is shown the javascript for showing the map will be fired. After hiding the map I faced the problem that the maps location settings were gone when showing the map again. With the help of Fuzz's piece of script I got it working correctly. Hopefully this will help others as well.

var hasLoadedMap = false; 
$('#map').on('shown.bs.collapse', function(e){
if(!hasLoadedMap){
$('.acf-map').each(function(){

    render_map( $(this) );

});
 hasLoadedMap = true;
}

});