GoogleMaps API работает в html-файле, но не в JS-файле

Question

Я работаю с примером, который я нашел в документации Google: https://developers.google.com/maps/documentation/javascript/tutorial#asynch

Я скопировал / вставил код hello world, и он работает нормально: он отображает мне карту с указаннойместо нахождения.Но теперь я хотел бы иметь возможность работать с этой картой в JS-файле для более удобочитаемой работы, поэтому я просто добавил <script src="RunUTrail.js"></script> непосредственно перед </body>.Этот файл содержит точно такой же метод, как в <script>:

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

Так что он ничего не должен делать, но у меня есть ReferenceError: google is not defined.Чего мне не хватает, чтобы использовать API внутри файла JS?

Answer 1

Вам нужно поместить свой js-код для отображения карты в функцию обратного вызова, такую ​​как initMap (), и добавить имя функции обратного вызова в исходный код скрипта Google Maps.

HTML код:

  <div id="map" style="width: 500px; height: 400px;"></div>
      <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

JS код:

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