{{ asset_script("https://maps.google.com/maps/api/js?key=" ~ config('anomaly.field_type.geocoder::google.key', env('GEOCODER_KEY'))) }}

<div id="map">
    <div class="container">

        <div class="title">
            <h1>{{ template.meta_title }}</h1>
        </div>

    </div>

    <div id="google"></div>

</div>

<script type="text/javascript">

    /**
     * Create a new map.
     */
    var map = new google.maps.Map(document.querySelector("#google"), {
        center: {
            lat: {{ variable('locations', 'map_center').latitude }},
            lng: {{ variable('locations', 'map_center').longitude }}
        },
        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}]
        }],
        scrollwheel: false,
        zoom: {{ variable_value('locations', 'map_zoom', 14) }}
    });

    /**
     * Display the position as a marker.
     */
    {% for location in variable('locations', 'locations') %}
    var marker = new google.maps.Marker({
            map: map,
            icon: "{{ img(template.theme.marker ?: 'qcr.theme.qcr::img/pinpoint.png').path }}",
            title: "{{ location.name }}",
            position: new google.maps.LatLng({{ location.location.latitude(true) }}, {{ location.location.longitude(true) }})
        });
    {% endfor %}
</script>
