wordpress - ACF Google Maps with Bootstrap Tabs -

i have big problem site. can not bring map correctly last tab bootstrap page.

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

my structure html of tab similar 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 follows (taken 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 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 array map.markers.push( marker );  // if marker contains html, add infowindow if( $marker.html() ) {     // create info window     var infowindow = new google.maps.infowindow({         content     : $marker.html()     });      // show info window when marker 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 markers , create bounds $.each( map.markers, function( i, marker ){      var latlng = new google.maps.latlng( marker.position.lat(), marker.position.lng() );      bounds.extend( latlng );  });  // 1 marker? if( map.markers.length == 1 ) {     // set center of map     map.setcenter( bounds.getcenter() );     map.setzoom( 16 ); } else {     // fit 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 @ end of code, how search on internet:

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

but have not been successful. still not work properly.

any suggestions please?

there 2 problems first linked fact tab contains map not visible in startup phase. have tried solve problem resize think have indicate variable map mapand `` not call function way render_map

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

it 'still more desirable enter call of initialization of map through onclick event of tab displays map, example if initialization function called showmap

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

this way you're sure see map when tab visible.

in addition there problem on coordinates of example have indicated, coordinates in full atlantic ocean off coast of west africa see blue map. can give try resizing page manually.