ACF Google Maps with Bootstrap Tabs WordPress

• SOLVED

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

[[LINK href="http://www.sardiniadreamvillas.com/ville/villa-quattro/"]]site web[[/LINK]]

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?

Answers (1)

2015-06-24

timDesain Nanang answers:

have you try this snippet?
[[LINK href="http://www.bootply.com/102241"]]http://www.bootply.com/102241[[/LINK]]
or
[[LINK href="http://www.bootply.com/102479"]]http://www.bootply.com/102479[[/LINK]]

---

Davide Pantè comments:

Yes, but I have to apply it to my Javascript code, but do not know how.
I can not use that code, because the field use Google Maps ACF

---

timDesain Nanang comments:

ups i'm sorry,
are you using single marker?

---

Davide Pantè comments:

I used Single Marker and Multiple Marker

Single Marker this:

[[LINK href="http://www.sardiniadreamvillas.com/ville/villa-quattro/"]]single marker[[/LINK]]

Multiple Marker this:
[[LINK href="http://www.sardiniadreamvillas.com/ville/"]]multiple marker[[/LINK]]

---

timDesain Nanang comments:

I got message:

406
Not Acceptable

This request is not acceptable

---

Davide Pantè comments:

I not have this problem

---

timDesain Nanang comments:

use the following code (tested and working)
1. remove <strong>data-toggle="tab"</strong> from tab, and activate using javascript
<ul class="nav nav-tabs" role="tablist" id="tab-menu">
<li role="presentation" class="active"><a href="#slide">SLIDESHOW</a></li>
<li role="presentation" class=""><a href="#gallery">GALLERIA</a></li>
<li role="presentation" class=""><a href="#maps">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">
<?php
$location = get_field('your_acf_gmap_field_name'); //
if( !empty($location) ):
?>
<div class="acf-map">
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
</div>
<?php
endif;
?>
</div>
</div>


2. change the latest part of your js to this one:

$(document).ready(function(){
$('#tab-menu a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})

$('a[href="#maps"]').one('click', function() { // http://api.jquery.com/one/
$('.acf-map').each(function(){
render_map( $(this) );
});
});
});