防止谷歌地图JS由Rails Turbolinks多次执行 [英] Prevent Google maps JS executing multiple times caused by Rails Turbolinks

问题描述

我目前正在处理收到以下错误的Rails应用：

I'm currently working on Rails app that is getting the following error:

您已多次添加Google Maps API这一页。
这可能会导致意外错误。

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元素，从而导致重复和错误。

After a little research I discovered that Turbolinks was causing the problem. When the link_to is clicked all of the DOM elements created by Google maps are retained within the DOM. When a new page is rendered another set of Google Map DOM elements is added causing duplicates and the error.

我可以通过简单地添加'data-no-turbolink'=>来解决这个问题。 true 到我的 link_to 但是这会破坏使用Turbolinks的目的，因为它会强制刷新。

I could fix this very quickly by simply adding 'data-no-turbolink' => true to my link_to but this defeats the purpose of using Turbolinks as it forces a refresh.

我想知道是否有一个潜在的解决方法可以在不关闭Turbolinks的情况下停止这种复制？

I'm wondering if there's a potential workaround to stop this duplication without turning Turbolinks off?

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

推荐答案

而不是< script async defer src =https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap>< / script> 将其设为常规< script>< / script> 标记并在initMap函数下面添加以下内容：

Instead of <script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap"></script> make it a regular <script></script> tag and add the following below your initMap function:

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

如果您不使用jquery，那么只需使用XMLHttpRequest。

If you aren't using jquery then just use XMLHttpRequest instead.

这篇关于防止谷歌地图JS由Rails Turbolinks多次执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！