I have an issue with a Leaflet map and SQL data. My project is a website where we do house renting. I would like to display the map with a pinpoint with the address stored in my SQL database. I use PHP, HTML and CSS to build the project.

In the file traitement_annonce.php

$adresse = $_POST['adresse_a'];
$sql = "INSERT INTO annonce (adresse_a)";

For the leaflet map it’s like this:

In the file affichage_annonce.php

$adresse_a = $annonce["adresse_a"];
$address = htmlspecialchars($adresse_a);
        
echo '<h1>Adresse: <?php echo $address; ?></h1>
    <div id="map"></div>

<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
    var address = "<?php echo $address; ?>";
    var map = L.map("map").setView([51.505, -0.09], 13); // Coordonnées par défaut en attendant la recherche

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: "© OpenStreetMap contributors"
    }).addTo(map);

    fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(address)}`)
        .then(response => response.json())
        .then(data => {
            if (data && data.length > 0) {
                var lat = data[0].lat;
                var lon = data[0].lon;
                map.setView([lat, lon], 13);
                L.marker([lat, lon]).addTo(map)
                    .bindPopup(address)
                    .openPopup();
            } else {
                alert("Adresse non trouvée.");
            }
        })
        .catch(error => {
            console.error("Error fetching data:", error);
        });
</script>';