Почему возникает ошибка при подключении GoogleMap и как исправить?

Question

[MorenO410]

При подключении GoogleMap по API возникли ошибки.

1. При первой заходе на страницу GoogleMap не загружаются сразу требуется обновить страницу. В консоли выводятся ошибки

2. После обновления и отображения страницы все равно выводятся предупреждения:

Код Java Script:

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="Title Name" 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);
				});
			}
		}
	}

Comments

[alexalexes]

Там же английским по белому (желтому) написано:
1) Нужно решить проблему асинхронности загрузки API (поиграться с атрибутами async, defer у тега script).
2) Вызывается устаревший метод new google.maps.Marker, нужно использовать другой метод.

[Ivan Ustûžanin]

Как правильно подключить Google Maps на сайт?

[freeExec]

причём там прямы в ошибке даны ссылки как сделать правильно, нет мы всё равно будем делать свой колхоз с DOMContentLoaded