markers.html

<script>
    //Map the offices array to an array Leaflet Markers, and add them to the map. Bind a function to the popup event.
    const officeMarkers = offices.map((element) => {
        const marker = L.marker(L.latLng([element.latitude, element.longitude]));
        marker.bindPopup(officeInfo(element))
            .addTo(map);
        return marker;
    });

    //Add the array of Leaflet Markers to a Leaflet Feature group. Fit the bounds of the map the bounds of the Feature group.
    const group = new L.featureGroup(officeMarkers);
    map.fitBounds(group.getBounds());

    //Function to return the HTML string for display within a Leaflet Popup.
    function officeInfo(office) {            
        return  `<div class='at-leaflet-popup'>
                <div class='at-leaflet-popup__content'>
                    <dl class='at-leaflet-popup__info'>
                        <dt>${office.name}</dt> 
                    </dl>
                </div>
            </div>`;
    }
</script>