X Theme is preventing scripts to follow loading-cycle (?)

[julesbiero]

Hello guys, I’m not sure if it’s really the case, but I can’t explain why our Google Maps Map doesn’t load.

We have a Google Maps Map with a HBM info box on one page of my Wordpress Website.

(https://www.hopfenhelden.de/wo-gibt-es-craft-beer/ is the site with the Map)

The goal is to have the map load first and then the sidebar after the user accepts our cookies. We are using the Complianz plugin for our 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

It t seems that our HBM Sidebar is not waiting for the Map to load in the first place, hence the error-message.

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 wrote a custom script, that should work fine and whitelisted it, but it didn’t help at all. That’s why I came here to ask if maybe the Theme is interfering with something.

Here is the custom script:

// 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();
    });
}

We are using the X-version 10.4.20 and Cornerstone-version 7.4.21 and we have a child theme operating on that website.

Maybe somethings interfering with the PageBuilder? Or the Theme is preventing something?

I appreciate your help. Thank you!

Erick

Wordpress Log-In details are inside the secure note!

[tristup]

Hi Julius,

Thanks for reaching out.
It might be the problem with the JavaScript file used in the 3rd Party plugin. I would suggest you activate the default theme like TwentyTwenty and check if the Google Map working or not. If not, please check with the plugin author.
If you find it is working, and getting problems with only in X, in that case, I would suggest you update the X to the latest version i.e. 10.5.0, and update the Cornerstone by following the below steps, and check if that resolves the issue.

1. Delete the existing Cornerstone.
2. Update the X theme to the latest version on automatic updates.
3. After the X theme is updated, use the link in the dashboard to automatically install the Cornerstone. It will be the latest version.

Hope it helps.
Thanks