I have a Google Maps Map with a HBM info box on one page of my WordPress Website.
The goal is to have the map load after the user accepts our cookies. We are using the Complianz plugin for the cookies.
When I visit the website and accept the cookies and head for the site where the map is located, the map is not loading (grey screen) and I’m getting thrown this error:
hbm_gmap_infobox.js?ver=1.0.0:128 Uncaught TypeError: Cannot read properties of undefined (reading 'OverlayView')
at hbm_gmap_infobox.js?ver=1.0.0:128:37
jquery.min.js?ver=3.7.1:2 Uncaught TypeError: Cannot read properties of undefined (reading 'Map')
at Object.init (hbm_gmap.js?rnd=449&ver=1.0.0:224:40)
at Object.init (hbm_js.js?rnd=357&ver=1.0.0:22:18)
at HTMLDocument.<anonymous> (hbm_js.js?rnd=357&ver=1.0.0:437:13)
at e (jquery.min.js?ver=3.7.1:2:27028)
at t (jquery.min.js?ver=3.7.1:2:27330)
init @ hbm_gmap.js?rnd=449&ver=1.0.0:224
init @ hbm_js.js?rnd=357&ver=1.0.0:22
(anonymous) @ hbm_js.js?rnd=357&ver=1.0.0:437
e @ jquery.min.js?ver=3.7.1:2
t @ jquery.min.js?ver=3.7.1:2
setTimeout (async)
ce.readyException @ jquery.min.js?ver=3.7.1:2
(anonymous) @ jquery.min.js?ver=3.7.1:2
e @ jquery.min.js?ver=3.7.1:2
t @ jquery.min.js?ver=3.7.1:2
setTimeout (async)
(anonymous) @ jquery.min.js?ver=3.7.1:2
c @ jquery.min.js?ver=3.7.1:2
fireWith @ jquery.min.js?ver=3.7.1:2
fire @ jquery.min.js?ver=3.7.1:2
c @ jquery.min.js?ver=3.7.1:2
fireWith @ jquery.min.js?ver=3.7.1:2
t @ jquery.min.js?ver=3.7.1:2
setTimeout (async)
(anonymous) @ jquery.min.js?ver=3.7.1:2
c @ jquery.min.js?ver=3.7.1:2
fireWith @ jquery.min.js?ver=3.7.1:2
fire @ jquery.min.js?ver=3.7.1:2
c @ jquery.min.js?ver=3.7.1:2
fireWith @ jquery.min.js?ver=3.7.1:2
ready @ jquery.min.js?ver=3.7.1:2
P @ jquery.min.js?ver=3.7.1:2
I also got this error, but now it suddenly disappeared:
ReferenceError: google is not defined at hbm_gmap_infobox.js?ver=1.0.0:128:25
If you reload the website a couple times the map will show up. There you can also see the infobox when you click on the eye-icon. It seems that the the infobox script does not wait for the google api to load first.
In the Complianz Plugin’s Script center I can whitelist scripts, so that they only get loaded when the user accepts our cookies. I put both scripts on that whitelist, but it didn’t help at all. I even wrote a custom script that you can find below. It also didn’t change the behaviour of our map.
// Custom Google Maps Initialization Script, written by Erick Holz, 21.06.2024
// Load Google Maps JavaScript API into website
function loadGoogleMapsAPI() {
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=OUR_API_KEY&libraries=places&callback=initMap';
script.async = true;
script.defer = true;
document.head.appendChild(script);
}
// Map initialisation, if Google API was successfully loaded
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(51.1657, 10.4515), // Preset map-coordinates of the geographical center of Germany
zoom: 8,
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
// Load scripts, which depend on the Google Maps API
var infoboxScript = document.createElement('script');
infoboxScript.src = '/wp-content/plugins/hopfenheldenbeermap/public/js/hbm_gmap_infobox.js'; // Path to Infobox JavaScript for Google Maps
infoboxScript.async = true;
infoboxScript.onload = function() {
// To make sure that the script was successfully loaded
};
document.head.appendChild(infoboxScript);
}
// Load Google Maps API after consent was given by user
if (typeof cmplzHasConsent === 'function' && cmplzHasConsent()) {
loadGoogleMapsAPI();
} else {
document.addEventListener("cmplz_event_functional", function() {
loadGoogleMapsAPI();
});
}
Here’s the link to our website: https://www.hopfenhelden.de/
And here to the Map: https://www.hopfenhelden.de/wo-gibt-es-craft-beer/
I tried using only the script center inside of the Complianz plugin, then the custom script alone and then both together. Nothing worked or changed any behaviour. I really tried any solution that I could come up with.
I’m also having messages like:
If I remove the custom script I’m getting a message that the custom script from before can’t be loaded. So it clearly sees the script. Down below is the message I get, when I remove the script from its location.
custom-google-maps.js:1
Failed to load resource: the server responded with a status of 404 ()
wo-gibt-es-craft-beer/:1 Refused to execute script from 'https://www.hopfenhelden.de/wp-content/themes/x-child/js/custom-google-maps.js'
because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
I cleared the cache and all, but it’s still there. Just for your information.
Thank you.