ACF Google Maps with Bootstrap Tabs

Question

I have a big problem with my site. I can not bring up the map correctly last TAB bootstrap this page.

http://www.sardiniadreamvillas.com/ville/villa-quattro/

My structure HTML of the tab is similar to this:

<ul class="nav nav-tabs" role="tablist" id="tab-menu">
    <li role="presentation" class="active"><a href="#slide" aria-controls="slide" role="tab" data-toggle="tab" aria-expanded="false">SLIDESHOW</a></li>
    <li role="presentation" class=""><a href="#gallery" aria-controls="gallery" role="tab" data-toggle="tab" aria-expanded="false">GALLERIA</a></li>
    <li role="presentation" class=""><a href="#maps" aria-controls="maps" role="tab" data-toggle="tab" aria-expanded="true">MAPPA</a></li>  
</ul>

<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="slide">...</div>
    <div role="tabpanel" class="tab-pane" id="gallery">...</div>
    <div role="tabpanel" class="tab-pane" id="maps">
        <div class="acf-map"></div>
    </div>
</div>

My javascript code is as follows (taken from ACF)

/*MAPPA*/
(function($) {
function render_map( $el ) {

// var
var $markers = $el.find('.marker');

// vars
var args = {
    zoom        : 16,
    center      : new google.maps.LatLng(0, 0),
    scrollwheel : false,
    mapTypeId   : google.maps.MapTypeId.ROADMAP
};

// create map               
var map = new google.maps.Map( $el[0], args);

// add a markers reference
map.markers = [];

// add markers
$markers.each(function(){

    add_marker( $(this), map );

});
}

function add_marker( $marker, map ) {

// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

// create marker
var marker = new google.maps.Marker({
    position    : latlng,
    map         : map
});

// add to array
map.markers.push( marker );

// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
    // create info window
    var infowindow = new google.maps.InfoWindow({
        content     : $marker.html()
    });

    // show info window when marker is clicked
    google.maps.event.addListener(marker, 'click', function() {

        infowindow.open( map, marker );

    });
}
}

function center_map( map ) {

// vars
var bounds = new google.maps.LatLngBounds();

// loop through all markers and create bounds
$.each( map.markers, function( i, marker ){

    var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

    bounds.extend( latlng );

});

// only 1 marker?
if( map.markers.length == 1 )
{
    // set center of map
    map.setCenter( bounds.getCenter() );
    map.setZoom( 16 );
}
else
{
    // fit to bounds
    map.fitBounds( bounds );
}

}

$(document).ready(function(){
$('.acf-map').each(function(){
    render_map( $(this) );
});
$('a[href="#maps"]').on('shown', function(e) {
    google.maps.event.trigger(render_map, 'resize');
});

});

})(jQuery);

I added at the end of this code, how to search on the internet:

$('a[href="#maps"]').on('shown', function(e) {
    google.maps.event.trigger(render_map, 'resize');
});

But I have not been successful. Still does not work properly.

Any suggestions please?

Answer 1

There are two problems the first is linked to the fact that the tab that contains the map is not visible in the startup phase. You have tried to solve this problem with the resize but I think you have to indicate the variable map mapand `` do not call function that way render_map

  google.maps.event.trigger (map, 'resize');

It 'still more desirable that you enter the call of the initialization of the map through the onclick event of the tab that displays the map, for example if the initialization function is called showMap

   <div id = 'scheda_mappa' class = 'tab_item' onclick = 'setMapPrg ();'>

This way you're sure to see the map only when the tab is visible.

In addition there is a problem on the coordinates of the example that you have indicated, the coordinates are in full Atlantic Ocean off the coast of West Africa will see a blue map. You can give it a try resizing the page manually.

Answer 2

Yes, for Bootstrap tab I have resolved same ACF map issue.

You can render that map at one click event of tab. Ex:

$('#a-location').one('click',function(){
 $('.acf-map').each(function(){
    render_map( $(this) );
            });
 });

});

In above code one change I had mad that "$('#a-location').one('click',function(){" that was before "$('#a-location').on('click',function(){".

You can also implement this was