Leaflet map multiple map marker images

leaflet-multiple-map-marker-images.php

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.fullscreen@1.4.5/Control.FullScreen.js"></script>
<style>.leaflet-control-zoom-fullscreen { background-image: url('<?php echo get_template_directory_uri();?>/images/maps/icon-fullscreen.png');}</style>
<div id='map'></div>
<script type="text/javascript">
    $( document ).ready(function() {
    
        var map = new L.Map('map', {
            center: [-31.898472745592997, 115.81094863686857],
            zoom: 17,
            scrollWheelZoom: false,
            zoomControl: false,
            keyboard: true,
            dragging: true,
            zoomControl: false,
            tap: false,
            touchZoom: true,
            /* Full Screen: https://github.com/brunob/leaflet.fullscreen */
            fullscreenControl: true,
            fullscreenControlOptions: {
                position: 'bottomright'
            },
            layers: [
                new L.TileLayer('https://mt0.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
                    'attribution': '&copy; Map data &copy;<?php echo date('Y'); ?> Google <a href="https://www.google.com/intl/en-GB_US/help/terms_maps.html" target="_blank" rel="noopener">Terms of use</a>'
                })
            ],
        });

        var LeafIcon = L.Icon.extend({
            options: {
                shadowUrl: 'leaf-shadow.png',
                iconSize:     [100, 100],
                //shadowSize:   [50, 64],
                iconAnchor:   [50, 94],
                //shadowAnchor: [4, 62],
                popupAnchor:  [-3, -76]
            }
        });

        /* Zoom control position */
        L.control.zoom({
            position:'bottomright'
        }).addTo(map);

        /* Show scale ruler */
        L.control.scale().addTo(map);

        var sarich_41 = new LeafIcon({iconUrl: '<?php echo get_template_directory_uri();?>/images/maps/sarich_41.png'});
        var collingwood_3_5 = new LeafIcon({iconUrl: '<?php echo get_template_directory_uri();?>/images/maps/collingwood_3_5.png'});
        var guthrie_11 = new LeafIcon({iconUrl: '<?php echo get_template_directory_uri();?>/images/maps/guthrie_11.png'});
        var guthrie_7 = new LeafIcon({iconUrl: '<?php echo get_template_directory_uri();?>/images/maps/guthrie_7.png'});

        var mGreen = L.marker([-31.89748267382316, 115.81075708465701], {icon: sarich_41}).bindPopup('41 Sarich Court Osborne Park').addTo(map);
        var mRed = L.marker([-31.899280891451415, 115.8124565423285], {icon: collingwood_3_5}).bindPopup('3-5 Collingwood Street Osborne Park').addTo(map);
        var mOrange = L.marker([-31.900449506027133, 115.81063516071744], {icon: guthrie_11}).bindPopup('11 Guthrie Street Osborne Park').addTo(map);
        var mOrange = L.marker([-31.900131457686918, 115.81049099999997], {icon: guthrie_7}).bindPopup('7 Guthrie Street Osborne Park').addTo(map);

    });
</script>