<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
      data-namespace-typo3-fluid="true">


<f:section name="googleMaps">
    <f:if condition="{settings.map.googleMaps.key}">
        <f:then>
            <f:render section="rendering" arguments="{_all}"/>
            <f:render section="mapscripts" arguments="{_all}"/>
        </f:then>
        <f:else>
            <div class="alert alert-danger">{f:translate(key:'no_google_maps_key')}</div>
        </f:else>
    </f:if>
</f:section>

<f:section name="rendering">
    <div class="contact-card contact-card--mapview">
        <div class="contact-map">
            <div id="map{address.uid}" class="gmap-map" data-address="{address.name}"></div>
        </div>
        <div class="contact-body">
            <f:if condition="{address.firstName} || {address.lastName}">
                <div class="contact-name" itemprop="name">
                    {f:if(condition:address.title,then: '{address.title} ')}{address.firstName} {f:if(condition:address.middleName,then: '{address.middleName} ')} {address.lastName}
                </div>
            </f:if>
            <f:if condition="{address.description}">
                <div class="contact-description" itemprop="description">
                    {address.description -> f:format.nl2br()}
                </div>
            </f:if>
            <f:render section="address" partial="Address" arguments="{_all}"/>
            <f:render section="contact" partial="Address" arguments="{_all}"/>
            <f:render section="social" partial="Address" arguments="{_all}"/>
            <div class="contact-channels contact-channels--navigate">
            <div class="contact-directions"><i class="icon icon-location"></i>
            <f:link.external uri="https://www.google.com/maps/search/?api=1&query={address.building -> f:format.urlencode()}%2C{address.address -> f:format.urlencode()}%2C{address.city -> f:format.urlencode()}"  target="_blank" rel="noopener noreferrer">bei Google Maps anzeigen</f:link.external>
            </div>
            </div>
        </div>

    </div>
</f:section>

<f:section name="mapscripts">
    <v:asset.script name="map{address.uid}" fluid="true" standalone="true" overwrite="0" dependencies="gmaps, initgmaps">
        initMap("<f:format.raw>map{address.uid}</f:format.raw>", {lat: <f:format.raw>{address.latitude}</f:format.raw>, lng: <f:format.raw>{address.longitude}</f:format.raw>})
    </v:asset.script>

    <v:asset.script name="initgmaps" fluid="true" standalone="true" overwrite="1">
    function initMap(mapID, addressLatLng) {

        //var mapID = '<f:format.json>map{address.uid}</f:format.json>';
        //var addressLatLng = {lat: <f:format.raw>{address.latitude}</f:format.raw>, lng: <f:format.raw>{address.longitude}</f:format.raw>};

        var map = new google.maps.Map(document.getElementById(mapID), {
            center: addressLatLng,
            zoom: 15,
            disableDefaultUI: true,
            zoomControl: true,
        })

        var marker = new google.maps.Marker({
            position: addressLatLng
        });

        marker.setMap(map);

    }
    </v:asset.script>

    <v:asset.script path="https://maps.googleapis.com/maps/api/js?key={settings.map.googleMaps.key}&callback=initMap" external="true" name="gmaps" rewrite="false" standalone="true" overwrite="1"  />
</f:section>
