Google map's marker not center after resize on bootstrap tab

Question

I bought a geolocation map script and when applied to bootstrap tab it will only shown small top left span. I added resize to overcome it.

$(document).ready(function() { $(‘a[href=”#tab2”]’).click(function(e) {    setTimeout(initialise, 1000); }); </script>

function initialise() {
    var myMap = document.getElementById('map-myid1');
    google.maps.event.trigger(myMap, 'resize');
};
});

The problem I am facing is the marker of map not center, it will hide left outside of map. How to fix it?

See in real action

Answer 1

In bootstrap 3.x.x, this script will help:

    var map;
    google.maps.visualRefresh = true;     // Enable the visual refresh
    function initialize() {
          // map initialization code 
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    $(function () {
        $('a[href="#Location"]').on('shown.bs.tab', function(e) {
            lastCenter=map.getCenter();
            google.maps.event.trigger(map, 'resize');
            map.setCenter(lastCenter);

        });
    });

where a[href="#Location"] is the anchor selector of the tab.

Answer 2

I checked your page source and found that you're using setTimeout(initialise, 1000); Therefore it is bit slow to show map. Try replacing the below code.

$(document).ready(function() {
        $('a[href="#tab2"]').click(function(e) {
            initialise();
        });

Answer 3

Try this:

var map = null;

var center = null;

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

function initMap() 
{
    map = new google.maps.Map(document.getElementById("Your div id"), 
    {
       center: new google.maps.LatLng("mycenter"),
       zoom: 10,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
    });

    center = bounds.getCenter();

    map.fitBounds(bounds);
}

Answer 4

I had the same problem with Google Maps and Bootstrap Tab plugin.

I used the 'shown' event to initialize google map in tab instead of the 'click' event.

$('a[href="#tab2"]').on('shown',function(e) {
    // Initialized once the google map
    // ...
    // ...

    // use this to redraw google map when current tab is shown.
    google.maps.event.trigger(document.getElementById('Your div id'), 'resize');
});