{% set azz = '' %}{% if pimcore_select("bullets").getData() != '' %} {% set azz = pimcore_select("bullets").getData() %} {% set azzColor = pimcore_select("bulletColor").getData() %} {% if azzColor is empty %} {% set azzColor = 'stwh-rot-2024' %} {% endif %}{% endif %}{% if editmode %} <div class="bg-gray-100 p-5 wysiwyg-heading"> {% include 'areaHeadAndFooter.html.twig' with { 'header': 'STWH: Googlemaps' } %} {% include 'padding.html.twig' %} <div class="my-3 flex flex-wrap overflow-hidden"> <div class="w-1/4 overflow-hidden"> Darstellungsbreite der Karte: </div> <div class="w-1/4 overflow-hidden pr-3"> {{ pimcore_select("anzeigebreite", { "store": [ ["c", "Content-Breite"], ["f", "Volle Bildschirmbreite"] ], "defaultValue" : "f", "width" : 200 }) }} </div> <div class="w-1/4 overflow-hidden pl-3"> Icon für die Marker: </div> <div class="w-1/4 overflow-hidden"> {{ pimcore_image("mapicon", { "height" : 100 }) }} </div> </div> <hr /> <div class="my-3 flex flex-wrap overflow-hidden"> <div class="w-1/4 overflow-hidden"> Höhe der Karte<br />(default ist 300px): </div> <div class="w-1/4 overflow-hidden"> {{ pimcore_numeric("mapHeight", { "minValue": 1 }) }} </div> <div class="w-1/4 overflow-hidden"> Zoomfaktor<br />(0 bis 18): </div> <div class="w-1/4 overflow-hidden"> {{ pimcore_numeric("mapZoom", { "minValue": 0, "maxValue": 18 }) }} </div> </div> <hr /> <div class="my-3 flex flex-wrap overflow-hidden"> <div class="w-1/4 overflow-hidden"> Content-Überschrift: (optional) </div> <div class="w-3/4 overflow-hidden"> {{ pimcore_input("mapHeadline", { "height" : 50 }) }} </div> </div> <div class="my-3 flex flex-wrap overflow-hidden"> <div class="w-1/4 overflow-hidden"> SEO: </div> <div class="w-1/4 overflow-hidden"> {% include 'seo.html.twig' with { 'name': 'seo', 'default' : 'h2' } %} </div> <div class="w-1/2 overflow-hidden"> {% include 'color-selector.html.twig' with { 'name': 'seoHeadlineColor', 'description': 'Farbe der Überschrift', 'type': 'accordeon' } %} </div> </div> <hr /> <div class="my-3 flex flex-wrap overflow-hidden"> <div class="w-1/4 overflow-hidden"> Teaser: (optional) </div> <div class="w-1/4 overflow-hidden {{ azz }} list-{{ azzColor }}"> {{ pimcore_wysiwyg("mapTeaser", { "height" : 100 }) }} {% include 'bullet-points.html.twig' with { 'name': 'bullets', 'description': 'Aufzählungszeichen' } %} </div> <div class="w-1/4 overflow-hidden"> {% include 'color-selector.html.twig' with { 'name': 'bulletColor', 'description': 'Farbe der Bullets', 'default': 'stwh-rot-2024' } %} </div> <div class="w-1/4 overflow-hidden"> Dummy-Bild (DSGVO-Abfrage): </div> <div class="w-1/4 overflow-hidden"> {{ pimcore_image("dsgvoDummy") }} </div> </div> <hr /> <div class="my-3 flex flex-wrap overflow-hidden"> <div class="w-1/4 overflow-hidden"> Google-Map Adressen </div> <div class="w-3/4 overflow-hidden"> {{ pimcore_relations("google", { "types": ["object"] }) }} </div> </div> </div> {% include 'areaHeadAndFooter.html.twig' with { 'footer': true } %}{% else %} {% set mapicon = pimcore_image("mapicon").getSrc() %} {% set mapId = random() %} {% set height = 300 %} {% if pimcore_numeric("mapHeight").getData() > 0 %} {% set height = pimcore_numeric("mapHeight").getData() %} {% endif %} {% set zoom = 10 %} {% if pimcore_numeric("mapZoom").getData() > 0 %} {% set zoom = pimcore_numeric("mapZoom").getData() %} {% endif %} {% set containerBreite = 'mx-0' %} {% if pimcore_select("anzeigebreite").getData() == 'c' %} {% set containerBreite = 'container mx-auto px-5' %} {% endif %} <section class="wysiwyg-heading {{ pimcore_select('paddingTop') }} {{ pimcore_select('paddingBottom') }} relative bg-{{ pimcore_select('color') }}"> <div class="container mx-auto px-5 pb-5"> <div class="flex flex-wrap"> {% if pimcore_input("mapHeadline") != '' %} {% set seo = pimcore_select("seo").getData() %} <{{ seo }} class="text-{{ pimcore_select("seoHeadlineColor").getData() }} block mb-5 md:mb-10 text-2xl md:text-4xl lg:text-5xl font-bold"> {{ pimcore_input("mapHeadline") }} </{{ seo }}> {% endif %} {% if pimcore_wysiwyg("mapTeaser") != '' %} <div class="w-full lg:mx-auto"> <div class="text-lg {{ azz }} list-{{ azzColor }}"> {{ pimcore_wysiwyg("mapTeaser") }} </div> </div> {% endif %} </div> </div> <div class="{{ containerBreite }}"> <div class="map" id="map-{{ mapId }}" style="height:{{ height }}px;"> <div class="w-full h-full bg-cover bg-center" id="map-placeholder" style="background: url('{{ pimcore_image("dsgvoDummy").getSrc() }}');"> <div class="w-full h-full flex flex-col justify-center items-center backdrop-blur-sm"> <div class="bg-white w-full lg:w-1/4 text-center p-5"> <p class="font-bold">Google Maps wurde geblockt,<br /> da Sie nicht Ihr Einverständnis zu dem<br /> erforderlichen Cookie gegeben haben.</p> <button onclick="showOnce();" class=" mt-3 px-5 py-2 w-full block hover:bg-red-600 hover:text-white text-red-600 relative focus:outline-none border-2 border-solid rounded-lg border-red-600 text-sm text-center tracking-widest" type="button"> Diese Karte einmalig laden </button> <button onclick="showEver();" class=" mt-3 px-5 py-2 w-full block hover:bg-red-600 hover:text-white text-red-600 relative focus:outline-none border-2 border-solid rounded-lg border-red-600 text-sm text-center tracking-widest" type="button"> Karten immer laden </button> </div> </div> </div> </div> </div> </section> <script type="text/javascript"> window.googleMapsApiKey = "{{ document.getProperty('googleAPI') }}"; function showOnce() { window.activateGoogleMaps(); } function showEver() { window.activateGoogleMaps(true); } function googleMapsInit() { // Herne 51.5402529, 7.2050891 var myLatLng = { lat : 51.5402529, lng : 7.2050891 }; var locations = new Array(); {# @array adressen wird im Brick-Controller definiert #} {% if adressen is defined %} {% for data in adressen %} {% set addr = data.address %} {% set addr = addr|replace({"\n": "-", "\r": "-", "\t": "-"}) %} locations.push({ address : '{{ addr }}', lat : '{{ data.lat }}', lng : '{{ data.lng }}', label : '{{ data.label }}', marker : '{{ mapicon }}' }); {% endfor %} {% endif %} var mapOptions = { zoom: {{ zoom }}, center: myLatLng, styles: [ { "featureType": "administrative", "elementType": "labels", "stylers": [ { "visibility": "simplified" }, { "color": "#ff0000" } ] }, { "featureType": "administrative", "elementType": "labels.text.fill", "stylers": [ { "color": "#444444" } ] }, { "featureType": "administrative.country", "elementType": "labels", "stylers": [ { "color": "#fc0505" }, { "visibility": "on" } ] }, { "featureType": "administrative.province", "elementType": "labels", "stylers": [ { "color": "#ff0000" }, { "visibility": "simplified" } ] }, { "featureType": "administrative.locality", "elementType": "labels", "stylers": [ { "color": "#ff0000" }, { "visibility": "simplified" } ] }, { "featureType": "administrative.neighborhood", "elementType": "labels", "stylers": [ { "color": "#ff0000" }, { "visibility": "simplified" } ] }, { "featureType": "administrative.land_parcel", "elementType": "labels", "stylers": [ { "color": "#ff0000" }, { "visibility": "simplified" } ] }, { "featureType": "landscape", "elementType": "all", "stylers": [ { "color": "#f2f2f2" } ] }, { "featureType": "poi", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "road", "elementType": "all", "stylers": [ { "saturation": -100 }, { "lightness": 45 } ] }, { "featureType": "road.highway", "elementType": "all", "stylers": [ { "visibility": "simplified" } ] }, { "featureType": "road.arterial", "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "featureType": "transit", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "water", "elementType": "all", "stylers": [ { "color": "#ffffff" }, { "visibility": "on" } ] } ] }; var mapElement = document.getElementById('map-{{ mapId }}'); var map = new google.maps.Map(mapElement, mapOptions); var infowindow = new google.maps.InfoWindow(); for (var i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position : new google.maps.LatLng(locations[i]['lat'], locations[i]['lng']), map : map, animation : google.maps.Animation.DROP, icon : new google.maps.MarkerImage( locations[i]['marker'], null, null, null, new google.maps.Size(57, 57) ), }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { content = ''; route = ''; content += '<span class="font-bold text-xl">' + locations[i]['label'] + '</span>'; var addr = locations[i]['address'].split('-'); addr.forEach(element => { content += '<p class="text-xl">' + element + '</p>'; route += element + '+'; }); var astr = encodeURIComponent(route.replace(' ', '+')); content += '<p><a class="text-xl block text-red-600 pt-1 hover:underline" href="http://maps.google.com/maps?daddr=' + astr + '" target="_blank">Route planen</a></p>'; infowindow.setContent( content ); infowindow.open(map, marker); } })(marker, i)); } } </script>{% endif %}