I load the map-related scripts through joomla.asset, like this:
Code: Select all
{
"$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
"name": "Gardentemplate",
"version": "4.0.0",
"description": "This file contains assets used by gardentemplate",
"license": "GPL-2.0-or-later",
"assets": [
{
"name": "mystyle",
"type": "style",
"uri": "style.css"
},
{
"name": "myscript",
"type": "script",
"uri": "script.js",
"attributes": {
"defer": true
}
},
{
"name": "callmapscript",
"type": "script",
"uri": "https://maps.googleapis.com/maps/api/js?key=xxx&libraries=places&callback=initMap",
"attributes": {
"defer": true,
"async": true
}
}
]
}
The js script:
Code: Select all
// Initialize and add the map
function initMap() {
const fetchedAdress = document.querySelector(".adress p").textContent;
const cleanAdress = fetchedAdress.replace(/<[^>]+>/g, ''); // Removes HTML tags
// Geocode the address to get latitude and longitude
var geocoder = new google.maps.Geocoder();
var address = cleanAdress;
geocoder.geocode({ 'address': address }, function(results, status) {
if (status == 'OK') {
var location = results[0].geometry.location;
var map = new google.maps.Map(
document.getElementById('map'), { zoom: 15, center: location });
var marker = new google.maps.Marker({ position: location, map: map });
} else {
console.log('Geocode was not successful for the following reason: ' + status);
}
});
}
I use the same script(s) on a static website, and it has no issues there.