Bonjour,

Je débute dans le développement donc désolé pour les erreurs.

Je souhaite réaliser un autocomplete (réalisé grâce à jquery) qui soit en interaction avec les markers de ma carte OSM (réalisée avec leaflet).

Le but est que quand je choisie une voie je sois redirigé vers la voie sur ma carte (pas le plus important) et que quand je clique sur un marqueur de ma carte ça remplisse la case voie de mon formulaire (le plus important).

Pour le moment le peu de chose que j'ai réalisé fonctionne très bien mais là je suis bloqué.

Le formulaire pour le moment renvoie vers une page cible mais le but sera de remplir une base de données.

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
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<title>Castets</title>
		<!-- en dessous les scripts CSS -->
		<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	</head> 
 
 
	<body>	
 
		<!-- en dessous les scripts JS -->
		<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
		<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
		<script>
                $( function() {
                        var availableTags = [
                        "ALLEE SAINT GABRIEL",
                        "CHEMIN DE LA MOUSQUE",
                        "CHEMIN DE LAGESTE",
                        "CHEMIN DU STUCS",
 
 
                        
                        ];
                        $( "#tags" ).autocomplete({
                        source: availableTags
                        });
                } );
          </script>	
 
 
 
 
 
 
		<p>Formulaire</p>
 
		<form method="post" action="cible.php">
 
		   <p>	
				<label for="tags">Voie </label> <input type="text" name="tags" id="tags"/>
				<input type="text" name="code_postal" value="40260" />
				<input type="submit" value="Valider" />
		   </p>
 
		</form>
 
		<p>Carte</p>
 
		 <div id="map" style="width: 800px; height: 800px"> </div>
         <link rel="stylesheet" href="leaflet/dist/leaflet.css" />
         <script src="leaflet/dist/leaflet.js"></script>
         <Link rel = " stylesheet " href = "leaflet/fullscreen/Control.FullScreen.css" />
 		 <Script src = "leaflet/fullscreen/Control.FullScreen.js" ></script> 
 		 <link rel="stylesheet" href="leaflet/dist/leaflet.home.css" />
         <script src="leaflet/dist/leaflet.home.js"></script>
 
 
 
 
 
 
         <script>
 
                 //Définir les coordonnées du centre de la carte et le seuil de zoom
                 //var map = L.map('map').setView([43.88192199999999, -1.145308], 13, home: true);
                 var map = L.map('map', {center: new L.LatLng(43.88192199999999,-1.145308), zoom: 13, home: true});
 
 
                        
                // Ajouter le fond de carte OSM
                L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                }).addTo(map);
 
 
                        // Ajouter le fond de carte ESRI
                        //L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {
                //attribution: 'Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
                //}).addTo(map);
 
 
 
                        // Créer un contrôle plein écran
                        var fsControl = new L.Control.FullScreen();
 
                        // Ajoutez le contrôle plein écran à la carte
                        map.addControl(fsControl);
 
                        // Détecter le basculement plein écran
                        map.on('enterFullscreen', function(){
                                if(window.console) window.console.log('enterFullscreen');
                        });
                        map.on('exitFullscreen', function(){
                                if(window.console) window.console.log('exitFullscreen');
                        });
 
 
 
                 // Ajouter des markers
                L.marker([43.881770,-1.143101]).addTo(map) .bindPopup("<b>ALLEE SAINT GABRIEL</b>").on('click', clickZoom);
                L.marker([43.882850,-1.135150]).addTo(map) .bindPopup("<b>CHEMIN DE LA MOUSQUE</b>").on('click', clickZoom);
                L.marker([43.889826,-1.13380]).addTo(map) .bindPopup("<b>CHEMIN DE LAGESTE</b>").on('click', clickZoom);
                L.marker([43.918047,-1.113200]).addTo(map) .bindPopup("<b>CHEMIN DU STUCS</b>").on('click', clickZoom);
 
 
 
                // Coordonnées d'un point après clic (utile pour trouver les coordonnées des voies)
                        map.on('click', onMapClick);
 
                        function onMapClick(e) {
                        alert("Vous venez de cliquer aux coordonnées " + e.latlng.toString());
                        }
 
 
                // Zoom sur marker après click dessus après ajout de .on(click', clickZoom) sur les markers
                 function clickZoom(e) { map.setView(e.target.getLatLng(),17); } 
 
 
 
                        // Appareil mobile et géolocalisation
                        //map.locate({setView: true, maxZoom: 30});
 
 
 
 
         </script>
 
	</body>
 
</html>