Bonjour,

Dans mon code ci-dessous, l'autocomplete des 2 adresses fonctionnes, cependant après avoir introduit et confirmer les 2 adresses quand je clique sur "Afficher sur la carte", les 2 adresses ne sont pas marquées comme prévu sur la carte, l'itinéraire n'est pas tracé et la distance et le temps de trajet ne s'affiche pas, est-ce que quelqu'un sait où se situe mon erreur svp ?

Pour tester le lien est http://lc-sd.be

Merci d'avance.

Voici le code :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carte</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>
    <style>
        #map {
            height: 500px;
            width: 100%;
        }
        #results {
            height: 200px;
            width: 300px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
        <center><u><b>Trajet :</b></u></center><br /><br />
    <form id="addressForm">
        <label for="address1">Adresse de départ : </label>
        <input type="text" id="address1" name="address1" oninput="autocompleteAddress('address1', 'results1')"><br /><br />
        <div id="results1"></div>
        <label for="address2">Adresse d'arrivée : </label>
        <input type="text" id="address2" name="address2" oninput="autocompleteAddress('address2', 'results2')"><br /><br />
        <div id="results2"></div>
        <button type="button" onclick="updateMap()">Afficher sur la carte</button><br />
    </form><br /><br />
    <div id="distance">Distance: </div>
    <div id="time">Temps: </div>
    <div id="map"></div>
    <script>
        var waypoints = [{}, {}]; // Stocker les coordonnées des adresses
 
        // Initialiser la carte et définir ses options
        var map = L.map('map').setView([50.8504500, 4.3487800], 13); // Coordonnées pour Bruxelles
 
        // Ajouter la couche OpenStreetMap
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
 
        // Ajouter le contrôle de routage
        var control = L.Routing.control({
            routeWhileDragging: true,
            geocoder: L.Control.Geocoder.nominatim(),
            router: new L.Routing.osrmv1({
                serviceUrl: 'https://router.project-osrm.org/route/v1'
            }),
            createMarker: function(i, wp) {
                var color = i == 0 ? 'blue' : 'red';
                var icon = new L.Icon({
                    iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-' + color + '.png',
                    shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
                    iconSize: [25, 41],
                    iconAnchor: [12, 41],
                    popupAnchor: [1, -34],
                    shadowSize: [41, 41]
                });
                return L.marker(wp.latLng, {icon: icon}).bindPopup('Adresse ' + (i + 1));
            },
            lineOptions: {
                styles: [{color: 'blue', opacity: 0.6, weight: 4}]
            },
            addWaypoints: false
        }).addTo(map);
 
        // Ajouter un gestionnaire d'événements pour l'événement 'routesfound'
        control.on('routesfound', function(e) {
            var routes = e.routes;
            var summary = routes[0].summary;
            // Afficher la distance (en kilomètres) et le temps (en minutes)
            var distance = (summary.totalDistance / 1000).toFixed(2);
            var time = (summary.totalTime / 60).toFixed(2);
            document.getElementById('distance').innerHTML = 'Distance: ' + distance + ' km';
            document.getElementById('time').innerHTML = 'Temps: ' + time + ' min';
            var routeShape = routes[0].coordinates;
            var line = L.Routing.line(routes[0]);
            var marker = L.marker(routeShape[routeShape.length - 1]).bindPopup('Distance: ' + distance + ' km<br>Temps: ' + time + ' min');
            line.addTo(map);
            marker.addTo(map);
        });
 
        function updateMap() {
            var lat1 = waypoints[0].lat || 50.8504500; // Coordonnées par défaut pour Bruxelles
            var lon1 = waypoints[0].lon || 4.3487800;
            map.setView([lat1, lon1], 13);
            control.spliceWaypoints(0, 1, L.latLng(lat1, lon1));
            L.marker([lat1, lon1], {icon: new L.Icon({iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41]})}).addTo(map).bindPopup('Adresse de départ');
 
            var lat2 = waypoints[1].lat || 50.8504500;
            var lon2 = waypoints[1].lon || 4.3487800;
            control.spliceWaypoints(control.getWaypoints().length - 1, 1, L.latLng(lat2, lon2));
            L.marker([lat2, lon2], {icon: new L.Icon({iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41]})}).addTo(map).bindPopup('Adresse d\'arrivée');
        }
 
        function autocompleteAddress(inputId, resultsId) {
            var address = document.getElementById(inputId).value;
 
            fetch(`https://nominatim.openstreetmap.org/search?format=json&viewbox=-31.268,28.626,39.659,81.008&q=${address}`)
                .then(response => response.json())
                .then(data => {
                    var resultsDiv = document.getElementById(resultsId);
                    resultsDiv.innerHTML = '';
 
                    data.forEach(item => {
                        var div = document.createElement('div');
                        div.textContent = item.display_name;
                        div.onclick = function() {
                            document.getElementById(inputId).value = item.display_name;
                            waypoints[inputId === 'address1' ? 0 : 1] = {lat: parseFloat(item.lat), lon: parseFloat(item.lon)};
                            resultsDiv.innerHTML = '';
                        };
                        resultsDiv.appendChild(div);
                    });
                });
        }
    </script>
</body>
</html>