Приложение Rails с Google Maps Javascript API работает только при перезагрузке нескольких страниц

Question

Я пытаюсь добавить API Google Maps Javascript в веб-приложение Rails 5.2. У меня есть учетная запись разработчика Google и ключ API с включенным API JavaScript Карт Google. В документации Google приведен пример кода https://developers.google.com/maps/documentation/javascript/tutorial.. Я поместил его в простой HTML-файл с моим API_KEY, и он отлично работает. Но я не могу заставить его работать правильно в Rails. Три важных раздела кода:

1) На моей html странице добавьте div с id = map. Здесь будет отображаться карта.

# app/views/pages/map_page.html.erb
<div id="map"></div>

2) Вызвать Google API с помощью моего ключа API, а затем вызвать функцию initMap. Я поместил это в раздел head файла application.html.erb.

# app/views/layouts/application.html.erb
<script src="https://maps.googleapis.com/maps/api/jskey=MY_API_KEY&callback=initMap" 
async defer></script>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

3) Определите функцию initMap с жестко закодированными координатами для карты. Я положил это в свой собственный файл JS.

# app/assets/javascripts/map.js
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

Эта настройка работает, только если я обновляю страницу один или несколько раз. Я уверен, что это связано с турболинками, но если я попытаюсь обернуть эту функцию для турболинков, это сделает ее еще хуже. Затем я получаю сообщение об ошибке, в котором говорится, что initMap не является функцией, независимо от того, сколько раз я обновляю страницу.

document.addEventListener("turbolinks:load", function() {
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }
});

И в ответ на другой SO я изменил вызов API Google в application.html.erb на следующий, добавив data-turbolinks-eval = "false. Не повезло.

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

Как мне заставить его работать без обновления страницы?

Answer 1

Я нашел решение и опубликую его здесь на случай, если кто-то столкнется с такой же проблемой.

Оказалось, что было две проблемы. Один из них был с CSS в примере Google, который вставил в строку:

<div id="map" style="height: 100%;"></div>

Это нормально работало в одном HTML-документе, но не работало в моем приложении Rails (не знаю почему, но, видимо, это известная проблема). Я должен был добавить явную высоту. Вторая проблема - та, которую я назвал в этом вопросе. Загрузка карты на первой странице загрузки без необходимости обновления страницы. Для этого вам нужно разместить вызов API Google и функцию обратного вызова для функции initMap внизу страницы, а не в разделе заголовка application.html.erb.

# app/views/pages/map_page.html.erb
<div id="map" style="height: 400px;"></div>
<script src="https://maps.googleapis.com/maps/api/jskey=MY_API_KEY&callback=initMap" 
async defer></script>

Вы можете поместить функцию initMap в ее собственный файл js или даже поместить его в тот же файл map_page внутри тегов скрипта над вызовом API Google. Не оборачивайте его турболинками: груз.