Archived topic
google maps
3 replies · Started by Barry on March 16, 2023
Hi,
Sorry this is very basic, but I'm struggling to add google maps to a page.
I'm trying to use a custom HTML block with the following:
<html>
<head>
<title>Add Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script>
// Initialize and add the map
function initMap() {
// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 4,
center: uluru,
});
// The marker, positioned at Uluru
const marker = new google.maps.Marker({
position: uluru,
map: map,
});
}
window.initMap = initMap;</script>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<!--
The <code>defer</code> attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises
with https://www.npmjs.com/package/@googlemaps/js-api-loader.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDt9nP2g6MVHexK6yrYqciUbRgho3_XTC0&callback=initMap&v=weekly"
defer
></script>
</body>
</html>I'm getting an error:
Devtools failed to load source map: Could not load content for chrome-extension://eakacpaijcpapndcfffdgphdiccmpknp/scripts/content_page.map: System error: net::ERR_BLOCKED_BY_CLIENT
Hi Barry,
I'm not 100% sure what your script is for and where you got it from but that's not something we can support here.
It seems to be a complicated solution though - have you considered using the <iframe> provided by Google maps and insert it with a WP core embed block?
https://support.google.com/maps/answer/144361?hl=en&co=GENIE.Platform%3DDesktop
https://wordpress.org/documentation/article/embed-block/
Let me know :)
Hi Leo,
Perfect! Thanks for helping me out of that strange rabbit hole - much appreciated!
Thanks
barry
No problem :)
