{% extends 'base.html.twig' %}

{% set currentLocal = app.request.locale %}
{% set nameLogo = customParam('name_picto') %}
{% block body %}
<section class="header-all-archi">
    <div class="container">
        <div class="map-architect" id="map"></div>
    </div>
</section>
{% endblock %}

{% block javascripts %}

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"> </script>
<script>
    function initMap() {
        var zoom = 5;
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: zoom,
            center: { lat: {{ website.latitude }}, lng: {{ website.longitude }} }
        });


    var marker = null;
    var myLatLng = null;
    var contentString = ''
    var infoWindow = new google.maps.InfoWindow({
        content: contentString
    });
    var markers = [];
    {% for worker in workers %}
    var window = '<p class="map-company">{{worker.company}}</p>' +
            '<a href="{{ absolute_url(customPath('worker_sheet', { workerKey : worker.workerKey })) }}" class="btn btn-archi-blue btn-in-map">{% trans %}learn_more{% endtrans %}</a>';
    myLatLng = { lat: {{ worker.latitude }}, lng: {{ worker.longitude }} };
    marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: new google.maps.MarkerImage("{{ asset('lib/media/base/' ~ nameLogo) }}")
    });
    markers.push(marker);
    setEventMarker(marker, infoWindow, window);

    {% endfor %}
    mcOptions = [{
        height: 53,
        url: "{{ asset('lib/media/base/m1.png') }}",
        width: 53
        },
        {
        height: 56,
        url: "{{ asset('lib/media/base/m2.png') }}",
        width: 56
        },
        {
        height: 66,
        url: "{{ asset('lib/media/base/m3.png') }}",
        width: 66
        },
        {
        height: 78,
        url: "{{ asset('lib/media/base/m4.png') }}",
        width: 78
        },
        {
        height: 90,
        url: "{{ asset('lib/media/base/m5.png') }}",
        width: 90
        }]

    var markerCluster = new MarkerClusterer(map, markers,
    {
    styles: mcOptions,
    maxZoom: 9,
    gridSize: 50
    });

    }

    function setEventMarker(marker, infowindow, texte) {
        google.maps.event.addListener(marker, 'click', function () {
            // affectation du texte
            infowindow.setContent(texte);
            // affichage InfoWindow
            infowindow.open(map, this);
        });
    }
    function init() {
        initMap();
    }
</script>

<script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNkil3rKocVoPtfM-_-NuoApPY24yR4RU&libraries=places&callback=init&language={{app.request.locale}}"></script>
{% endblock %}