准備好文檔后加載gmap

Question

當用戶單擊按鈕時，我使用此函數生成我的gmap

function getGMap(id_map,lat,lng) {

        var mapOptions = {
          center: new google.maps.LatLng(lat, lng),
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById(id_map),
            mapOptions);

        marker = new google.maps.Marker({
            map:map,
            //animation: google.maps.Animation.DROP,
            position: new google.maps.LatLng(lat, lng),
            icon: "../imgmdg/icons/map_pin.png"
        });
}



$(".toggleMap").click(function(){

       var id_map=$(this).attr('data-idmap');
       var lat=$(this).attr('data-lat');
       var lng=$(this).attr('data-lng');
       var status=$(this).attr('data-status');

       if(status=="0") { 

           console.log(id_map);
           console.log(lat);
           console.log(lng);
           $("#"+id_map).html('');
           getGMap(id_map,lat,lng); 


           $(this).attr('data-status','1');

       }

});

觸發器：（第二個“ li”中的toggleMap類）

 <ul class="nav nav-tabs tabsFixBorder">
      <li class="active"><a href="#<?=$menu->id()?>tab1" data-toggle="tab" class="tab1">Men&ugrave;</a></li>
      <li><a href="#<?=$menu->id()?>tab2" data-toggle="tab" class="tab2 toggleMap" data-idmap="map_<?=$menu->id()?>" data-lat="<?=$restaurant->lat()?>" data-lng="<?=$restaurant->lng()?>" data-status="0">Profilo</a></li>
    </ul>

在我的頁面中有一些像這樣的div：

<div id="map_1" class="gmap_container"></div>
<div id="map_2" class="gmap_container"></div>
<div id="map_3" class="gmap_container"></div>

這是我的CSS：

html{
    font-family: Arial, Helvetica, Verdana; 
    font-size: 12px; 
    color: #2d2929;    
    height: 100%;
}
body {
    height: 100%;
    min-height: 100%;
    position: relative;
    background-image: url('../imgmdg/pattern/pattern.jpg'); 
}
.gmap_container{
    display: block;
    /*tried with height:100% as well*/
    height:200px;
    width:100%;
    background-color: #fff !important;
    margin: 0px;
    padding-bottom:10px;
}

它僅對第一次單擊有效。單擊一次后，地圖有問題（它僅加載地圖的一部分），這是問題的屏幕截圖： http : //postimg.org/image/7apl01wn7/

謝謝大家的建議

Answer 1

最終，我找到了解決我問題的方法：最后，我使用了bootstrap選項卡作為地圖的容器。 技巧是在加載選項卡后加載地圖（例如，我使用了引導事件“顯示”）

$('a[data-toggle="tab"]').on('shown', function (e) {
    getGMap(id_map,lat,lng);
});

希望這個幫助