Подтвердить что ты не робот

Предотвращение Google Maps JS, выполняющегося несколько раз, вызванное Rails Turbolinks

В настоящее время я работаю над приложением Rails, которое получает следующую ошибку:

Вы включили API Карт Google несколько раз на этой странице. Это может вызвать непредвиденные ошибки.

После небольшого исследования я обнаружил, что Turbolinks вызывает проблему. При нажатии кнопки link_to все элементы DOM, созданные картами Google, сохраняются в DOM. Когда новая страница отображается, добавляется еще один набор элементов DOM карты Google, вызывающий дубликаты и ошибку.

Я мог бы исправить это очень быстро, просто добавив '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 %>
4b9b3361

ОТВЕТЫ

Ответ 1

Вместо <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.

Ответ 2

Добавление data-turbolinks-eval="false" в тег script покажет, что 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

Работал в нашем случае, где все наши теги script находились в <head> в соответствии с документами turbolinks.

Ответ 3

Попробуйте это тоже....

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

И помните, что все google script должны остаться после 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

Ответ 4

Я столкнулся с той же проблемой, к сожалению, это может не помочь вам после стольких месяцев.

Я переехал:

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

в теге head после <% = csrf_meta_tags% > и перемещен:

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

после тега /body.

При этом я решил эту проблему:

Вы включили API Карт Google несколько раз на этой странице. Это может вызвать непредвиденные ошибки.

Добавлен data-no-turbolink в ссылку в навигационной панели, на странице, где у меня есть карта. Это помогло мне использовать turbolinks на всех страницах без этой ошибки, а также позволить мне генерировать карту, когда эта страница была доступна.