Google harita, önyükleme modunun içinde gösterilmiyor

Question

Haritalarım, önyükleme modalının içinde boş görünüyor. Bu sorunun popüler cevabı, harita nesnesinin yeniden boyutlandırma olayını, gösterilen önyükleme eylemi içinde yeniden tetiklemektir. Benim kod ben harita ve LatLng nesneleri olay işleyicisi bunları kullanmak için, başlatıldı var olur zaman bu

$("a[data-toggle='tab']").on("shown.bs.tab", function (e) { 
     switch (e.target.hash) { 
      . 
      . 
      . 
      case "#mapTab": 
       $("#mapTab").show(); 
       google.maps.event.trigger(map, "resize"); 
       map.setCenter(latLng); 

olduğunu. ancak harita hala gösterilmiyor. Başka fikirlerin var mı? ve benim html nedeniyle CSS için

<div class="col-md-7"> 
    <ul class="nav nav-pills nav-justified" role="tablist" id="ucPills"> 
     . 
     . 
     . 
     <li role="presentation"> 
      <a href="#mapTab" aria-controls="mapTab" role="tab" data-toggle="tab"><%= Resources.ConsumptionUnit.Map %></a> 
     </li> 
    </ul> 
</div> 
<div class="tab-content"> 
</div> 
    <div role="tabpanel" class="tab-pane" id="mapTab"> 
    <div id="map"></div> 
    <div id="smallmap"></div> 
</div> 
</div> 

Answer 1

Olabilir altındadır. CSS içinde seçici değiştirmek için unuttum olabilir:

#map { 
height: 400px; 
width: 500px; 
} 

VEYA

deneyin show() arasında geri aramasında yeniden boyutlandırma tetiklemek için: öneri için

$("#mapTab").show('fast', function() { //You can replace "fast" with any other effect or time. 
    google.maps.event.trigger(map, "resize"); 
    map.setCenter(latLng); 
});