谷歌地圖沒有顯示API V3或顯示非常緩慢

Question

我有一段時間試圖讓基本的谷歌地圖出現。我一直在堆棧溢出幾個小時，迄今沒有任何成功。我得到的最接近的是地圖加載四分之一平方，左上角。但是，如果您嘗試拖動，縮放等，它會像地圖的其他部分變成灰色。有幾次，使用相同的代碼，地圖將完全加載，但僅在很長時間之後才能加載（不確定確切的時間，但> 5分鐘）。

在我的模板我有

<div id="map" style="width: 500px; height: 400px;"></div> 

然後在我的骨幹視圖

$.getScript('http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback')     
    window.gMapsCallback = function(){           
      var myLatlng = new google.maps.LatLng(-34.397, 150.644); 
      var mapOptions = { 
       zoom: 8, 
       center: myLatlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById("map"), 
       mapOptions);      
    } 

任何想法可能會發生什麼？我也歡迎任何關於將谷歌地圖加載到骨幹視圖的方式的建議。

Answer 1

好的，結果是有很多問題，包括在Bootstrap選項卡中嵌入地圖，不包括回調，定義div的高度和寬度，設置一個小的延遲來加載地圖，以及設置css屬性爲地圖。愛。我最終的解決方案竟然是：

在模板

<script src='http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback'></script> 
<div id="map" style="width: 500px; height: 400px;"></div> 

在樣式表

#map img { 
    max-width: none; 
} 
#map label { 
    width: auto; display:inline; 
} 

中的骨幹查看

setTimeout(function(){ 
       var myLatlng = new google.maps.LatLng(53.1, -2.44); 
       var mapOptions = { 
        zoom: 8, 
        center: myLatlng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       var map = new google.maps.Map(document.getElementById("map"), 
        mapOptions); 
       // Create marker 
       var marker = new google.maps.Marker({ 
        map: map, 
        position: new google.maps.LatLng(53.1, -2.44), 
        title: 'The armpit of Cheshire' 
       }); 

       // Add circle overlay and bind to marker 
       var circle = new google.maps.Circle({ 
        map: map, 
        radius: 10000, // metres 
        fillColor: '#AA0000' 
       }); 
       circle.bindTo('center', marker, 'position'); 
       google.maps.event.trigger(map, "resize"); 
       map.setZoom(map.getZoom()); 
      }, 100); 

痛苦。請注意，當我調用gmaps腳本時，即使我從不使用它，也必須包含該回調。沒有它，它沒有完全工作。不知道爲什麼。