C 4.13: numero2/contao-storelocator und Oveleon Cookiebar miteinander verbinden

hallo,

hat jemand von euch schon einmal den numero2/contao-storelocator und Oveleon Cookiebar miteinander verbunden, so dass die google-maps erst nach akzeptieren der cookies geladen werden?

es gibt einmal eine übersichtskarte, auf der alle händler eingetragen sind, die mit javascript aufgebaut wird und einmal einen iframe, der im template der detailseite geladen wird.

wäre klasse, wenn mir da jemand aufs pferd helfen könnte.

Hallo,

zumindest für die Iframes könntest Du die Templates in der Config ergänzen:

Code:

---

contao_cookiebar:
  iframe_types:
    googlemaps:
      - mod_storelocator_list
      - mod_storelocator_details

---

JMMB,

super, vielen dank für deine antwort! das funktioniert auf jeden fall für die detail-seite!

Code:

---

contao_cookiebar:
  iframe_types:
    googlemaps:
      - mod_storelocator_details

---

hier noch zum nachlesen, wie's auf der übersichtsseite geht. vielleicht hilft's ja dem ein- oder der anderen.

1. wir brauchen zunächst einen neuen cookie eintrag vom typ "Benutzerdefiniert (Script)". dessen ID merken wir uns (in meinem bsp. unten ist es die 4)
2. dann nehmen wir uns die addModule methode in einem javascript-file, das wir in die seite einbinden.
   

Code:

---

document.addEventListener("DOMContentLoaded", function() {
    cookiebar.addModule(4, PGkarte, {
        selector: '#map-canvas',
        message: 'Wenn Sie möchten, können Sie sich hier eine Google-Maps Karte mit den Standorten anzeigen lassen',
        button: {
            show: true,
            text: 'Ja, bitte!',
        },
    });
});

---

hier führt cookie mit der ID == 4 die funktion "PGkarte" aus, wenn der cookie gesetzt ist, und gibt anderenfalls die meldung aus, die
wir festlegen können in einem HTML element mit der ID "#map-canvas".

damit das funktioniert muss das template script_loader_googlemap.html5 angepasst werden:

PHP-Code:

---

<!-- indexer::stop -->
<?php $this->block('content'); ?>
<?php $this->endblock(); ?>

<?php
    // die ursprünglich anonymene funktion in $PGkarte gespeichert,
    // damit sie per CookieConsent aufgerufen werden kann.
?>

<script>

   let PGkarte = function(){

        if( typeof window.storeLocatorInitGoogleMap !== "function" ) {

            var script = document.createElement('script');
            script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=<?= $this->mapsKey; ?>&callback=storeLocatorInitGoogleMap';
            script.async = true;

            window.storeLocatorInitGoogleMap = function() {

                var e = new Event('storeLocatorGoogleMapLoaded');
                document.dispatchEvent(e);
            };

            document.head.appendChild(script);
        }

        if( typeof window.google !== "undefined" && typeof window.google.maps !== "undefined" ) {

            var e = new Event('storeLocatorGoogleMapLoaded');
            document.dispatchEvent(e);
        }

    };

    // PGkarte();

</script>
<!-- indexer::continue -->

---

und im template mod_storelocator_list.html5 muss jetzt die ID '#map-canvas' zu finden sein:

HTML-Code:

---

    <div id="map-wrapper">
            <div id="map-canvas"></div>
            <div id="store-js">
                    <?= $this->scriptMap; ?>
            </div>
        </div>
   

---