two googlemaps, one of them loading gray

Question

I'm trying to place two maps in my website, in toggleable tabs. So when the site is loaded, the active pane map is loaded fine, but when I swap to another tab, it just stay gray:

But if I try it on my smartphone, works fine :S.

Well, here is my code, I hope you can help me:

DIVS:

 <div id="huelva" class="tab-pane fade"> <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" style="padding-top: 10px"> <div id="huelvamap" style="width:100%; height:300px; overflow: visible;"></div> </div> ...

SCRIPT:

 <script> function initMap() { // Create a map object and specify the DOM element for display. var map = new google.maps.Map(document.getElementById('ceutamap'), { center: {lat: 35.8889515, lng: -5.3535556}, scrollwheel: false, zoom: 12 }); var map2 = new google.maps.Map(document.getElementById('huelvamap'), { center: {lat: 37.2709008, lng: -6.9571999}, scrollwheel: false, zoom: 12 }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=[api_key]&callback=initMap" async defer></script>

If it's needed I will upload the site, post the link!

Here is the link to the site

Thanks in advance

@Coder there is nothing wrong in console, and if I check the Net section, when I change the panel, nothing new happens!! I will place the link to the site, if you wanna check — rubitops
– rubitops, Commented Feb 13, 2017 at 21:02
Sure link will always help. One of the key reasons why this happens might be a result of your API key. You can clearly see that it is getting to the Google Maps API but not drawing the map. Check if your key is valid for the domain you are using. If you hold an account with Google for these API's you have to add your domain name to trusted domains in Google account — Coder
– Coder, Commented Feb 13, 2017 at 22:03
@Coder I created a new API key for just this domain, but I just set no restrictions for the key. But still not working :( — rubitops
– rubitops, Commented Feb 13, 2017 at 22:51
Edit: I noticed that the map is being loaded when I move to inspect element. Look at this stackoverflow question stackoverflow.com/questions/23755975/… and stackoverflow.com/questions/12133318/… — Coder
– Coder, Commented Feb 14, 2017 at 15:28

rubitops · Accepted Answer · 2017-02-14 19:25:51Z

Ok thanks to @Coder, who gave me some interesting info that helped me to solve the problem:

The fact is I have to render the map every time the tab is active(or shown), so I added a Id for the tab links and this easy script code:

$(document).ready(function () { $('#mapTab2').on('shown.bs.tab', function () { var map2 = new google.maps.Map(document.getElementById('huelvamap'), { center: {lat: 37.2709008, lng: -6.9571999}, scrollwheel: false, zoom: 12 }); }); $('#mapTab').on('shown.bs.tab', function () { var map = new google.maps.Map(document.getElementById('ceutamap'), { center: {lat: 35.8889515, lng: -5.3535556}, scrollwheel: false, zoom: 12 }); }); });

Now is working fine as you can see on the link!

Best regards

Collectives™ on Stack Overflow

two googlemaps, one of them loading gray

1 Answer 1

Comments

Hot Network Questions