Google地图只显示部分内容

Question

我所拥有的Google地图只是部分渲染并且居中显示错误的点（它应该以标记为中心）。请看下图：

我们增加更多的细节：

• 它工作正常，在IE
• 它看起来像在FF和Chrome的屏幕截图。
• 在Chrome中IST就开始运行，为我打开了开发者控制台

特别是最后一点是一个我不知道大多数有关。我想打开开发人员控制台重新执行一些JavaScript。

所以：我可以调用一个函数来重新执行JavaScript，开发者控制台的方式呢？

这是代码：

<script type="text/javascript"> 
{literal} 
function initialize() { 
    if (GBrowserIsCompatible()) { 

    var map = new GMap2(document.getElementById("map")); //, { size : {width:600,height:600} } 
    map.addControl(new GLargeMapControl3D()); 
    map.addControl(new GMapTypeControl()); 
    map.addControl(new GScaleControl()); 
    map.setCenter(new GLatLng(51.17689812200107, 9.84375), 5); 
    map.checkResize(); 

    var geocoder = new GClientGeocoder(); 

    function showPoint(lat, lon) { 
     if (lat != "" && lon != "") { 
     var point = new GLatLng(lat, lon); 
     map.setCenter(point, 10); 
     var marker = new GMarker(point, {draggable: true}); 
     GEvent.addListener(marker, "dragstart", function() { 
      // map.closeInfoWindow(); 
     }); 
     GEvent.addListener(marker, "dragend", function() { 
      var newPoint = marker.getLatLng(); 
      $('#lat').val(newPoint.lat()); 
      $('#lon').val(newPoint.lng()); 
      // marker.openInfoWindowHtml("Neue Koordinaten Lat: "+ newPoint.lat() +" Lon: "+ newPoint.lng()); 
     }); 
     map.addOverlay(marker); 
     } 
    } 
    {/literal}showPoint("{$gmap_lat}", "{$gmap_lon}");{literal} 
    } 
} 
{/literal} 

这就是我把DIV：

<fieldset style="-moz-border-radius: 1em; -webkit-border-radius: 1em;"> 
     <legend>Karte</legend> 
     <div id="map" title="Lage von '{$name}'"><br>Die Karte wird geladen...<br><br>Hinweis: Damit dies funktioniert müssen Sie in Ihrem Browser JavaScript aktivieren</div> 
     Falls sich der Marker nicht auf der richtigen Position befinden sollte, bewegen Sie diesen mit Ihrer Maus auf die richtige Position. 
     <br>Länge: <input type="text" id="lat" name="lat" value="{$gmap_lat}"> 
     Breite: <input type="text" id="lon" name="lon" value="{$gmap_lon}"> 
    </fieldset> 

而就在div下面的CSS规则：

Answer 1

发现此问题。 GMaps是在

<div id="step2" style="display:none"> 

但是，似乎一个包含地图的块可能不会隐藏，当GMaps加载时。

所以我改成了这样

<div id="step2"> 

和一切工作。但是，因为我只是想在开始时显示“step1”，所以我会做一个

$('#step2').hide(); 

一旦地图加载完成。

这是Chrome和FF的奇怪行为，但我很高兴它能解决这个问题。谢谢你的帮助。

Answer 2

这可能有助于...

Google Maps not rendering completely on page?

Answer 3

尝试google.maps.event.trigger（map，“resize”）;

Answer 4

我发现通过使用CSS'display'属性（或jQuery hide（）和show（）函数）导致地图的局部视图，在Google地图上使用div执行任何隐藏和显示操作。

而不是'显示'我使用'可见性'（隐藏，可见），一切都很好。我期望的是在弹出窗口中显示地图。然而，即使当其属性设置为隐藏时，'可见性'也会占用空间，但由于我使用'z-index'作为弹出窗口，因此不会影响基础层（0 z-index）。

问候 布罗尼斯瓦夫

Answer 5

我找到符合部分装载谷歌地图的简单解决方案。通常它是由onLoad（）在页面的其余部分（包括地图元素）没有完全加载时被调用引起的。这会导致部分地图加载。解决此问题的一个简单方法是如下更改onLoad正文标记操作：

old: onload="initialize()" 


new: onLoad="setTimeout('initialize()', 2000);" 

这等待2秒。在Google JavaScript访问正确大小的属性之前。 希望这有助于:)

顺便说一句，这是我最javascipt的一部分，如果你徘徊（正是因为在谷歌文档中描述，而是因为我打电话从PHP变量的纬度和经度，因此PHP代码片段:)

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript"> 
     function initialize() { 
     var myOptions = { 
      center: new google.maps.LatLng(<?php echo $my_latitude; ?> , <?php echo $my_longitude; ?>), 
      zoom: 14, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), 
      myOptions); 

      var point = new google.maps.LatLng(<?php echo $my_latitude; ?> , <?php echo $my_longitude; ?>); 
     var marker = new google.maps.Marker({ 
     position:point, 
     map:map })  
    } </script> 

Answer 6

调用初始化（）上pagebeforeshow事件，并尝试这种

jQuery(document).delegate("#page-map", "pageshow", function(event){ 
google.maps.event.trigger(map, "resize"); 
});