Mam mapę Google Maps z polem informacyjnym HBM na jednej stronie mojej witryny WordPress.

Celem jest załadowanie mapy po zaakceptowaniu przez użytkownika naszych plików cookie. Do plików cookies używamy wtyczki Complianz.

Kiedy odwiedzam stronę internetową, akceptuję pliki cookie i przechodzę do witryny, na której znajduje się mapa, mapa się nie ładuje (szary ekran) i pojawia się następujący błąd: ReferenceError: google is not defined at hbm_gmap_infobox.js?ver=1.0.0:128:25

Jeśli odświeżysz stronę kilka razy, pojawi się. Tam możesz również zobaczyć infobox, klikając ikonę oka. Wygląda na to, że skrypt infobox nie czeka, aż najpierw załaduje się API Google. W centrum skryptów Complianz możemy umieścić skrypty na białej liście, tak aby ładowały się tylko wtedy, gdy użytkownik zaakceptuje nasze pliki cookie. Umieściłem oba skrypty na tej białej liście, ale to w ogóle nie pomogło. Napisałem nawet skrypt, który możesz znaleźć poniżej. Nie zmienił on również zachowania naszej mapy.

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

Oto link do naszej strony internetowej:

A oto mapa: wo-gibt-es-craft-beer/

Próbowałem używać tylko centrum skryptów wewnątrz wtyczki Complianz, potem tylko skryptu niestandardowego, a potem obu razem. Nic nie działało ani nie zmieniło żadnego zachowania.

Otrzymuję również wiadomości takie jak:

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)

Usunąłem teraz niestandardowy skrypt i mam dwa skrypty na mojej białej liście w Complianz. Teraz otrzymuję komunikat, że nie można załadować wcześniejszego skryptu niestandardowego.

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

Wyczyściłem pamięć podręczną, ale nadal tam jest. Tylko dla twojej informacji.

Dziękuję.