Ngăn chặn Google bản đồ JS thực hiện nhiều lần do Rails Turbolinks

Question

Tôi hiện đang làm việc trên ứng dụng Rails đó là nhận được lỗi sau:

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

Sau một nghiên cứu nhỏ, tôi phát hiện ra rằng Turbolinks đã gây ra vấn đề. Khi link_to được nhấp, tất cả các phần tử DOM được tạo bởi các bản đồ của Google sẽ được giữ lại trong DOM. Khi một trang mới được hiển thị, một tập hợp các phần tử DOM của Google Map khác được thêm vào sẽ gây ra các bản sao và lỗi.

Tôi có thể sửa lỗi này rất nhanh chóng bằng cách thêm 'data-no-turbolink' => true vào số link_to nhưng điều này đánh bại mục đích sử dụng Turbolinks vì nó buộc phải làm mới.

Tôi đang tự hỏi liệu có cách giải quyết tiềm ẩn nào để dừng trùng lặp này mà không cần tắt Turbolinks không?

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

xem:

<% 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 %> 

Answer 1

tôi đã phải đối mặt với cùng một vấn đề, không may điều này có thể được giúp đỡ không cho bạn sau khi rất nhiều tháng.

tôi chuyển:

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

trong đầu thẻ sau <% = csrf_meta_tags%>, và di chuyển:

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

sau /body thẻ.

Bằng cách đó tôi giải quyết vấn đề này:

Bạn đã bao gồm Google Maps API nhiều lần trên trang này. Điều này có thể gây ra lỗi không mong muốn.

Đã thêm dữ liệu-không-turbolink vào liên kết trong thanh điều hướng, trang mà tôi có bản đồ. Điều này đã giúp tôi tiếp tục sử dụng turbolinks trong tất cả các trang mà không có lỗi đó và cũng như cho phép tôi tạo bản đồ khi trang đó được truy cập.

Answer 2

thêm data-turbolinks-eval=false cho thẻ script giải quyết vấn đề

Xem các bến tàu của turbolinks đá quý để biết thêm chi tiết https://github.com/turbolinks/turbolinks-classic#evaluating-script-tags

Answer 3

Hãy thử điều này quá ....

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

Và hãy nhớ, tất cả google kịch bản phải ở lại sau giờ Turbolink, như thế này:

= 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' 

Xem thêm tại: https://github.com/turbolinks/turbolinks

Answer 4

Thay vì <script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap"></script> làm cho nó một thường xuyên <script></script> thẻ và thêm dòng sau đây của bạn Hàm initMap:

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

Nếu bạn không sử dụng jquery thì chỉ cần sử dụng XMLHttpRequest thay thế.

Answer 5

Thêm data-turbolinks-eval="false" vào thẻ tập lệnh sẽ cho biết turbolinks không đánh giá lại nó.

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

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

Làm việc trong trường hợp của chúng tôi, nơi tất cả các thẻ script của chúng tôi là trong <head> theo turbolinks tài liệu.