Ergebnis 1 bis 9 von 9

Thema: dlh_googlemap - 2 Maps - You have included the Google Maps API multiple times

  1. #1
    Contao-Nutzer
    Registriert seit
    13.09.2009.
    Ort
    Münster; NRW
    Beiträge
    77

    Standard dlh_googlemap - 2 Maps - You have included the Google Maps API multiple times

    Hallo Contao Commuity,

    ich bekomme die CookieBar mit meinen beiden Google Maps nicht zum laufen.

    Contao: Version 4.13.37
    Google Maps: Version 2.4.1

    Ich habe das Template "ce_dlh_googlemaps_default.html5" nach dieser Anleitung angepasst. Link

    PHP-Code:
    <?php
    if($_COOKIE['dlh_googlemaps'] || $this->map['protected']!='1'):
    // $GLOBALS['TL_JAVASCRIPT'][] = 'https://maps.googleapis.com/maps/api/js?key=' . $this->map['key'] . '&language=' . $this->map['language'];
    $this->map['privacy'] == '';
    endif;
    ?>

    <!-- indexer::stop -->
    <div class="<?= $this->class?> block"<?= $this->cssID?><?php if ($this->style): ?> style="<?= $this->style?>"<?php endif; ?>>
    <?php if ($this->headline): ?>

    <<?= $this->hl?>><?= $this->headline?></<?= $this->hl?>>
    <?php endif; ?>

    <div class="dlh_googlemap block" id="dlh_googlemap_<?= $this->map['id']; ?>" style="<?= $this->map['mapSize']['position'].$this->map['mapSize']['width'].$this->map['mapSize']['height'].$this->map['mapSize']['padding']; ?>"><?php if($_COOKIE['dlh_googlemaps'] || $this->map['protected']!='1'): ?><noscript><p><?= ($this->map['staticMapNoscript'] ? $this->map['staticMap'] : $this->labels['noscript']); ?></p></noscript><?php else: ?><div id="confirm-googlemaps" onClick="gmap<?= $this->map['id']; ?>_allow()"><?php echo ($this->map['protected']=='1' && $this->map['privacy']=='') ? $this->labels['privacy'] : $this->map['privacy']; ?></div><?php endif; ?></div>

    <script>

    function gmap<?= $this->map['id']; ?>_allow() {
        document.cookie = 'dlh_googlemaps=ok; max-age=<?= $GLOBALS['TL_CONFIG']['dlh_googlemaps']['cookiedays']; ?> ; path=/';
       
        var mapsSrc = document.createElement('script');
        mapsSrc.type = 'text/javascript';
        mapsSrc.src = 'https://maps.googleapis.com/maps/api/js?key=<?= $this->map['key']; ?>&language=<?= $this->map['language']; ?>';
        document.getElementsByTagName('head')[0].appendChild(mapsSrc);
        window.setTimeout("gmap<?= $this->map['id']; ?>_initialize()", 500);
    }

    function gmap<?= $this->map['id']; ?>_initialize() {

        if(!window.google){
            return false; 
        }

        var gmap<?= $this->map['id']; ?>_Options = {

            zoom: <?= $this->map['zoom']; ?>
            , center: new google.maps.LatLng(<?= $this->map['center']; ?>)
            , mapTypeId: google.maps.MapTypeId.<?= $this->map['mapTypeId']; ?>
            , draggable: <?= $this->map['draggable']; ?>
            , disableDoubleClickZoom: <?= $this->map['disableDoubleClickZoom']; ?>
            , scrollwheel: <?= $this->map['scrollwheel']; ?>


            <?php if ($this->map['useMapTypeControl']) : ?>
            , mapTypeControl: true
            , mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.<?= $this->map['mapTypeControlStyle']; ?>
                , position: google.maps.ControlPosition.<?= $this->map['mapTypeControlPos']; ?>
                <?php if (is_array($this->map['mapTypesAvailable'])) : ?>
                , mapTypeIds: [
                    <?php foreach($this->map['mapTypesAvailable'] as $k=>$v) : ?>
                        <?php if($k>0) echo ','?>google.maps.MapTypeId.<?= $v?>
                    <?php endforeach; ?>
                    ]
                <?php endif; ?>
            }
            <?php else : ?>
            , mapTypeControl: false
            <?php endif; ?>


            <?php if ($this->map['useOverviewMapControl']) : ?>
            , overviewMapControl: true
            , overviewMapControlOptions: {
                opened: <?= ($this->map['overviewMapControlOpened'] ? 'true':'false'); ?>
            }
            <?php else : ?>
            , overviewMapControl: false
            <?php endif; ?>


            <?php if ($this->map['useStreetViewControl']) : ?>
            , streetViewControl: true
            , streetViewControlOptions: {
                position: google.maps.ControlPosition.<?= $this->map['streetViewControlPos']; ?>
            }
            <?php else : ?>
            , streetViewControl: false
            <?php endif; ?>


            <?php if ($this->map['useRotateControl']) : ?>
            , rotateControl: true
            , rotateControlOptions: {
                position: google.maps.ControlPosition.<?= $this->map['rotateControlPos']; ?>
            }
            <?php else : ?>
            , rotateControl: false
            <?php endif; ?>


            <?php if ($this->map['usePanControl']) : ?>
            , panControl: true
            , panControlOptions: {
                position: google.maps.ControlPosition.<?= $this->map['panControlPos']; ?>
            }
            <?php else : ?>
            , panControl: false
            <?php endif; ?>


            <?php if ($this->map['useZoomControl']) : ?>
            , zoomControl: true
            , zoomControlOptions: {
                style: google.maps.ZoomControlStyle.<?= $this->map['zoomControlStyle']; ?>,
                position: google.maps.ControlPosition.<?= $this->map['zoomControlPos']; ?>
            }
            <?php else : ?>
            , zoomControl: false
            <?php endif; ?>


            <?php if ($this->map['useScaleControl']) : ?>
            , scaleControl: true
            , scaleControlOptions: {
                position: google.maps.ControlPosition.<?= $this->map['scaleControlPos']; ?>
            }
            <?php else : ?>
            , scaleControl: false
            <?php endif; ?>


            <?php if ($this->map['parameter']) : ?>
            , <?= $this->map['parameter']; ?>
            <?php endif; ?>

        };

        google.maps.event.addDomListener(window, 'resize', function() {
            var center = gmap<?= $this->map['id'];?>.getCenter();

            google.maps.event.trigger(gmap<?= $this->map['id'];?>, 'resize');
            gmap<?= $this->map['id'];?>.setCenter(center);
        });

        var gmap<?= $this->map['id']; ?> = new google.maps.Map(document.getElementById("dlh_googlemap_<?= $this->map['id']; ?>"), gmap<?= $this->map['id']; ?>_Options);
        var gmap<?= $this->map['id']; ?>_markers = [];

        <?php if ($this->map['moreParameter']) : echo $this->map['moreParameter']; endif; ?>

        <?php
        
    // Auto-generated map elements
        
    foreach($this->map['elements'] AS $element) : echo $element['parsed']; endforeach; ?>

        if(window.gmap<?= $this->map['id']; ?>_dynmap){
            gmap<?= $this->map['id']; ?>_dynmap(gmap<?= $this->map['id']; ?>);
        }

        <?php if($this->map['useClusterer']): ?>
        var gmap<?= $this->map['id']; ?>_markerCluster = new MarkerClusterer(gmap<?= $this->map['id']; ?>, gmap<?= $this->map['id']; ?>_markers, {imagePath: '<?= $this->map[clusterImg]; ?>/m'});
        <?php endif; ?>

        <?php
        
    // tabcontrol
        
    echo $this->tabs $this->map['tabsCode'] : ''?>
    }


     document.addEventListener("DOMContentLoaded", function() {
        cookiebar.addModule(5, function(){
           
            let script = document.createElement('script');
            script.type = 'text/javascript';
                 
            script.onload = function() {
            gmap<?= $this->map['id']; ?>_initialize();
        };
                 
            script.src = 'https://maps.googleapis.com/maps/api/js?key=<?=$this->map['key']?>&language=<?=$this->map['language']?>';
            document.head.append(script);
        }, {
            selector: '#dlh_googlemap_<?= $this->map['id']; ?>',
            message: 'YOUT_TEXT',
            button: {
                show: true,
                text: 'YOUR_BUTTON_TEXT',
               type: 'button',
                classes: 'my-btn'
            }
        });
     });

    </script>

    </div>
    <!-- indexer::continue -->
    In der CookieBar habe ich eine neue Cookie ID angelegt.

    Cookie-Typ: "Benutzerdefniertes Skript"
    Cookie-Token: "dlh_googlemaps"

    Wenn der Cookie abgelent ist wird die Map von der CookieBar erfolgreich geblockt.
    Wird der Cookie über die CookieBar zugelassen wird leider nur eine der beiden Maps geladen und ich bekomme in der Console den Fehler:

    Code:
    You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.
    In der Entwicklerkonsole ist nichts zu sehen vom Cookie "dlh_googlemaps" weder das er gesetzt wird noch das er gelöscht wird.

    Mach ich den Haken in den Einstellungen der Google Map "Karte hat Datenschutz-Bestätigung" wird mir zusätzlich der Datenschutztext von dlh-googlemaps angezeigt.
    Klicke ich auf diesen Text wird der Cookie gesetzt. Nachdem der Cookie gesetzt wurde kann ich diesen mit der Cookiebar durch das auswählen von "Alle ablehnen" wieder löschen. Das Zulassen funtioniert aber nur über den Klick auf den Datenschutztext von der Map selbst.

    Wie bekomme ich es hin das beide Karten auf der Seite geladen werden und die API nicht zwei mal geladen wird?

    Danke LG

  2. #2
    Contao-Fan
    Registriert seit
    24.02.2021.
    Beiträge
    455

    Standard

    Hat nichts mit der Cookiebar zu tun sondern mit dlh_googlemap.

    Du versuchst 2 mal die Google-API aufzurufen / Du hast zwei Karten in der Seite eingebunden.

    https://github.com/delahaye/dlh_googlemaps/issues/107
    https://community.contao.org/de/show...o-4-4-Maps-API

  3. #3
    Contao-Nutzer
    Registriert seit
    13.09.2009.
    Ort
    Münster; NRW
    Beiträge
    77

    Standard

    Zitat Zitat von zoglo Beitrag anzeigen

    Du versuchst 2 mal die Google-API aufzurufen / Du hast zwei Karten in der Seite eingebunden.
    Wenn ich das original Template "ce_dlh_googlemaps_default.html5 " für beide Maps verwende funktionieren beide Maps und ich bekomme keine Fehlermeldung. Also liegt es doch irgendwie an den Änderungen im Template.
    Geändert von makrele (05.03.2024 um 14:58 Uhr)

  4. #4
    Contao-Fan
    Registriert seit
    20.10.2014.
    Beiträge
    485

    Standard

    Zitat Zitat von makrele Beitrag anzeigen
    Wenn ich das original Template "ce_dlh_googlemaps_default.html5 " für beide Maps verwende funktionieren beide Maps und ich bekomme keine Fehlermeldung. Also liegt es doch irgendwie an den Änderungen im Template.

    Hier ein Link zur Seite Link
    vendor/heimrichhannot/dlh_googlemaps/elements/ContentMap.php > Zeile 106-107 auskommentieren

    Nicht updatesicher aber wird eh keine Updates mehr für die Erweiterung geben...

  5. #5
    Contao-Nutzer
    Registriert seit
    13.09.2009.
    Ort
    Münster; NRW
    Beiträge
    77

    Standard

    Zitat Zitat von marcohe Beitrag anzeigen
    vendor/heimrichhannot/dlh_googlemaps/elements/ContentMap.php > Zeile 106-107 auskommentieren

    Nicht updatesicher aber wird eh keine Updates mehr für die Erweiterung geben...
    Ich habe delahaye/dlh_googlemaps

    Den gleichen code wie in der Erweiterung von heimrichhannot finde ich dort aber leider nicht.
    Geändert von makrele (04.03.2024 um 18:53 Uhr)

  6. #6
    Contao-Fan
    Registriert seit
    20.10.2014.
    Beiträge
    485

    Standard

    Zitat Zitat von makrele Beitrag anzeigen
    Ich habe delahaye/dlh_googlemaps
    Stimmt. Übersehen. Da muss ich passen.

    @ Forum Admins > Thema ins Forum: dlh_googlemaps verschieben

    //Moderation: Thema verschoben.
    Geändert von xchs (04.03.2024 um 23:19 Uhr)

  7. #7
    Contao-Fan
    Registriert seit
    24.02.2021.
    Beiträge
    455

    Standard

    Wie bereits von mir erwähnt

    Das ist kein Contao-Problem sondern eine technische Limitierung des Plugins.
    Hier gibt es viele Antworten bzgl. des selben Fehlers.
    https://www.google.com/search?q=+You...xpected+errors

    Aber:
    https://developers.google.com/maps/d...g_the_Maps_API

    Was du hast ist etwas asynchrones und ist auch egal bzgl. der Errors in der Konsole - Es wird weiterhin funktionieren.
    Du müsstest die Initialisierung der Karte umschreiben, sodass hier via JavaScript geprüft wird, ob die GoogleMaps API schon geladen wurde.

    Zusätzlich solltest du deine Cookies anpassen... Nachdem ich meine Einwilligung wieder entfernt habe, werden die Maps trotzdem geladen... Wer ist der Datenschutzbeauftragte ?
    Scherz beiseite - das Cookie "dlh_googlemaps" muss natürlich mitgelöscht werden, musst du im Cookietypen auch explizit angeben

  8. #8
    Contao-Nutzer
    Registriert seit
    13.09.2009.
    Ort
    Münster; NRW
    Beiträge
    77

    Standard

    Danke schon mal für euere Antworten!

    Aktuell habe ich das original "ce_dlh_googlemaps_default.html5" Template für beide Maps eingestellt.
    In den Einstellungen des Google-Maps Plugins habe ich einen Haken bei der Einstellung "Karte hat Datenschutz-Bestätigung" gesetzt. Die Karte wird auch geblockt und keine Verbindung zur Maps API hergestellt.

    Bei einem Klick auf die geblockte Karte wird diese angezeigt und ein Cookie "dlh_googlemaps" gesetzt.

    Über die Cookiebar kann ich jetzt durch "Alle ablehnen" den Cookie löschen und nach einem Reload der Seite sind die Karten wieder gesperrt.
    Durch einen Klick auf "Alle akzeptieren" wird der Cookie aber nicht wieder gesetzt. Erst wenn ich wieder auf die Karte selbst klicke.

    Müsste die Cookiebar nicht auch den Cookie wieder setzen?


    Zitat Zitat von zoglo Beitrag anzeigen
    Scherz beiseite - das Cookie "dlh_googlemaps" muss natürlich mitgelöscht werden, musst du im Cookietypen auch explizit angeben
    In der CookieBar habe ich eine Cookie ID angelegt.

    Cookie-Typ: "Benutzerdefniertes Skript"
    Cookie-Token: "dlh_googlemaps"

    Ich hoffe damit alles explizit angeben zu haben.

  9. #9
    Contao-Nutzer
    Registriert seit
    13.09.2009.
    Ort
    Münster; NRW
    Beiträge
    77

    Standard

    So, ich habe es irgendwie zum laufen bekommen.

    Bei beiden Google Maps Karten ist der Haken "Karte hat Datenschutz-Bestätigung" nicht gesetzt.
    In der Cookiebar einen Cookie-Typ "Hinweis" angelegt "ID5" mit dem Cookie-Token "dlh_googlemaps"

    Jede Map hat sein eigenes Teplate bekommen.

    Map1

    Code:
    <?php
    if($_COOKIE['dlh_googlemaps'] || $this->map['protected']!='1'):
    //$GLOBALS['TL_JAVASCRIPT'][] = 'https://maps.googleapis.com/maps/api/js?key=' . $this->map['key'] . '&language=' . $this->map['language'];
    $this->map['privacy'] == '';
    endif;
    ?>
    Die API im oberen Teil auskommentiert.

    Code:
    document.addEventListener("DOMContentLoaded", function() {
        cookiebar.addModule(5, function(){
       	
        	let script = document.createElement('script');
                script.type = 'text/javascript';
                 
            script.onload = function() {
    	    gmap1_initialize();
    	    gmap2_initialize();
    	};
            script.src = 'https://maps.googleapis.com/maps/api/js?key=<?=$this->map['key']?>&language=<?=$this->map['language']?>';
        	document.head.append(script);
        }, {
    		selector: '#dlh_googlemap_<?= $this->map['id']; ?>',
            message: 'Dieser Inhalt des Drittanbieters Google Maps wird aufgrund Ihrer fehlenden Zustimmung zu Drittanbieter-Inhalten nicht angezeigt.',
            button: { 
                show: true,
                text: 'Google Maps anzeigen',
                classes: 'btn'
            }
        });
    });
    Im unteren Teil dann die Initialisierung von beiden Maps (gmap1/gmap2) und der Button für Map1


    Map2

    Code:
    <?php
    if($_COOKIE['dlh_googlemaps'] || $this->map['protected']!='1'):
    //$GLOBALS['TL_JAVASCRIPT'][] = 'https://maps.googleapis.com/maps/api/js?key=' . $this->map['key'] . '&language=' . $this->map['language'];
    $this->map['privacy'] == '';
    endif;
    ?>
    Die API im oberen Teil auskommentiert.

    Code:
    document.addEventListener("DOMContentLoaded", function() {
        cookiebar.addModule(5, gmap<?= $this->map['id']; ?>_initialize, {
            selector: '#dlh_googlemap_<?= $this->map['id']; ?>',
            message: 'Dieser Inhalt des Drittanbieters Google Maps wird aufgrund Ihrer fehlenden Zustimmung zu Drittanbieter-Inhalten nicht angezeigt.',
            button: {
                show: true,
                text: 'Google Maps anzeigen',
                type: 'button',
                classes: 'btn'
            }
        });
    });
    Im unteren Teil dann der Button für Map2


    Das ist sicherlich kein eleganter Weg aber es funktioniert.
    Sollte jemandem etwas eleganteres einfallen würde ich mich freuen.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 3 (Registrierte Benutzer: 0, Gäste: 3)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •