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 >}}

GitHub's code formatting really does not like the mix of HTML, markdown, and go template syntax.

Thanks sooo much for this! I get an error message though when calling {{< leaflet-load-short >}}, so I tried just calling leaflet-load globally from my header, like

{{ if .Params.maps }}
    {{ partial "leaflet-loader" . }}
{{ end }}

but am then still getting that leafletMapsObj is not defined error :(

Make sure that leaflet.hugo.js is being loaded properly, that is where leafletMapsObj is defined.

&&

I know this sounds really crazy. But a simple:

<script>
let leafletMapsObj = {};
</script>

added somewhere in the desired page, might do the trick. This later situation might work if for some reason or another the variable is being overwritten or corrupted.

Have you tried my map.md file?

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