CODEWITHSUNDEEP
htmlgoogle-mapstwitter-bootstrap-3
rubitops
rubitops

Reputation: 115

two googlemaps, one of them loading gray

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: enter image description here

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

Upvotes: 1

Views: 81

Answers (1)

rubitops
rubitops

Reputation: 115

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

Upvotes: 1

Related Questions