{# settings #}{% extends ('areas_shared/settings.html.twig') %}{% block content %} {# default margin bottom #} {% if marginBottom.isEmpty() %} {% do marginBottom.setDataFromResource('full-margin-bottom') %} {% endif %} {# default background color #} {% if backgroundColor.isEmpty() %} {% do backgroundColor.setDataFromResource('background-white') %} {% endif %} {# latitude #} {% set latitude = pimcore_input('latitude', { 'placeholder': '123.456' }) %} {# longitude #} {% set longitude = pimcore_input('longitude', { 'placeholder': '123.456' }) %} {# zoom #} {% set zoom = pimcore_input('zoom', { 'placeholder': '13' }) %} {# infowindow #} {% set infowindow = pimcore_textarea('infowindow', { 'placeholder': 'Text', 'nl2br': true }) %} {# infowindow #} {% set companyName = pimcore_input('companyName', { 'placeholder': 'Text' }) %} {# editmode #} {% if editmode %} <div class="editmode"> <div class="accordion-container"> <div class="accordion-button"> <span class="accordion-button-text">Karte</span> {{ include('svg/editmode/setting.html.twig') }} </div> <div class="panel"> <div class="settings-container"> <div class="setting input"> <label>Anker:</label> {{ anchor|raw }} </div> <div class="setting select"> <label>Abstand unten:</label> {{ marginBottom|raw }} </div> <div class="setting input"> <label><strong>Standort</strong></label> <label>Breitengrad</label> {{ latitude|raw }} <label>Längengrad</label> {{ longitude|raw }} <label>Zoom:</label> {{ zoom|raw }} <label>Popup:</label> {{ infowindow|raw }} <label>Mouseover-Tooltip:</label> {{ companyName|raw }} </div> </div> </div> </div> </div> {% endif %} <div class="karte-brick brick-container {{ backgroundColor.data }} {{ marginBottom.data }}" id="mapContainer"> {# anchor #} {% if anchor.data %} <div class="anchor" id="{{ anchor.data }}"></div> {% endif %} <div class="container-1420"> <div class="map" id="map"> </div> <script> // load map script function loadMap() { const script = document.createElement('script'); script.src = "https://maps.googleapis.com/maps/api/js?key=" + window.googleMapsAPI + "&callback=initMap&libraries=&v=weekly"; document.head.appendChild(script); } // initialize and add the map function initMap() { // location: // 47.18298765988833, 8.107441975161748 {% if latitude.data and longitude.data %} const location = { lat: {{ latitude.data }}, lng: {{ longitude.data }} }; {% else %} const location = null; {% endif %} // styles /* const styles = [ { "featureType": "administrative", "elementType": "all", "stylers": [ { "saturation": "-100" } ] }, { "featureType": "administrative.province", "elementType": "all", "stylers": [ { "visibility": "off" } ] }, { "featureType": "landscape", "elementType": "all", "stylers": [ { "saturation": -100 }, { "lightness": 65 }, { "visibility": "on" } ] }, { "featureType": "poi", "elementType": "all", "stylers": [ { "saturation": -100 }, { "lightness": "50" }, { "visibility": "simplified" } ] }, { "featureType": "road", "elementType": "all", "stylers": [ { "saturation": "-100" } ] }, { "featureType": "road.highway", "elementType": "all", "stylers": [ { "visibility": "simplified" } ] }, { "featureType": "road.arterial", "elementType": "all", "stylers": [ { "lightness": "30" } ] }, { "featureType": "road.local", "elementType": "all", "stylers": [ { "lightness": "40" } ] }, { "featureType": "transit", "elementType": "all", "stylers": [ { "saturation": -100 }, { "visibility": "simplified" } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "hue": "#ffff00" }, { "lightness": -25 }, { "saturation": -97 } ] }, { "featureType": "water", "elementType": "labels", "stylers": [ { "lightness": -25 }, { "saturation": -100 } ] } ]; */ // map var map = new google.maps.Map(document.getElementById("map"), { mapTypeId: google.maps.MapTypeId.ROADMAP, //styles: styles }); // marker const fontawesomeMarker = "M27.648-41.399q0-3.816-2.7-6.516t-6.516-2.7-6.516 2.7-2.7 6.516 2.7 6.516 6.516 2.7 6.516-2.7 2.7-6.516zm9.216 0q0 3.924-1.188 6.444l-13.104 27.864q-.576 1.188-1.71 1.872t-2.43.684-2.43-.684-1.674-1.872l-13.14-27.864q-1.188-2.52-1.188-6.444 0-7.632 5.4-13.032t13.032-5.4 13.032 5.4 5.4 13.032z"; var markers = []; const marker = new google.maps.Marker({ position: location, map: map, icon: { path: fontawesomeMarker, scale: 0.7, strokeWeight: 1, strokeColor: '#b21610', strokeOpacity: 1, fillColor: '#ea4336', fillOpacity: 1, anchor: new google.maps.Point(18.25, -5) }, title: '{{ companyName.data }}' }); markers.push(marker); /* if (location) { if (window.innerWidth < 460) { var markerSursee = new google.maps.Marker({ position: location, map, //title: "artimelt AG", icon: { url: '/assets/svg/map_icon_mobile.svg', size: new google.maps.Size(50, 50), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(25, 50) } }); } else { var markerSursee = new google.maps.Marker({ position: location, map, //title: "artimelt AG", icon: { url: '/assets/svg/map_icon.svg', size: new google.maps.Size(70, 70), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(35, 70) } }); } markers.push(markerSursee); } */ var bounds = new google.maps.LatLngBounds(); for (i = 0; i < markers.length; i++) { bounds.extend(markers[i].getPosition()); } // center the map if (markers.length > 1) { map.setCenter(bounds.getCenter()); } else { map.setCenter(location); } // center the map to the geometric center of all markers if (markers.length > 1) { map.fitBounds(bounds, 35); // remove one zoom level to ensure no marker is on the edge. //map.setZoom(map.getZoom() + 1); if (window.innerWidth > 1200) { map.fitBounds(bounds, 50); } } else if (markers.length == 1) { map.setZoom({{ zoom.data }}); } else { map.setZoom(13); } // info windows var infoWindows = []; {% if infowindow.data %} const infowindow = new google.maps.InfoWindow({ content: '{{ infowindow.data|replace({"\n": ' ', "\r": ' '})|raw }}', maxWidth: 500 }); infoWindows.push(infowindow); {% endif %} // info windows popup {% if infowindow.data %} for (var i = 0; i < markers.length; i++) { const marker = markers[i]; const counter = i; marker.addListener('click', () => { infoWindows[counter].open({ anchor: marker, map, shouldFocus: false }); }); } {% endif %} } </script> {% if editmode %} <script> let map = document.getElementById('map'); let mapContainer = document.getElementById('mapContainer'); if (map && mapContainer) { mapContainer.classList.add('active'); // script exists if (typeof google !== undefined && typeof google === 'object' && typeof google.maps === 'object') { initMap(); // load script } else { loadMap(); } } </script> {% endif %} </div> </div>{% endblock %}