error msg:google maps did not load correctly

[wael]

I’m having an issue with JavaScript. Google Maps isn’t loading properly. there’s a message error: google maps did not load correctly on this page. Thank you for your help.

---

[Support]

Hello, the error is that you need to create an API Key.

DOCS: https://www.okler.net/previews/porto/docs/#google_maps

Get an API Key: https://developers.google.com/maps/documentation/javascript/get-api-key

In the JS code at the bottom of the page, where it says “YOUR_API_KEY” you provide that Key there.

---

[Support]

Functional example in this page:
https://www.okler.net/previews/porto/10.2.0/contact-us.html

---

[Support]

Updated JS code. (bottom of the HTML page)

/* 
Map Markers:
- Get an API Key: https://developers.google.com/maps/documentation/javascript/get-api-key
- Generate Map Id: https://console.cloud.google.com/google/maps-apis/studio/maps
- Use https://www.latlong.net/convert-address-to-lat-long.html to get Latitude and Longitude of a specific address
*/
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=https://maps.${c}apis.com/maps/api/js?+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
	({key: "YOUR_API_KEY", v: "weekly"});

async function initMap() {
	const { Map, InfoWindow } = await google.maps.importLibrary("maps");
	const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
		"marker",
	);
	const map = new Map(document.getElementById("googlemaps"), {
		zoom: 14,
		center: { lat: -37.817240, lng: 144.955820 },
		mapId: "YOUR_MAP_API_ID",
	});
	const markers = [
		{
			position: { lat: -37.817240, lng: 144.955820 },
			title: "Office 1<br>Melbourne, 121 King St, Australia<br>Phone: 123-456-1234",
		}
	];

	const infoWindow = new InfoWindow();

	markers.forEach(({ position, title }, i) => {
		const pin = new PinElement({
			background: "#e36159",
			borderColor: "#e36159",
			glyphColor: "#FFF",
		});
		const marker = new AdvancedMarkerElement({
			position,
			map,
			title: ${title},
			content: pin.element,
		});

		marker.addListener("click", ({ domEvent, latLng }) => {
			const { target } = domEvent;

			infoWindow.close();
			infoWindow.setContent(marker.title);
			infoWindow.open(marker.map, marker);
		});
	});	

}

initMap();

---

[wael]

I copied and pasted this code; there’s an error in it according to VS Code:
/*
Map Markers:
– Get an API Key: https://developers.google.com/maps/documentation/javascript/get-api-key
– Generate Map Id: https://console.cloud.google.com/google/maps-apis/studio/maps
– Use https://www.latlong.net/convert-address-to-lat-long.html to get Latitude and Longitude of a specific address
*/
(g=>{var h,a,k,p=”The Google Maps JavaScript API”,c=”google”,l=”importLibrary”,q=”__ib__”,m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement(“script”));e.set(“libraries”,[…r]+””);for(k in g)e.set(k.replace(/[A-Z]/g,t=>”_”+t[0].toLowerCase()),g[k]);e.set(“callback”,c+”.maps.”+q);a.src=
https://maps.${c}apis.com/maps/api/js?
+e;d[q]=f;a.onerror=()=>h=n(Error(p+” could not load.”));a.nonce=m.querySelector(“script[nonce]”)?.nonce||””;m.head.append(a)}));d[l]?console.warn(p+” only loads once. Ignoring:”,g):d[l]=(f,…n)=>r.add(f)&&u().then(()=>d[l](f,…n))})
({key: “YOUR_API_KEY”, v: “weekly”});

async function initMap() {
const { Map, InfoWindow } = await google.maps.importLibrary(“maps”);
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
“marker”,
);
const map = new Map(document.getElementById(“googlemaps”), {
zoom: 14,
center: { lat: -37.817240, lng: 144.955820 },
mapId: “YOUR_MAP_API_ID”,
});
const markers = [
{
position: { lat: -37.817240, lng: 144.955820 },
title: “Office 1<br>Melbourne, 121 King St, Australia<br>Phone: 123-456-1234”,
}
];

const infoWindow = new InfoWindow();

markers.forEach(({ position, title }, i) => {
const pin = new PinElement({
background: “#e36159”,
borderColor: “#e36159”,
glyphColor: “#FFF”,
});
const marker = new AdvancedMarkerElement({
position,
map,
title:
${title}
,
content: pin.element,
});

marker.addListener(“click”, ({ domEvent, latLng }) => {
const { target } = domEvent;

infoWindow.close();
infoWindow.setContent(marker.title);
infoWindow.open(marker.map, marker);
});
});

}

initMap();

---

[Support]

The code doesn’t have any errors, it’s provided by Google.

Did you create your API Key?

Note it’s not 100% free, Google asks for a credit card and payment method to use that service.

Check their documentation in the link:
https://developers.google.com/maps/documentation/javascript/get-api-key

---

[Author]

Posts