Discussion :

[Mrzikel]

Bonjour,

J'essaye tant bien que mal à faire de l'auto-complétition depuis l'api de Google place mais pas moyen de réussir à obtenir un résultat, je ne sais pas du tout comment m'y prendre car j'ai déjà conçus une fonction initMap pour pas mal de chose et comment intégrer le code de l'api Google sur mon code déjà existant :

Code JavaScript :

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
function initMap() {
 
geocoder = new google.maps.Geocoder();
	map = new google.maps.Map(document.getElementById("map"), {
		center: new google.maps.LatLng(lat, lon),
		zoom: 4,
		navigationControl: true,
			navigationControlOptions: {
			style: google.maps.NavigationControlStyle.ZOOM_PAN
		}
	});
 
 
	// Nous appelons la fonction ajax de jQuery
	$.ajax({
		// On pointe vers le fichier data_adresse.php
		url : "data_adresse.php",
		dataType : "json",
	}).done(function(json)
	{
		var villes  = json;
		// On parcourt l'objet villes
  let i=0;
  let image="../image/drapeau.png";
		for(ville in villes)
		{
			var mytext = "<div id='flightpath_div"+i+"'>test</div>";
			var myinfowindow = new google.maps.InfoWindow({
			content: mytext,
			});
 
			var marker = new google.maps.Marker
			({
			// parseFloat nous permet de transformer la latitude et la longitude en nombre décimal
			position: {
			lat: parseFloat(villes[ville].latitude_p),
			lng: parseFloat(villes[ville].longitude_p)
			},
			title: villes[ville].pseudo,
			infowindow: myinfowindow,
			animation: google.maps.Animation.DROP,
			label: villes[ville].pseudo.slice(0,2),//affiche les 2premiers caractère du pseudo sur le r
			map: map
			});//fin marker
			google.maps.event.addListener(marker, 'click', function() {
			this.infowindow.open(map, this);
			});
 
			var markerz = new google.maps.Marker
			({
			// parseFloat nous permet de transformer la latitude et la longitude en nombre décimal
			position: {
			lat: parseFloat(villes[ville].latitude_a),
			lng: parseFloat(villes[ville].longitude_a)
			},
			title: villes[ville].pseudo,
			infowindow: myinfowindow,
			icon: image,
			label: villes[ville].pseudo.slice(0,2),//affiche les 2premiers caractère du pseudo sur le r
			map: map
			});//fin marker	
		google.maps.event.addListener(markerz, 'click', function() {
		this.infowindow.open(map, this);
		});
		i++;
		}//fin for
	});//fin fct json
}//fin initMap

Jusqu'ici j'obtiens bien ce que je veux dans ma carte (sans certitude que le code soit parfait) mais là où j'aimerais que ça fonctionne c'est au moment où j'introduit mon adresse dans le champ input pour obtenir le résultat suivant :



Je suis en train de regarder les explications de google et d'un autre site mais n'étant pas un expert JS je préfère avoir l'aide d'un de vous car ça fait un peu trop de temps que je suis là dessus :

https://developers.google.com/maps/d...complete?hl=fr
https://dev.to/gaelsimon/implement-a...laces-api-461h

Est-ce que l'insertion du script est bonne ?

<script src="https://maps.googleapis.com/maps/api/js?key=MACLE&libraries=places&callback=initMap&v=weekly" defer></script>.

Le champ input est :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<legend class="legend_profil">Votre position actuelle : </legend>
<input type="text" style="width:100%;" id="position" onblur="add_convers('maposition_lnglat','position')" value="" placeholder="Ville, adresse...">

Merci d'avance pour votre aide et désolé aux modérateurs si mon post n'est pas dans la bonne section du forum.