Open Street Map Static Image to Interactive Map Shortcode for Hugo

open-street-map.html

<!-- Open Street Map Static Map Shortcode -->
<!-- Bootatrap 5.3 -->
            <div class="container" id="map-container-{{ .Get "id" }}" style="cursor: pointer;">
                <figure>
                    <img class="img-fluid" loading="lazy" id="static-map-{{ .Get "id" }}" src="{{ .Get "mapImg" }}" alt="{{ .Get "mapLocation" }}" title="{{ .Get "mapTitle" }} Click to view the interactive map" width="1280" height="450">
                    <figcaption>Click to view the interactive map<a href="https://www.openstreetmap.org/copyright" rel="noreferrer noopener" target="_blank"><small><span class="float-end">©OpenStreetMap</span></small></a>                    
                    </figcaption>
                </figure>
            </div>
<script>
document.getElementById('static-map-{{ .Get "id" }}').addEventListener('click', function() {
    var container = document.getElementById('map-container-{{ .Get "id" }}');
    var iframeCode = '<div class="container"><iframe src="{{ .Get "iframeSrc" }}" width="100%" height="450" frameborder="0" style="border:0" title="{{ .Get "mapTitle" }}" style="border: 1px solid black"></iframe><br/><div class="text-center"><a href="{{ .Get "mapLink" }}" rel="noreferrer noopener" target="_blank">View Larger Map</a></div></div>';

    // Replace the static image with the Open Street Map iframe
    container.innerHTML = iframeCode;
});
</script>

shortcode-usage.md

{{< open-street-map id="guggenheim-bilbao" mapTitle="Map of Guggenheim Bilbao" mapLocation="Guggenheim Museum Bilbao Abandoibarra Etorb., 2, Abando, 48009 Bilbo, Bizkaia, Spain" mapImg="guggenhein-bilbao-capture.webp" mapLink="https://www.openstreetmap.org/?mlat=43.26858&amp;mlon=-2.93396#map=18/43.26858/-2.93396" iframeSrc="https://www.openstreetmap.org/export/embed.html?bbox=-2.938274145126343%2C43.26687429022074%2C-2.9296535253524785%2C43.27027649854556&amp;layer=mapnik&amp;marker=43.26857541815403%2C-2.9339638352394104" >}}