Darren Bachan Darren Bachan - 1 year ago 83
jQuery Question

Google Map losing its long/lat in Bootstrap tabbed interface

I am using ACF's Google Map to load a map on my page. I pretty much copied everything exactly and slightly modifying the map js with more options on it for styling purposes. I had to change mainly this part in order for the map to load:

$('a[href="#directions"]').on('shown.bs.tab',function(){
$('.hotel-map').each(function(){
// create map
map = new_map( $(this) );
google.maps.event.trigger(map, 'resize');
});
});


Using their doc ready wasn't working, the map would appear as a grey box. The code change above produces a map, however, once I click onto another tab and then back onto the tab that holds the map, the longitude and latitude seems to disappear. It loads a map that is somewhere way off.

Here's the full js code.

EDIT
This is what I updated the code to:

$(document).ready(function(){

$('.hotel-map').each(function(){
// create map
map = new_map( $(this) );
});

});

$('a[href="#directions"]').on('shown.bs.tab',function(){
// popup is shown and map is not visible
google.maps.event.trigger(map, 'resize');
center_map( map );
});

Answer Source

After you have triggered the map resize call the center_map(map); function (which is in the code you linked) which will center the map to your markers.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download