lemon-admin/resources/views/app/my-account/admin/orders/partials/map.blade.php

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />

<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>
@if(count($ordersMapRecords) !== count($orders))
<div class="alert alert-danger mb-1">
   <i class="fa-solid fa-triangle-exclamation fa-fw me-1" style="font-size: 25px;"></i> There are <b>{{ count($orders) }}</b> but only <b>{{ count($ordersMapRecords) }}</b> have coordinates!
</div>
@endif
<style>
    #map {
        width: 100%;
        height: 90vh;
    }
</style>
<div class="border mb-3">
    <div id="map"></div>
</div>

<script>
    (function($) {
        var mapViewComponent = {
            orders:<?= json_encode($ordersMapRecords) ?>,
            defaultLocation: [51.505, -0.09],
            defaultLocationZoom: 8,

            getRandom: function(min, max) {
                return Math.random() * (max - min) + min;
            },
            initMap: function() {
                var map = L.map('map');
                L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                }).addTo(map);

                var markers = new L.MarkerClusterGroup();

                for (let i = 0; i < this.orders.length; i++) {
                    let order = this.orders[i];
                    // var lat = this.getRandom(37, 39);
                    // var lng = this.getRandom(-9.5, -6.5);
                    var lat = order.latitude;
                    var lng = order.longitude;

                    if(i == 0){
                        this.defaultLocation = [lat, lng];
                    }
                    const marker = L.marker([
                        lat,
                        lng
                    ])
                    marker.bindPopup(`
                        <b><a href="/admin/users/view/${order.clientUid}/dashboard">${order.clientName}</a><b><br>
                        <a href="/admin/orders/view/${order.uid}/dashboard">Order #:${order.orderNumber}</a><br>
                        <span>${order.shippingAddress}</span>
                    `).openPopup();
                    markers.addLayer(marker);
                }

                map.addLayer(markers);
                map.setView(this.defaultLocation, this.defaultLocationZoom)
            },
            init: function() {
                this.initMap();
            }
        };
        mapViewComponent.init();
    })(jQuery);
</script>