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
