Карты Google отображаются только тогда, когда я нажимаю cmd + shift + R

Question

У меня странная ошибка с кодом Google Maps.

На локальных работает отлично.

Однако на живом промежуточном сервере при первом просмотре страницы я получаю initMap - это не ошибка функции.

Сложность в том, что если я сделаю жесткое обновление (cmd + shift + r), карта будет работать нормально и без ошибок.

Но если я попытаюсь снова посетить страницу (либо перейдя по URL-адресу напрямую, либо щелкнув ссылку на страницу), я получу сообщение об ошибке.

Карта отображается правильно только при использовании cmd + shift + r для обновления страницы.

У кого-нибудь есть идеи относительно того, что может вызвать это?Мой код ниже.Большое спасибо.

Вот ошибка:

Uncaught Ib {message: "initMap is not a function", name: 
"InvalidValueError", stack: "Error↵    at new Ib 
(https://maps.googleapis.com/m…MY_KEY_j163:51"}

Вот мои теги сценариев в порядке их загрузки:

_foot.php:

  <!-- jQuery -->
  <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
  <!-- Fancybox jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
  <!-- main js -->
  <script defer type='text/javascript' src='<?=  $config->urls->templates 
  . 'lib/main.js' ; ?>'></script>
  <!-- Google Maps -->
  <script async defer src="https://maps.googleapis.com/maps/api/js? 
  key=MY_KEY_HERE&callback=initMap"></script>
</body>
</html>

main.js

// Initialize markers
let markers = [];
// Initialized map
let map;
// Initialize the infoWindow
let infoWindow;
// Initialize Soho
let soho;
// Initialize marker
let marker;

/**
 * Lifestyle Google Map
 *
 */
function initMap() {

  /* The Sol Hollywood Location */
  soho = {coords: { lat: 34.092786, lng: -118.31358620000003}, icon: 'http://maps.google.com/mapfiles/ms/icons/homegardenbusiness.png', title: 'Sol Hollywood'};

  /* Create The Map */
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(soho.coords.lat, soho.coords.lng),
    zoom: 12
  });

  /**
   * Add New markers
   * options object
   */
  function addMarker(options) {
    // Create the marker
    marker = new google.maps.Marker({
      position: options.coords,
      map: map,
    });

    // Check if an icon has been passed into options, if so set it.
    if (options.icon) {
      marker.setIcon(options.icon);
    }

    // Create the info window
    infoWindow = new google.maps.InfoWindow({
      content: options.title
    });

    // When marker is clicked, set and show info window
    marker.addListener('click', function() {
      infoWindow.setContent(options.title);
      infoWindow.open(map, this);
    });

    // Collect the markers
    markers.push(marker);
  }

  // Add The Sol Hollywood Marker
  addMarker(soho);

  // Ajax get request to grab local spot coords for map.
  $.ajax({
    type: 'GET',
    dataType: 'json',
    contentType: 'json',
    url: "/local-spot-get-coords",
    success: function(data) {
      // loop over the json coords from the PHP page and add a marker for each
      for (let key in data) {
          addMarker(data[key]);
      }
    }
  });
}

window.initMap = initMap;

Answer 1

Я исправил эту проблему, вызвав initMap самостоятельно и удалив обратный вызов из сценария карты.

Итак, в конце моего main.js я просто вызвал initMap:

main.js

initMap();

И в нижнем колонтитуле, где язагрузить скрипт карт, я убираю обратный вызов:

_foot.php

<!-- Google Maps -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_HERE"></script>