<div class="grid-container">
    <div class="map-container">
        <div id="map" class="map"></div>
    </div>
</div>
<script>
    
    var map = L.map('map').setView([45.438, 12.327], 15);

    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        scrollWheelZoom: false,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    map.scrollWheelZoom.disable()

    var buildings = [
        [
            [45.433, 12.316],
            "<b>Terese</b> / Dorsoduro 2206<br><a href=\"#\">Vedi sede</a>"
        ],
        [
            [45.43833199851948, 12.325662599025984],
            "<b>Badoer</b> / San Polo 2468<br><a href=\"#\">Vedi sede</a>"
        ],
        [
            [45.43881840347008, 12.322439965103174],
            "<b>Campo della Lana</b> / Santa Croce 601<br><a href=\"#\">Vedi sede</a>"
        ],
        [
            [45.43848284980703, 12.32527031293362],
            "<b>Casa del gondolier</b> / San Polo 2468/B<br><a href=\"#\">Vedi sede</a>"
        ],
        [
            [45.4378702946963, 12.32237261293365],
            "<b>Tolentini</b> / Santa Croce 191<br><a href=\"#\">Vedi sede</a>"
        ],
        [
            [45.441842547179405, 12.329984185950124],
            "<b>Ca’ Tron</b> / Santa Croce 1957<br><a href=\"#\">Vedi sede</a>"
        ],
        [
            [45.432032238634314, 12.315256412933396],
            "<b>Cotonificio veneziano</b> / Dorsoduro, 2196<br><a href=\"#\">Vedi sede</a>"
        ],
        [
            [45.432001409689356, 12.31707658409729],
            "<b>Magazzino 7</b> / Dorsoduro 1827<br><a href=\"#\">Vedi sede</a>"
        ],
        [
            [45.432001409689356, 12.31707658409729],
            "<b>Magazzino 6</b> / Dorsoduro 1827<br><a href=\"#\">Vedi sede</a>"
        ],
        [
            [45.43604375533904, 12.325339126425341],
            "<b>Masieri</b> / Dorsoduro 3900<br><a href=\"#\">Vedi sede</a>"
        ],
        [
            [45.47947529790401, 12.25534831752581],
            "<b>Mestre</b> / via Torino 153/a<br><a href=\"#\">Vedi sede</a>"
        ]
    ]

    function resetMarkersStyle(){
        for (let index = 0; index < buildings.length; index++) {
            window['circle'+'_'+index].setStyle({color: '#000', fillColor: '#000'})
        }
    }

    for (let index = 0; index < buildings.length; index++) {
        window['circle'+'_'+index] = L.circleMarker(buildings[index][0], 
            {
                color: '#000',
                fillColor: '#000',
                fillOpacity: 1,
                radius: 9
            })
            .addTo(map)
            .bindPopup(buildings[index][1])
            .on('click', function(e){
                resetMarkersStyle()
                this.setStyle({color: '#6E7878', fillColor: '#6E7878'})
                this.bringToFront()
            })
        ;

    }

    map.addEventListener('click', function(e){
        resetMarkersStyle()
    })



</script>