Google maps 谷歌地图未显示API V3或显示速度非常慢

我花了很长时间才找到一个基本的谷歌地图。我已经在堆栈溢出上工作了几个小时，到目前为止还没有取得任何成功。我得到的最接近的是地图装载了1/4的正方形，即左上角的四分之一。但是如果你尝试拖动、缩放等，它就会像地图的其他部分一样变成灰色。在某些情况下，使用相同的代码，映射将完全加载，但仅在很长一段时间后加载（不确定确切的加载时间，但>5分钟）

在我的模板中，我有

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

---

你知道会发生什么吗？我也愿意接受任何关于将google地图加载到主干视图的更好方法的建议。

好的，结果发现有很多问题，包括在引导选项卡中嵌入地图，不包括回调，定义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>

在主干视图中

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脚本时，我必须包含回调，即使我从未使用过它。没有它，它就不能完全工作。不知道为什么。

为什么这个问题被否决？

#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);