This question was already posted in the WordPress-Substack, where it was closed with the request to better share it here on Stackoverflow.

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 cookies.

When I visit the website, 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: ReferenceError: google is not defined at hbm_gmap_infobox.js?ver=1.0.0:128:25

If you reload the website a couple times it 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 Script center we 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 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’m also having messages like:

jquery.min.js?ver=3.7.1:2 Uncaught TypeError: Cannot read properties of undefined (reading 'Map')
    at Object.init (hbm_gmap.js?rnd=594&ver=1.0.0:224:40)
    at Object.init (hbm_js.js?rnd=541&ver=1.0.0:22:18)
    at HTMLDocument.<anonymous> (hbm_js.js?rnd=541&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)

I removed the custom script now and have the two scripts on my whitelist in Complianz. Now I’m getting a message that the custom script from before can’t be loaded.

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, but it’s still there. Just for your information.

Thank you.