谷歌地圖不顯示，直到我刷新

我下面的官方文檔中的簡單說明：當我打開的第一次現場https://developers.google.com/maps/documentation/javascript/tutorial 谷歌地圖不顯示，直到我刷新

，一切工作正常。地圖顯示正常。問題是當我導航到網站的其他部分。在我回到地圖所在的位置後，地圖不顯示。

這裏的基本結構：

<ul> 
    <li><%= link_to "Home", root_path %></li> 
    <li><%= link_to "About", about_path %></li> 
    <li><%= link_to "Contact", contact_path %></li> 
</ul>

的Javascript裏面的「聯繫」：

<script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?key=xxx&sensor=false"> 
    </script> 
    <script type="text/javascript"> 
     function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(-34.397, 150.644), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map-canvas"), 
      mapOptions); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 

<h1>Contact</h1> 
<p> 
    Address & phone number 
</p> 

<div id="map-canvas" style="width: 35em; height: 35em;"/>

所以，如果我打開「首頁」頁面上的網站，然後導航到「聯繫人」，沒有地圖。但是，如果我刷新「聯繫人」網站，則會顯示地圖。什麼可能是一個問題？

謝謝。

EDIT1：

我試圖把我的代碼準備函數內部：

$.getScript('https://maps.googleapis.com/maps/api/js?key=xxx&sensor=false'); 

     var mapOptions = { 
      center: new google.maps.LatLng(-34.397, 150.644), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map-canvas"), 
      mapOptions);

但是，當我這樣做，在這行代碼遊：

center: new google.maps.LatLng(-34.397, 150.644),

來源

2013-11-04 Cristiano

你用導軌4頁面加載後，我已經解決了這個觸發代碼？ – apneadiving

是的，我正在使用Rails 4. – Cristiano

沒問題，所以它由於turbolinks，把谷歌腳本放在你的佈局有一個快速修復。順便說一句，我剛剛發佈了新版本的gmaps4rails，它可以幫助！ – apneadiving

很難說出錯的可能性。當你說你瀏覽到網站的其他部分時，它們是否都包含在一個HTML文件中？或者也許他們是用AJAX動態加載的？嘗試在地圖顯示不正確時觸發地圖上的大小調整事件。

google.maps.event.trigger(map, 'resize');

或者這可以當你「導航」，以地方在那裏它應該是，但沒有顯示後調用。

來源

2013-11-04 17:46:21

它們並不全都包含在一個HTML文件中。問題是地圖每次點擊其他鏈接都會消失。只刷新地圖顯示地圖的網站。 – Cristiano

不幸的是，google.maps.event.trigger（map，'resize'）;沒有幫助。 – Cristiano

您是否在使用Rails 4並啓用了turbolinks？如果是這樣，當您從主頁移動到聯繫頁面時，load事件不會觸發 - 但觸擊刷新會完全加載整個頁面，因此加載事件會觸發。這與你所描述的行爲是一致的。

嘗試除了在腳本塊的末尾添加此，到的'load'行：

google.maps.event.addDomListener(window, 'page:load', initialize);

來源

2013-11-04 17:47:54

謝謝，但它沒有任何區別。我仍然需要刷新。 – Cristiano

它可能是該窗口不是'page：load'事件的正確範圍。 Akshat引用的jQuery $（document）.ready和$（document）.on（'page：load'）事件偵聽器將是合適的觸發器 - 您可以將Google建議的偵聽器替換爲jQuery偵聽器。 –

我嘗試了很多組合，但它不起作用。我更新了我的問題。 – Cristiano

的問題似乎是與你的turbolinks，綁定你的所有活動中一個函數調用功能document.ready以及document.page:load事件。

$(document).ready(PageSetupFunction); 
$(document).on("page:load", PageSetupFunction);

其實這裏document.ready將在刷新頁面時被調用。但是，如果您從另一個鏈接訪問此頁面，則會調用page：load事件。

來源

2013-11-04 17:49:56 Akshat

我嘗試了許多組合，但無法使其正常工作。我將這段代碼放在ready函數中：$ .getScript（'https://maps.googleapis.com/maps/api/js?key=xxx&sensor=false'）; VAR的MapOptions = { 中心：新google.maps.LatLng（-34.397，150.644）變焦：8，的mapTypeId：google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map（document.getElementById（「map-canvas」）， mapOptions）; - 問題是，當我把代碼，沒有任何工作，甚至其他Javascript功能，以前工作不工作。 – Cristiano

雖然我沒有與谷歌地圖工作，但我面臨同樣的問題谷歌圖表API。看起來你的JavaScript有一些錯誤，它阻止了它旁邊的所有其他腳本執行，你必須在瀏覽器控制檯中檢查它 – Akshat

是的，錯誤在這裏：center：new google.maps.LatLng（-34.397,150.644）。我不知道爲什麼這行是一個問題，如果它是來自谷歌的C/P。 – Cristiano

只是提供了一個延遲到初始化谷歌地圖的功能，它會工作得很好。

setTimeout(function() { 
    //code for initializing the google map 
}, 1000);

來源

2015-04-16 09:30:44

設置超時時間爲6秒爲我工作。地圖越大需要的時間越長，因此請根據您的地圖大小來衡量您的超時時間。

來源

2015-08-28 16:34:44 Rome

使用jQuery

$(document).on("pageshow","#contact",function(){ 
    initialize(); 
});

來源

2016-10-19 06:13:28 Balibrera

谷歌地圖不顯示，直到我刷新

回答

相關問題