2つのグーグルマップがあり、そのうちの1つがグレーで表示されます。

Question

私は自分のウェブサイトにトグル可能なタブで2つのマップを配置しようとしています。 サイトがロードされたときに、アクティブなペインマップは罰金ロードされているが、私は別のタブにスワップするとき、それはちょうど灰色滞在：

しかし、私は私のスマートフォンでそれをしようとした場合、正常に動作します：S。

まあ、ここに私のコードですが、私はあなたが私を助けることを願って：

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> 

それは私がサイトをアップロードします必要なの場合は、ポストリンク！

Here is the link to the site

事前のおかげで私の問題を解決するために私を助けたいくつかの興味深い情報を与えた@Coder、へ

Answer 1

[OK]を感謝：

を私はすべてのマップをレンダリングする必要がありますされて事実時間タブがアクティブ（または示す）であるので、私はタブリンクのIDを追加し、この簡単なスクリプトコード：

$(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 
    }); 
    }); 
}); 

リンク上に表示されているように、今はうまくいきます！

お礼