Google地圖在加載時的位置不正確

Question

我遇到了iframed Google地圖的問題。基本上，這個位置是不正確的，但並非總是如此。我認爲這個問題可能與地圖處於隱藏的div中有關，後者會顯示該div。

任何人都可以驗證這確實是一個問題，或提出一個解決方案呢？我對地圖沒有太多的控制，因爲它是從別的地方來的。

我試着給iframe一個ID，然後我在google.maps.event.trigger(map, "resize");的目標上顯示父容器的函數，但無濟於事。

編輯
按照要求，這裏的地圖：

<iframe width="450" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;t=m&amp;ll=56.084298,11.074219&amp;z=6&amp;output=embed"></iframe> 

正如你所看到的，有沒什麼特別的地方。它應該顯示丹麥，但它有時會顯示德國和波蘭。我相信這些都是很好的地方，但客戶很少使用它。

Answer 1

我也可以證實這個問題。我不認爲它與你的隱藏div有關，因爲我也有固定元素的問題。

問題在於，您希望地圖居中的地方因某種原因最終位於iframe的左上角。我認爲這是因爲在谷歌方面，地圖大小調整事件在知道iFrame的完整大小之前發射得太早。

試試這個，到目前爲止，它爲我的作品：

1. 刪除IFRAME SRC標籤。

2. 嵌入的JavaScript代碼下面的iframe以下地方：

   <script type='text/javascript'> 
       jQuery("iframe#headerMap").attr("src", "http://maps.google.com/maps/ms?etc etc...."); 
   </script> 
   

因爲它加載的iframe後的地圖是存在的。如果將來我仍然遇到問題，我會嘗試在上面的代碼中添加一個簡短的延遲，使其在文檔加載後運行。

Answer 2

「resize」事件將地圖對象作爲參數，而不是id。由於您在iframe中使用maps.google.com，因此我不相信可以訪問實際的地圖對象。

不幸的是，我認爲最好的答案是切換到使用Google Maps v3 API的簡單實現，而不是在iframe中嵌入maps.google.com。這將允許您在需要時正確觸發「調整大小」，因爲您可以訪問地圖對象。

這裏的文檔：http://code.google.com/apis/maps/documentation/javascript/tutorial.html

建立一個簡單的實現這樣的例子：http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.html

然後留下您的來電google.maps.event.trigger（地圖， 「調整」）;當你顯示隱藏的容器時。

Answer 3

可以確認我在「選項卡式」div中顯示兩個地圖時遇到過這個問題。即一個div加載隱藏。

我發現問題最簡單的方法就是在複製和粘貼嵌入代碼之前使用一些試驗和錯誤並補償地圖，以補償錯誤的地圖偏移量。但只要記住將外部鏈接（外部鏈接的谷歌地圖）作爲原始的href，否則這張地圖也會被抵消。

Answer 4

簡單的解決方案：

1. 把IFRAME用id = 「地圖」 一個div內部。
2. 不要隱藏div，因爲地圖會產生錯誤。

3. 將div絕對定位，左側爲10.000像素。在這種情況下，地圖不會顯示在屏幕上，但會被加載。 jQuery（'＃map'）。css（{「position」：「absolute」，「left」：「 - 10000px」}）;}};

4. 當您單擊按鈕來顯示地圖地址：

   jQuery('#map').show(); jQuery('#map').css({"position":"static"}); 
   

5. 要隱藏的div地址：

   的jQuery（ '＃圖'），隱藏（）;

Answer 5

我建議加載地圖有一段時間延遲後檢查div是否可見或哪些是要保存地圖。爲我工作

$(document).ready(function() { 
     $('.togglebtn').click(function() { 

if(!$('#map_canvas').is(':visible')){ 
       setTimeout(function(){initialize()}, 500); 
       } 
    }); 
}); 


    //your function 
function initialize() { 


     var mapOptions = { 
      zoom: 3, 
      center : new google.map.LatLng(31.510474,80.352287), 
      center: new google.maps.LatLng(44.510474, 50.352287), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

     var contentSC_PAK = "SoftCircles Pakistan"; 
     ..... 
     ..... 

     and rest of your map code to initialize map 



     }); 

    } 

Answer 6

我建議加載地圖有一段時間後，檢查div是否可見或哪些是要保存地圖。試一試 ！

$(document).ready(function() { 
     $('.togglebtn').click(function() { 

if(!$('#map_canvas').is(':visible')){ 
       setTimeout(function(){initialize()}, 500); 
       } 
    }); 
}); 


    //your function 
function initialize() { 


     var mapOptions = { 
      zoom: 3, 
      center : new google.map.LatLng(31.510474,80.352287), 
      center: new google.maps.LatLng(44.510474, 50.352287), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 

     var contentSC_PAK = "SoftCircles Pakistan"; 
     ..... 
     ..... 

     and rest of your map code to initialize map 



     }); 

    } 

Answer 7

這其中並沒有爲我工作：

jQuery("iframe#headerMap").attr("src", "http://maps.google.com/maps/ms?etc etc...."); 

...所以我必須找到另一種方式來解決這個問題。

我的問題是，我有一個<div>這是display: none，併成爲可見這樣2.5秒這樣的後：

setTimeout(function() { 
    $("#contents") 
    .css({opacity: 0}).fadeIn() 
    .animate({opacity:1}, 1000, function() { 
    }); 
}, 2500); 

而且我想在#contents要顯示的谷歌地圖，並我遇到了同樣的問題，紅色標記在左上角。

因此，我在頁面中添加了一個<div id="map"></div>。

然後，我添加iframe的東西在叫map.php一個PHP文件，我在下面這個jQuery線：

setTimeout(function() { 
    $("#map").load('map.php'); 
}, 2500); 

因此，它裝載了iframe中map.php到DIV與map ID。它工作完美。