Blog

    <!-- 2. Container for the map -->
    <div id="map"></div>

    <!-- 3. Load necessary JavaScript libraries -->
    <!-- jQuery (Required for $) -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Leaflet (Required for L) -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

    <!-- 4. Your custom script goes here -->
    <script>
        // IMPORTANT: You must define the 'map' object before this script runs.
        // This is a standard Leaflet initialization.
        var map = L.map('map').setView([51.505, -0.09], 13);

        // Add a tile layer to view the map
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);


        // --- START OF THE CODE YOU PROVIDED ---
        $(document).ready(function() {
            $.ajax({
                url: 'path/to/your/script.php', // <-- REPLACE THIS WITH YOUR ACTUAL URL
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    // Process the data and add it to your Leaflet map
                    data.forEach(function(item) {
                        L.marker([item.lat, item.lng]).addTo(map)
                            .bindPopup(item.name);
                    });
                },
                error: function(error) {
                    console.error('Error fetching data:', error);
                }
            });
        });
        // --- END OF THE CODE YOU PROVIDED ---
    </script>