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 : 355
Taille : 25,0 Ko

Nom : Capture d’écran 2023-03-18 125652.jpg
Affichages : 355
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

Mon champ input est appelé en ajax après le chargement de ma page...

Merci pour ton coup de main en tout cas

**NoSmoking** · 22/03/2023, 09h50

j'ai inversé le deux premières déclarations dans le code, c'est corrigé !

Mon champ input est appelé en ajax après le chargement de ma page...

je ne saisi pas tout !!!

**Mrzikel** · 23/03/2023, 10h12

Salut NoSmoking,

Je viens de me rendre compte que le problème provenait du fait que je faisais ma requête ajax, par exemple lorsque j'affiche mon champ <input id="ship-address" name="ship-address" type="text"/> sans passer par la requête ajax, l'auto-completition se faisait bien mais si mon champ input se trouve dans ma requête ajax il n'y a plus d'auto-completition.

Pour t'expliquer plus précisément ce que je fais :

J'ouvre ma page calendrier.
><body onload="Calendrier()">Requête ajax pour afficher le calendrier à la date actuelle.
>Le calendrier s'affiche.
>Lorsque je clique sur un jour précis du calendrier.
>Une requête ajax pour afficher le formulaire qui permet de laisser un évènement dans le calendrier et afficher les repères de l'adresse sur la position actuelle et la destination.

Mon formulaire chargé en ajax est donc constitué du champ <input id="ship-address" name="ship-address" type="text"/>.

J'ai déjà vécu ce problème là il y a très longtemps (pas retenu malheureusement), je pense que c'est un problème du fait que ma page est chargée en premier puis la requête ajax dans un second temps.

En tout cas grâce à toi j'avance car maintenant je commence à obtenir un résultat si je ne passe pas par l'ajax.

Maintenant comment faire pour que l'ajax soit chargé et que mon champ input puisse fonctionner ?

Merci encore, passe une bonne journée

**NoSmoking** · 23/03/2023, 17h04

Mon formulaire chargé en ajax est donc constitué du champ <input id="ship-address" name="ship-address" type="text"/>.
...
Maintenant comment faire pour que l'ajax soit chargé et que mon champ input puisse fonctionner ?

c'est donc sur la fonction done de ton appel Ajax qu'il faut initialiser ton new google.maps.places.Autocomplete pour pouvoir dans servir. Il faut que ton <input> fasse partie du DOM pour pouvoir être accessible.

**Mrzikel** · 24/03/2023, 17h26

Salut NoSmoking,

Merci pour les informations..

Je ne parviens pas à faire ma fonction car il n'y a pas de done dedans c'est une requête ajax de ce type +- :

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
function xhr_state_cal() {
  // définition des options de recherche
  const options = {
    componentRestrictions: {
      country: "fr"
    },
    types: ["locality"],
  };
  const autocomplete = new google.maps.places.Autocomplete(document.getElementById("position"), 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")
    }
  });
  // ici l'INPUT de saisie à pour Id "search-input"
 
  var xhr; // création de l'instance de l'objet
  if (window.XMLHttpRequest)
    xhr = new XMLHttpRequest();
  else if (window.ActiveXObject)
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
  else {
    alert('JavaScript : votre navigateur ne supporte pas les objets XMLHttpRequest...');
    return;
  }
  xhr.onreadystatechange = function() // définition de la fonction de traitement
  {
    if (xhr.readyState == 4) {
      document.getElementById("info_chargement").style.display = "none";
      if (fct != "liste" && fct != "insert" && fct != "del") {
        document.getElementById("calendrier_A").innerHTML = xhr.response;
      }
    }
  }
  xhr.open('POST', url, true); // ouverture de la connexion
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=utf-8'); // en-tête HTTP
  xhr.send("test=" + test);
}

C'est ce genre de requête là (Je n'ai pas rajouté l'intégralité de la fonction) que je fais mais je ne sais pas comment faire pour y insérer le code que tu m'as donné dans ma fonction ajax, est-ce que tu peux m'aider ?

Merci d'avance.

Je t'avoue être complètement paumé par rapport à cette situation.

**NoSmoking** · 24/03/2023, 19h08

un coup jQuery et un coup non pour tes requêtes Ajax, tu pourrais également regarder du côté de l'API fetch, mais peut-être pour plus tard.

J'ai l'impression que tu te perds un peu dans la chronologie de ton script. Est-ce clair pour toi ?

La mise en place d'un new google.maps.places.Autocomplete ne peut se faire que si tu est sûr que ta carte est initialisé, tout du moins que google soit bien chargé.
D'autre part dans ta fonction tu fais un document.getElementById("position") alors que ton élément n'est pas encore dans le DOM.

Simplement :

Code :

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

1
2
3
4
5
6
7
8
9
  const oXhr = new XMLHttpRequest();
  oXHr.onload = function() {
    document.getElementById("info_chargement").style.display = "none";
    if (fct != "liste" && fct != "insert" && fct != "del") {
      document.getElementById("calendrier_A").innerHTML = oXhr.response;
      // c'est ici que tu peux initialiser ton input-search
      // ou que tu appelles une fonction externe qui va faire le job
    }
  }

PS : je présume que toutes les autres variables sont déclarées quelque part !

Tu peux également t'aider de l'inspecteur disponible sur les navigateurs et accessible via la touche F12.

**Mrzikel** · 24/03/2023, 20h39

Merci,

C'est gentil de ta part, je vais essayer ça dès que je rentre mais comment tu sais tout ça ? Lol

Moi effectivement je m'y perd au delà d'un certain niveau mais je te montrerait mon site dès qu'il sera en ligne c'est prévu pour fin avril 🙂 après le code ne va peut-être pas plaire mais ça ne saura que s'améliorer 🙂.

Bonne soirée 😉

**Mrzikel** · 25/03/2023, 12h37

Je viens d'essayer de mettre le code que tu m'as donné

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
	// définition des options de recherche
				const options = {
				  componentRestrictions: { country: "fr"},
				  types: ["locality"],
				};	
				const autocomplete = new google.maps.places.Autocomplete(document.getElementById("position"), options);
				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")
				  }
				});

Dans ma fonction ajax :

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
function xhr_state_cal()
{
	var xhr; // création de l'instance de l'objet
    if (window.XMLHttpRequest) 
	xhr = new XMLHttpRequest();
    else if (window.ActiveXObject)
	xhr = new ActiveXObject('Microsoft.XMLHTTP');
    else
	{
	alert('JavaScript : votre navigateur ne supporte pas les objets XMLHttpRequest...');
    return;
    }		
	xhr.onreadystatechange = function() // définition de la fonction de traitement
    	{
   			 if (xhr.readyState == 4)
    		{
				document.getElementById("calendrier_A").innerHTML=xhr.response;
				// définition des options de recherche
				const options = {
				  componentRestrictions: { country: "fr"},
				  types: ["locality"],
				};	
				const autocomplete = new google.maps.places.Autocomplete(document.getElementById("position"), options);
				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")
				  }
				});
			}
  	    }		
 	xhr.open('POST',url,true); // ouverture de la connexion
	xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded;charset=utf-8'); // en-tête HTTP
	xhr.send("test="+test);
}

Peut importe où je met ce code, ça ne fonctionne que si le champ input n'est pas chargé par ma requête Ajax.

Après ce n'est vraiment qu'un petit détail pour mon site, je voulais que ça soit fini de ce côté là mais je crois que je vais abandonner pour l'instant histoire de terminer le reste.

Une fois qu'il sera en ligne je te demanderai (si tu es d'accord) de m'aider, tu y verras surement plus clair.

Mais ça me saoule de ne pas y arriver, mes variables sont bien déclarées et il n'y a qu'un champ avec l'id "position", mon calendrier charge après google map donc en théorie la carte est initialisée.

Lorsque j'utilise le debugger il ne m'affiche rien de spécial, c'est comme si le code était inexistant.

**Mrzikel** · 26/03/2023, 23h52

Salut,

J'ai enfin réussi à passer cette épreuve, j'ai donc fait une fonction avec le code que tu m'as donné et je l’exécute à la fin de ma requête ajax en fin de condition

Code :

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

1
2
3
4
   			 if (xhr.readyState == 4)
                        {
                        autocompletition();
                        }

Merci pour ton aide précieuse, bonne soirée

**ProgElecT** · 27/03/2023, 09h22

Salut

Moi je prendrai plus de précaution dans la condition if,

Code :

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

if (xhr.readyState == 4 && xhr.status == 200)

**Mrzikel** · 28/03/2023, 19h33

Ok merci ProgElecT, je vais mettre ça en application. bonne soirée.

Place Autocomplete de Google map JS [Google Maps]

APIs Google

Discussions similaires

Partager

Partager