Google Maps периодически не отображается при загрузке страницы

Question

Возникла проблема при подключенной Google Maps. А именно при первоначально загрузке страницы Google Map сразу не отображается на свранице, в консоли выводится сообщение об ошибке Google Maps API Not loaded, ссылаясь на строку в коде console.error('Google Maps API Not loaded.');.

Помогите разобраться в чем может быть проблема и как ее устранить

Мой код (При демонстрации кода свой IP я частично скрыл)

<body>
    <div class="wrapper">
    <main>
            <!-- Google Map -->

    <div class="map-cestion" id="map-delizioso">
        <div class="map-cestion__address address">
            <div class="address__body-col body-col">

                <div class="body-col__picture">
                    <img src="@img/contact_page/location.png" alt="Delizioso Restaurant" class="body-col__sm-pic" width="166" height="151">
                </div>

                <div class="body-col__col-desk-inner">
                    <div class="body-col__place-data place-data">
                        <h3 class="place-data__title">Title</h3>
                        <div class="place-data__desk-parameters">
                            <h4 class="place-data__bronx">Bronx, NY 10463, Amerika Serikat</h4>
                            <h5 class="place-data__coordinates">40.88082, -73.90863</h5>
                        </div>
                    </div>
                    <a href="reservation.html" class="body-col__social-icon">s</a>
                </div>

            </div>
        </div>
    </div>

    </main>
    </div>


    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyu..........GPI&language=en" async defer></script>

</body>

CSS

#map-delizioso {
    min-height: toRem(663);
    width: 100%;
}

JS

document.addEventListener("DOMContentLoaded", function() {
    function initMap() {
        let opt = {
            zoom: 15,
            center: {lat: 40.88082, lng: -73.90863},
        };

        let myMap = new google.maps.Map(document.getElementById("map-delizioso"), opt);

        let markersGroup = [
            {
                coordinates: {lat: 40.88082, lng: -73.90863},
                image: '../../img/items_svg/tag-location.svg',
                info: '<div class="map-cestion__address address"><div class="address__body-col body-col"><div class="body-col__picture"><img src="../img/contact_page/location.png" alt="Delizioso Restaurant" class="body-col__sm-pic" width="166" height="151"></div><div class="body-col__col-desk-inner"><div class="body-col__place-data place-data"><h3 class="place-data__title">Delizioso Restaurant</h3><div class="place-data__desk-parameters"><h4 class="place-data__bronx">Bronx, NY 10463, Amerika Serikat</h4><h5 class="place-data__coordinates">40.88082, -73.90863</h5></div></div><a href="reservation.html" class="body-col__social-icon">s</a></div></div></div>'
            }
        ];

        for (let i = 0; i < markersGroup.length; i++) {
            addMarker(markersGroup[i]);
        }

        function addMarker(properties) {
            let markerDelizioso = new google.maps.Marker({
                position: properties.coordinates,
                map: myMap,
            });

            if (properties.image) {
                markerDelizioso.setIcon(properties.image);
            }

            if (properties.info) {
                let infoWindow = new google.maps.InfoWindow({
                    content: properties.info
                });

                markerDelizioso.addListener("click", function() {
                    infoWindow.open(myMap, markerDelizioso);
                });
            }
        }
    }

    // Подтверждение, что Google API загружен
    if (typeof google !== 'undefined') {
        initMap();
    } else {
        console.error('Google Maps API Not loaded.');
    }
});

Answer 1

ваш скрипт пытается проверить наличие объекта google до того, как Google Maps API полностью загрузится
Параметры async и defer указывают браузеру загружать скрипт асинхронно, но выполнять его только после того, как вся страница загружена ...можно передать функцию в качестве обратного вызова для инициализации карты &callback=initMap => скрипт загружается, апи автоматически вызывает initMap после своей полной загрузки

function initMap() {
  let opt = {
    zoom: 15,
    center: {
      lat: 40.88082,
      lng: -73.90863
    },
  };

  let myMap = new google.maps.Map(document.getElementById("map-delizioso"), opt);

  let markersGroup = [{
    coordinates: {
      lat: 40.88082,
      lng: -73.90863
    },
    image: '../../img/items_svg/tag-location.svg',
    info: '<div class="map-cestion__address address"><div class="address__body-col body-col"><div class="body-col__picture"><img src="../img/contact_page/location.png" alt="Delizioso Restaurant" class="body-col__sm-pic" width="166" height="151"></div><div class="body-col__col-desk-inner"><div class="body-col__place-data place-data"><h3 class="place-data__title">Delizioso Restaurant</h3><div class="place-data__desk-parameters"><h4 class="place-data__bronx">Bronx, NY 10463, Amerika Serikat</h4><h5 class="place-data__coordinates">40.88082, -73.90863</h5></div></div><a href="reservation.html" class="body-col__social-icon">s</a></div></div></div>'
  }];

  for (let i = 0; i < markersGroup.length; i++) {
    addMarker(markersGroup[i]);
  }

  function addMarker(properties) {
    let markerDelizioso = new google.maps.Marker({
      position: properties.coordinates,
      map: myMap,
    });

    if (properties.image) {
      markerDelizioso.setIcon(properties.image);
    }

    if (properties.info) {
      let infoWindow = new google.maps.InfoWindow({
        content: properties.info
      });

      markerDelizioso.addListener("click", function() {
        infoWindow.open(myMap, markerDelizioso);
      });
    }
  }
}

#map-delizioso {
  min-height: 663px;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyu..........GPI&language=en&callback=initMap" async defer></script>

<div class="map-cestion" id="map-delizioso">
  <div class="map-cestion__address address">
    <div class="address__body-col body-col">

      <div class="body-col__picture">
        <img src="@img/contact_page/location.png" alt="Delizioso Restaurant" class="body-col__sm-pic" width="166" height="151">
      </div>

      <div class="body-col__col-desk-inner">
        <div class="body-col__place-data place-data">
          <h3 class="place-data__title">Title</h3>
          <div class="place-data__desk-parameters">
            <h4 class="place-data__bronx">Bronx, NY 10463, Amerika Serikat</h4>
            <h5 class="place-data__coordinates">40.88082, -73.90863</h5>
          </div>
        </div>
        <a href="reservation.html" class="body-col__social-icon">s</a>
      </div>

    </div>
  </div>
</div>

БЛОГ НА HUSL

Google Maps периодически не отображается при загрузке страницы

Ответы (1 шт):