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"); 
});