谷歌地图没有显示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脚本时，即使我从不使用它，也必须包含该回调。没有它，它没有完全工作。不知道为什么。