{% do jsConfig().add('googleMapAPIKey', googleApiKey()) %}{% extends "layout/default.html.twig" %}{% block content %} <main id="main-content" role="main" class="{{ not editmode ? 'main-content' }} content-block js-content-visibility content-visibility--auto"> <script data-cookieconsent="ignore"> window.addEventListener('CookiebotOnDialogDisplay', function () { window.addEventListener('CookiebotOnAccept', function () { location.reload(); }, false); }, false); </script> {{ include('navigation/breadcrumb.html.twig') }} <section class="locationfinder__container container"> {{ include('includes/title-blocks/title-block.html.twig', { titleTag: 'h1' }) }} <div class="js-locationfinder"> <div class="consent locationfinder__consent js-consent" data-consent-service="marketing"> <div class="consent__overlay js-consent__overlay"> {{ 'cookies.Um die Map anzusehen, müssen Sie die Cookies akzeptieren'|trans }} <a href="javascript: Cookiebot.show()" class="btn btn-primary"> {{ 'cookies.Marketingcookies akzeptieren'|trans }} </a> </div> <template class="js-consent__template"> <div class="js-ajax-form-map-google js-ajax-form locationfinder position-relative" data-google-map-initial-lng="14.306777" data-google-map-initial-lat="47.2183939" data-ajax-form-submit-on-change="true" data-ajax-form-add-url-params="true" data-form-map-url="{{ document.fullpath }}?pois=1"> <div aria-live="polite"> <div class="locationfinder__form-container mb-3"> <form action="" data-action="{{ document.fullpath }}?ajax=1" class="js-ajax-form-map-google__form js-ajax-form__form"> <ul class="list-inline d-flex mb-md-5 mb-3 form-tab-radio-list"> <li class="list-inline-item"> {{ include('includes/form_elements/radio.html.twig', { label: "global.resorts.Alle"|trans, id: "all", name: "resort", value: "all", isTabRadio: true, inputAttributes: { checked: true }, }, with_context = false) }} </li> {% for resortKey in usedResorts %} {% set inputAttributes = [] %} {% if (document.property('resort') == resortKey and not app.request.get('resort')) or (app.request.get('resort') == resortKey) %} {% set inputAttributes = { checked: true } %} {% endif %} <li class="list-inline-item"> {{ include('includes/form_elements/radio.html.twig', { label: ('global.resort.' ~ resortKey)|trans, id: resortKey, name: "resort", value: resortKey, isTabRadio: true, inputAttributes: inputAttributes }, with_context = false) }} </li> {% endfor %} </ul> <div class="row"> <div class="col-md-5"> <div class="position-relative"> <input type="text" class="form-control" name="searchLocationLat" id="searchLocationLat" value="{{ app.request.get('searchLocationLat') ?: '' }}" hidden> <input type="text" class="form-control" name="searchLocationLng" id="searchLocationLng" value="{{ app.request.get('searchLocationLng') ?: '' }}" hidden> {{ include('/includes/form_elements/input.html.twig', { "styleModifier": 'mb-0 w-xs-100', "placeholder": 'locationfinder.location-name:' | trans, "id": 'location', "name": 'location', "inputModifier": 'js-geolocator-search__location-input geolocator-search__location-input', "type" : 'text', "value" : app.request.get('location') ?: '', "inputAttributes": { "data-target-lat": "#searchLocationLat", "data-target-lng": "#searchLocationLng" } } ) }} <span class="geolocator-search__icon icon icon-search" aria-hidden="true"></span> <button type="submit" class="btn js-geolocator-search__submit-btn geolocator-search__submit-btn btn-no-styling">{{ 'global.Suchen'|trans }}</button> </div> </div> <div class="col-md-7"> <div class="d-flex align-items-center h-100 locationfinder-location mt-2 mt-md-3"> <span class="locationfinder-location__text">{{ 'locationfinder.oder'|trans }}</span> <input type="text" class="form-control" name="currentLocationLat" id="currentLocationLat" value="{{ app.request.get('currentLocationLat') ?: '' }}" hidden> <input type="text" class="form-control" name="currentLocationLng" id="currentLocationLng" value="{{ app.request.get('currentLocationLng') ?: '' }}" hidden> <button id="js-geolocator-current" type="submit" class="btn-no-styling js-geolocator-current__btn locationfinder-location__geo-btn text-secondary" data-target-lat="#currentLocationLat" data-target-lng="#currentLocationLng"> <span class="icon icon-target" aria-label="{{ 'locationfinder.Standort automatisch ermitteln'|trans }}" aria-hidden="true"></span> {{ 'locationfinder.Standort automatisch ermitteln'|trans }} </button> </div> </div> </div> </form> <div class="js-ajax-form-map-google__notifications mb-3 js-ajax-form__notifications" hidden></div> <div class="js-ajax-form-map-google__error-area mb-3" hidden> <button class="js-ajax-form-map-google__retry btn btn-info ml-2">{{ 'global.Retry'|trans }}</button> </div> {{ include('includes/overlays/loading-overlay.html.twig', { className: 'js-ajax-form__loading', hidden: true }) }} </div> <div class="row"> <div class="col-md-7"> <div class="js-ajax-form-map__map js-ajax-form-map-google__map locationfinder__map position-relative"> <div class="js-ajax-form-map-google__map__canvas locationfinder__map-canvas border-radius-4 shadow"></div> </div> </div> <div class="col-md-5 gy-1 position-relative"> <div class="locationfinder__list-container scrolling-content"> <div class="locationfinder__list-container-position shadow"> <div class="js-locationfinder-gradient locationfinder__gradient"></div> <div class="js-ajax-form-map-google__result js-ajax-form__result"> {{ include('location/includes/location-list.html.twig') }} </div> </div> </div> </div> </div> </div> </div> </template> </div> {% set legendList = legendList | default([ { "poi":"poi-baumaschinen", "title":"locationfinder.legend.Kuhn Baumaschinen"|trans }, { "poi":"poi-ladetechnik", "title":"locationfinder.legend.Kuhn Ladetechnik"|trans }, { "poi":"poi-group", "title":"locationfinder.legend.Kuhn Baumaschinen & Ladetechnik"|trans }, ]) %} <div class="locationfinder__map-legend-container"> <ul class="locationfinder__map-legend list-inline"> {% for legendItem in legendList %} <li class="list-inline-item locationfinder__map-legend-item mb-1"> <img src="/static/img/map/pois/{{ legendItem.poi }}.svg" class="locationfinder__map-legend-poi me-md-3"> {{ legendItem.title }} </li> {% endfor %} </ul> </div> </div> </section> </main> {{ pimcore_placeholder('jsFile').set("js/locationfinder") }}{% endblock %}