Place Autocomplete de Google map JS

**Mrzikel** · 18/03/2023, 13h13

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 :

Nom : Capture d’écran 2023-03-18 125652.jpg
Affichages : 479
Taille : 25,0 Ko

Nom : Capture d’écran 2023-03-18 125652.jpg
Affichages : 479
Taille : 25,0 Ko

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.

**NoSmoking** · 20/03/2023, 16h25

Bonjour,
on ne trouve aucune trace dans ton code de l'utilisation de l'autocomplete, quelque chose comme :

Code :

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

const autocomplete = new google.maps.places.Autocomplete(input, options);

Cette discussion pourrait surement t'intéresser :

↪ Ajouter une Autocomplétion à un INPUT ajouté dynamiquement

**Mrzikel** · 20/03/2023, 17h48

Bonjour,

En effet j'ai bon mettre cette ligne de code dans le initMap ça ne me donne aucun résultat et ça, peut importe où je met cette ligne de code c'est ça que je ne comprend pas.

Comme je l'ai précisé je suis loin d'être un expert en js mais je tente de me débrouiller au maximum par les moyens mais là malheureusement je bloque.

Code :

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

1
2
3
4
5
6
7
8
9
10
const input = document.getElementById("position").value; //input qui se trouve dans mon contenu html avc l'id position
const options = {
bounds: defaultBounds,
componentRestrictions: { country: "us" },
fields: ["address_components", "geometry", "icon", "name"],
strictBounds: false,
types: ["establishment"],
};
 
autocomplete = new google.maps.places.Autocomplete(input, options);

Où mettre ces lignes de codes pour qu'elles me donnent ce que je recherche ?

**NoSmoking** · 21/03/2023, 12h06

En effet j'ai bon mettre cette ligne de code dans le initMap ça ne me donne aucun résultat et ça

encore faut-il exploiter le résultat ce qui n'est pas prévu dans ton code.

Donc à minima dans ta fonction initMap() on devrait trouver :

Code :

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
// définition des options de recherche
const options = {
  componentRestrictions: { country: "fr"},
  types: ["locality"],
};
 
// ici l'INPUT de saisie à pour Id "search-input"
const autocomplete = new google.maps.places.Autocomplete(document.getElementById("search-input"), options);
 
// définition ce qu'il faut faire lorsque cela a été modifié 
autocomplete.addListener("place_changed", function() {
  // récup. des données
  const place = autocomplete.getPlace();
 
  // pour voir ce que l'on obtient
  console.log("autocomplete", place);
 
  if (place.geometry) {
    // faire avec le résultat
  }
  else {
    console.log("Aucune correspondance trouvée")
  }
});

[Edit]inversion des deux premières déclarations dans le code

**Mrzikel** · 21/03/2023, 18h52

Salut,

J'ai essaye de mettre ton code avant la fin de la function initMap() et ça me donne le message d'erreur suivant :

Uncaught (in promise) ReferenceError: can't access lexical declaration 'options' before initialization

Code :

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
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
 
 
  var image="../image/drapeau.png";
		for(ville in villes)
		{
 
 
			var mytext = "test";
			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);
		});
	}//fin for
});
 
 
// ici l'INPUT de saisie à pour Id "search-input" j'ai changé le nom  de l'id avec l'id de mon champ input
const autocomplete = new google.maps.places.Autocomplete(document.getElementById("position"), options);
 
// définition des options de recherche
const options = {
  componentRestrictions: { country: "fr"},
  types: ["locality"],
};	
autocomplete.addListener("place_changed", function() {
  // récup. des données
  const place = autocomplete.getPlace();
 
  // pour voir ce que l'on obtient
  console.log("autocomplete", place);
 
  if (place.geometry) {
    // faire avec le résultat
  }
  else {
    console.log("Aucune correspondance trouvée")
  }
});
 }//fin initMap