Включен Google Maps JavaScript API несколько раз + initMap не является функцией (недопустимое значение)

Question

Я встроил Google Map API (Javascript) в свою страницу. Однако карта загружается только после того, как я обновляю страницу один раз.

Когда я проверяю консоль, в Google Maps возникают две ошибки.

❌You have included the Google Maps JavaScript API multiple times on this page. 
js?key=<my_key>&callback=initMap:140 
This may cause unexpected errors.

❌Uncaught (in promise) 
xd {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵    at new xd (https://maps.googleapis.com/<my_key>&callback=initMap:138:113"}
message: "initMap is not a function"
name: "InvalidValueError"
stack: "Error↵    at new xd

1) Я думаю, что не сделал этоговызывать API несколько раз, но почему-то появляется сообщение об ошибке.

2) Что касается второго, я понимаю, что я использую скрипт src (из документации), который включает функцию initMap, хотяЯ еще не определил это. Я видел пример из документации, но я не уверен, как мне использовать его в этом случае.

Show.html.erb

<div id="map"
  style="width: 100%;
  height: 300px;"
  data-markers="<%= @markers.to_json %>"
></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_API_BROWSER_KEY'] %>&callback=initMap"
  type="text/javascript"></script>

javascript / packs / map.js

import GMaps from 'gmaps/gmaps.js';

const mapElement = document.getElementById('map');
if (mapElement) {
  const map = new GMaps({ el: '#map', lat: 0, lng: 0 });
  const markers = JSON.parse(mapElement.dataset.markers);
  map.addMarkers(markers);
  if (markers.length === 0) {
    map.setZoom(2);
  } else if (markers.length === 1) {
    map.setCenter(markers[0].lat, markers[0].lng);
    map.setZoom(14);
  } else {
    map.fitLatLngBounds(markers);
  }
}

Application.html.erb

     <%= yield %>
      <%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?libraries=places&key=#{ENV['GOOGLE_API_BROWSER_KEY']}" %>
      <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
      <%= javascript_pack_tag 'application' %>
      <%= javascript_pack_tag "map" %>

Answer 1

Вы включаете Google Maps API дважды, один раз в Show.html.erb, который будет загружен в Application.html.erb, я полагаю, и там вы снова получаете JavaScript Google Maps API во второй раз. В сообщении об ошибке указывается, что в строке 140 он включен второй раз, и это файл с initMap, который находится внутри Show.html.erb, который, вероятно, включен в индекс и / или Application.html.erb, поэтому я предлагаю поискатьв источнике страницы, чтобы получить полное представление HTML последней загруженной страницы, и там, в строке 140, вы, вероятно, увидите второе включение

Во-вторых, если функция еще не объявлена, вы НЕ ДОЛЖНЫ вызывать ее, так что теперь выЯ вызываю initMap, но эта функция не существует. Поэтому начните с удаления сценария, включенного в Show.html.erb, или удалите выход в Application.html.erb, а также удалите вызов initMap, пока карта не будет работать, как предполагается, затем перейдите к объявлению initMap.

JS будетпрекратите загрузку или работу, если возникнет серьезная ошибка, поэтому, если оба раза включить API и вызвать несуществующую функцию, возникнут проблемы.

Убедитесь, что API загружен перед использованием карты илиAPI вызывается, и поскольку JS не блокирует синхронизацию, дождитесь готовности документа, прежде чем что-либо предпринимать.

Редактировать: вы также уверены, что при обновлении он не поддерживает API Карт Google? Таким образом, вы обновляете полную страницу или просто ее часть?