執行多次阻止谷歌地圖JS造成的Rails Turbolinks

我目前正在對越來越以下錯誤Rails應用程序：執行多次阻止谷歌地圖JS造成的Rails Turbolinks

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

一點點研究，我發現，Turbolinks是造成問題之後。點擊link_to時，Google地圖創建的所有DOM元素都保留在DOM中。當一個新頁面被渲染時，另外一組Google Map DOM元素被添加，導致重複和錯誤。

我可以通過簡單地將'data-no-turbolink' => true添加到我的link_to來解決這個問題，但是這會使使用Turbolinks的目的失敗，因爲它會強制刷新。

我想知道是否有一個潛在的解決方法來停止這種重複而不關閉Turbolinks？

map.js：

var initMap = function initMap() { 

    if (typeof mapLatLng != "undefined") { 

    // we can use this to set the map zoom 
    // in different places. 
    // use: window.setZoom = 12; 
    if (typeof setZoom ==! "undefined") { 
     var mapZoom = setZoom; 
    } else { 
     var mapZoom = 14; 
    } 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: mapZoom, 
     center: mapLatLng, 
     disableDefaultUI: true, 
     scrollwheel: false 
    }); 

    var markerSVG = { 
     path: 'M1152 640q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm256 0q0 109-33 179l-364 774q-16 33-47.5 52t-67.5 19-67.5-19-46.5-52l-365-774q-33-70-33-179 0-212 150-362t362-150 362 150 150 362z', 
     fillColor: '#f32e74', 
     fillOpacity: 1, 
     strokeWeight: 0, 
     anchor: new google.maps.Point(870,1650), 
     scale: (0.02, 0.02) 
    }; 

    var mapMarker = new google.maps.Marker({ 
     position: map.getCenter(), 
     map: map, 
     icon: markerSVG, 
    }); 
    } 
}

觀點：

<% if @job.address.latitude && @job.address.longitude %> 
    <%= javascript_tag do %> 
    window.mapLatLng = {lat: <%= @job.address.latitude %>, lng: <%= @job.address.longitude %>}; 
    <% end %> 
    <% content_for :js do %> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap"></script> 
    <% end %> 
<% end %>

來源

2015-10-14 Thomas Taylor

我曾面臨同樣的問題，不幸的是，這可能是這許多個月後沒有對您有所幫助。

我感動：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places"></script>

在頭標籤後<％= csrf_meta_tags％>，和移動的：

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

後/體標籤。

這樣我解決了這個問題：

您已經包括此頁面上的谷歌地圖API多次。這可能會導致意外的錯誤。

添加data-no-turbolink到導航欄中的鏈接，即我已映射的頁面。這幫助我在沒有錯誤的情況下在所有頁面中繼續使用turbolink，並且讓我在訪問該頁面時生成地圖。

來源

2016-01-31 00:39:37 petrified

這個解決方案對我不起作用 – sixty4bit

還有上面的問題上面沒有解決這個問題 –

添加data-turbolinks-eval=false到腳本標籤解決問題

見turbolinks寶石的碼頭更多細節 https://github.com/turbolinks/turbolinks-classic#evaluating-script-tags

來源

2016-06-16 19:47:17 kashlo

這個刪除了「錯誤」但是沒有加載地圖API的每一次，你可以看到它在頁面刷新上工作，但沒有頁面加載 –

這個解決方案似乎對我有用。 –

試試這個太....

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

而且remeber，所有谷歌的腳本都留的TurboLink後，像這樣：

= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' 
= javascript_include_tag 'https://maps.googleapis.com/maps/api/js', 'data-turbolinks-track': 'reload' 
= javascript_include_tag 'gmap', 'data-turbolinks-track': 'reload'

多見於：https://github.com/turbolinks/turbolinks

來源

2016-09-15 03:49:57

而不是<script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap"></script>使其成爲定期<script></script>標籤，並添加下面的下面的initMap函數：

if(window.google){ 
    initMap(); 
} else{ 
    $.ajax('https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap', { 
    crossDomain: true, 
    dataType: 'script' 
    }); 
}

如果你不使用jquery，那麼只需改用XMLHttpRequest。

來源

2017-01-13 07:29:18

這是我認爲最好的方式.. – Abhilash

將data-turbolinks-eval="false"添加到腳本標記將告訴turbolinks不要重新評估它。

<script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap" data-turbolinks-eval="false"></script>

見https://github.com/turbolinks/turbolinks#working-with-script-elements

曾在我們的例子中，我們的所有腳本標記均<head>按turbolinks文檔。

來源

2017-02-23 20:05:27 dft

這爲我解決了它 – gwalshington

執行多次阻止谷歌地圖JS造成的Rails Turbolinks

回答

相關問題