Question

我有一段时间试图让基本的谷歌地图显示出来。我已经在Stack Overflow上工作了几个小时，到目前为止还没有取得任何成功。我得到的最接近的是地图加载1/4的正方形，左上角的四分之一。但是如果你试图拖动，缩放等，它就像地图的其他部分一样变灰。在一些情况下，使用相同的代码，地图将完全加载但仅在很长一段时间后（不确定多长时间，但是> 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脚本时，我必须包含回调，即使我从不使用它。没有它，它就没有完全发挥作用。不知道为什么。

Google Map未显示API V3或显示速度非常慢

1 个答案: