Shortcodes for leaflet-map in order: 1) Load the map. 2) Map shortcode and parameters. 3) Map markers and parameters. 4) BONUS: the actual hugo page I used.

leaflet-load.html

<!-- Leaflet (JS/CSS) -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
    crossorigin=""></script>

<!-- leaflet-elevation -->
<link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation@1.1.1/dist/leaflet-elevation.css" />
<script type="text/javascript" 
    src="/js/leaflet.elevation.js"
    integrity="sha512-+dFPFnSnrpaV8EtkRi1QF86yaQrKRs9EixM/Hhk0AdjgXSbApMajE98D0N2+81x2FI4Tu9wTmuedkm5QVWBYHg=="
    crossorigin="anonymous"></script>

<!-- leaflet-hugo -->
<script type="text/javascript" 
    src="/js/leaflet.hugo.js"
    integrity="sha512-yL+cd0B32ZX4drh75NRZUO5Acs+eIbkVAucT/O/u3Q04qxFavoQfU35f8vQJgWYvm+v2MehlkL5tYE52b2ov5Q=="
    crossorigin="anonymous"></script>

<!-- Icons -->
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/leaflet.extra-markers.min.css">
<script type="text/javascript"
    src="/js/leaflet.extra-markers.min.js"
    integrity="sha512-ejMFZwlfxDqEaSHHcCJ9EhzzDyp3QB5NjmGfOp1iwUQ7pFam2pX3EKERWvWK8H5HLQG6ETrx3RvrEFMQ4kIQ/Q=="
    crossorigin="anonymous"></script>

leaflet-map.html

{{ if .IsNamedParams }}

{{ $mapLat := default "" (.Get "mapLat") }}
{{ $mapLon := default "" (.Get "mapLon") }}
{{ $zoom := default "13" (.Get "zoom") }}
{{ $mapWidth := default "100%" (.Get "mapWidth") }}
{{ $mapHeight := default "400px" (.Get "mapHeight") }}
{{ $mapId := default (md5 (printf "%s%s" $mapLat $mapLon)) (.Get "mapId") }}
{{ $scrollWheelZoom := default "true" (.Get "scrollWheelZoom") }}

<!--Container-->
<div id='mapid_{{ $mapId }}' class="leaflet-map" style='width: {{ $mapWidth }}; height: {{ $mapHeight}};'></div>

<script>
    //Create Map
    leafletMapsObj[{{ $mapId }}] = L.map('mapid_{{ $mapId }}').setView([{{ $mapLat }}, {{ $mapLon }}], {{ $zoom }});
    {{ if eq $scrollWheelZoom "false" }}
        leafletMapsObj[{{ $mapId }}].scrollWheelZoom.disable();
    {{ end }}
    //Add tiles
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(leafletMapsObj[{{ $mapId }}]);

</script>
{{.Inner}}

{{ else }}
{{ errorf "Leaflet Hugo Shortcode: please provide named Parameters" }}
{{ end }}

leaflet-marker.html

{{ if .IsNamedParams }}

{{ $markerLat := default "" (.Get "markerLat") }}
{{ $markerLon := default "" (.Get "markerLon") }}
{{ $markerContent := default "" (.Get "markerContent") }}

    {{ with .Parent }}

        {{ $mapLat := default "" (.Get "mapLat") }}
        {{ $mapLon := default "" (.Get "mapLon") }}
        {{ $mapId := default (md5 (printf "%s%s" $mapLat $mapLon)) (.Get "mapId") }}
        {{ $markerId := md5 (printf "%s%s%s" $mapId $markerLat $markerLon)}}

        <script>
            //Marker
            leafletMarkersObj[{{ $markerId }}] = L.marker([{{ $markerLat }}, {{ $markerLon }}]).addTo(leafletMapsObj[{{ $mapId }}]);

            {{ if $markerContent }}
                leafletMarkersObj[{{ $markerId }}].bindPopup("{{ $markerContent }}").openPopup();
            {{ end }}
        </script>

    {{ else }}
    {{ errorf "Leaflet Hugo Shortcode: impossible using marker outside leaflet-map" }}
    {{ end }}

{{ else }}
{{ errorf "Leaflet Hugo Shortcode: please provide named Parameters for marker" }}
{{ end }}

map.md

+++ aliases = ["locations", "map"] author = "anoduck" date = 2021-09-21T00:00:00Z description = "Random as f3<% places in Oklahoma, never been there though." title = "Map"

+++

A Map of random places in oklahoma, I think.

{{< leaflet-load-short >}}

{{< leaflet-map mapHeight="600px" mapWidth=100% mapLat="35.4577" mapLon="-97.5891" zoom="12">}}

{{< leaflet-marker markerLat="35.4233" markerLon="-97.6187" markerContent="Some example text">}} {{< leaflet-marker markerLat="35.4605" markerLon="-97.6546" markerContent="Some more example text">}} {{< leaflet-marker markerLat="35.4678" markerLon="-97.7253" markerContent="And even more example text">}} {{< /leaflet-map >}}

I have the same problem as @Dkp22 , unable to get this to work, and console keeps giving this error: leafletMapsObj is not defined.