Google maps (API) inside tabs

Question

I have seen that this is a common problem, but I can't seem to find a solution on my specific project. The first map opens, but when I click the second tab the map opens but it looks like this screenshot

Here is the link http://cotdigtest5.com/contact.php . You can see the problem when you click on the tabs.

The javascript is:

function displayMap1() {
    document.getElementById('map-canvas1').style.display="block";
    initialize1();
}
 function initialize1() {
    var myLatlng = new google.maps.LatLng(6.441648,3.419913);
    var myOptions = {   
        zoom: 14,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map-canvas1"),
                                    myOptions);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    })
 }

function displayMap2() {
    document.getElementById('map-canvas2').style.display="block";
    initialize2();
}
function initialize2() {
    var myLatlng = new google.maps.LatLng(6.441648,3.419913);
    var myOptions = {   
        zoom: 14,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map-canvas2"),
                                    myOptions);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    })
}

<li><a href="#content-1" onclick="displayMap1()">Map 1</a></li>
<li><a href="#content-2" onclick="displayMap2()">Map 2</a></li>

Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates the issue and a description of what you have tried and why it doesn't work for your example. — geocodezip, Aug 10 '15 at 14:06
@EmmanuelDelay I'm using tabs created in jQuery(from scratch). The problem is google maps inside a hidden container. — Klevis Miho, Aug 10 '15 at 15:37
@geocodezip It takes some time to provide a Minimal example. This is a common problem when google maps are inside of hidden divs. — Klevis Miho, Aug 10 '15 at 15:37
I have found a lot of solutions but they didn't work for me. For example there is http://stackoverflow.com/questions/4064275/how-to-deal-with-google-map-inside-of-a-hidden-div-updated-picture . But this doesn't work for me. I have multiple maps — Klevis Miho, Aug 10 '15 at 16:25
@MrNeo I managed to solve it. You have the answer below if you like to use it. — Klevis Miho, Aug 12 '15 at 15:40

score 0 · Answer 1 · answered Aug 12 '15 at 09:06

I managed to find a solution. It doesn't feel right, but works. Basically a the initialize function is run on a fast interval.

var refreshIntervalId;

function displayMap1() {
    document.getElementById('map-canvas1').style.display="block";
    refreshIntervalId = setInterval(function () { initialize1() }, 100);
}
function initialize1() {
    clearInterval(refreshIntervalId);
    var myLatlng = new google.maps.LatLng(6.441648,3.419913);
    var myOptions = {   
        zoom: 14,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map-canvas1"),
                                    myOptions);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    })
}


function displayMap2() {
    document.getElementById('map-canvas2').style.display="block";
    refreshIntervalId = setInterval(function () { initialize2() }, 100);
}
function initialize2() {
    clearInterval(refreshIntervalId);
    var myLatlng = new google.maps.LatLng(6.441648,2.419913);
    var myOptions = {   
        zoom: 14,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map-canvas2"),
                                    myOptions);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    })
}

Google maps (API) inside tabs

1 Answers1