Demande d'aide pour l'Autocompletion

**ejazz75** · 10/10/2012, 17h08

Bonjour,

Je cherche à implémenter l'autocompletion dans un formulaire avec deux champs de saisie texte. Pour cela, j'ai pris exemple sur un code dans la documentation Google en faisant les étapes suivantes :

- dans ma page html j'ai déclaré l'appel de la librairie "places" par :

Code :

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

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>

pour les champs de saisie suivant (extrait) :

Code :

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

1
2
3
 
Départ:<input type="text" id="from" value="Adresse de départ"/>
Arrivée:<input type="text" id="to" value="Adresse d'arrivée"/>

ainsi que le script à exécuter pour l'autocomplétion :

Code :

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

<script type="text/javascript" src="js/autocomp.js"></script>

- et la fonction d'autocompletion est la suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function initAutocomplete()
{
  options = {componentRestrictions: {country: 'fr'}};      
 
  inputFrom = document.getElementById('from');
  autocompleteFrom = new  google.maps.places.Autocomplete(inputFrom, 
                                                                                    options);
 
  inputTo = document.getElementById('to');
  autocompleteTo = new google.maps.places.Autocomplete(inputTo,
                                                                                options);
}

Les codes ont été générés sur la base d'un exemple de Google qui fonctionne bien.

A l'exécution de ma page, on a l'erreur suivante sous Firebug :

TypeError: google.maps.places is undefined
autocompleteFrom = new google.maps.places.Autocomplete(inputFrom,
options)

Je ne comprends pas trop l'erreur obtenue alors que la librairie "places" a bien été déclarée, donc "google.maps.places" doit être connu.

Pouvez-vous m'aider à résoudre ce problème afin d'implémenter l'autocompletion correctement ?
Ou me proposer un exemple de code simple pour l'implémentation ?

Je vous remercie par avance pour vos réponses.

ejazz75

**patcino** · 11/10/2012, 00h00

Salut,
essaye comme suite:

Code :

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

1
2
3
4
5
6
7
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>  
<script type="text/javascript" src="js/autocomp.js"></script>

<body onload=initAutocomplete()>

Départ:<input type="text" id="From" value=""/>
Arrivée:<input type="text" id="To" value=""/>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function initAutocomplete()
{
  var options = {
  componentRestrictions: {country: 'fr'}
                     };      
 
  var inputFrom = document.getElementById('From');
  var autocompleteFrom = new  google.maps.places.Autocomplete(inputFrom, options);
 
  var inputTo = document.getElementById('To');
  var autocompleteTo = new google.maps.places.Autocomplete(inputTo, options);
 
    }

Salutations.

**ejazz75** · 11/10/2012, 13h31

Bonjour patcino,

Je te remercie pour ton aide.
Ton exemple de code fonctionne bien, mais quand j'essaie de l'intégrer dans mon projet j'obtiens le même type d'erreur :

Code :

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

1
2
TypeError: google.maps.places is undefined	
autocompleteFrom = new google.maps.places.Autocomplete(inputFrom, options)

Ayant déjà un script main.js pour l'init de l'application, j'ai mis la fonction initAutocompletion() dans le main.js pour que l'init de la completion se fasse par le main.js et non plus par le onload du <body>.

J'obtiens la même erreur.

J'ai beau modifié le code de la fonction initAutocomplete() ou le placer dans un script différent, rien ne change, toujours la même erreur.

Ce qui dommage, c'est que le code fonctionne bien sur une page html simple, et que je n'arrive pas au même résultat.

Si tu as une explication, je suis preneur et encore merci pour ton aide.

ejazz75

**Bovino** · 11/10/2012, 14h17

Code :

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

var inputFrom = document.getElementById('From');

Code html :

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

Départ:<input type="text" id="from" value="Adresse de départ"/>

JavaScript est sensible à la casse !

**ejazz75** · 11/10/2012, 14h48

Bonjour Bovino,
Merci pour ta remarque, mais j'ai déjà fait attention à cela.
J'ai l'impression que la librairie "Places" ne se charge pas malgré sa déclaration.
As-tu une idée ?
ejazz75

**patcino** · 11/10/2012, 21h37

Salut ejazz75,

Comment tu appelle ton scripte initAutocomplete() ?
Tu peux poster ton code main.js .

Salutations.

**ejazz75** · 12/10/2012, 10h11

Salut patcino,
J'ai suivi tes recommandations contrairement à ce que j'avais essayé après avoir reçu ta première réponse.
J'ai créé un script pour initAutocomplete() que j'appelle dans le onload du <body> alors que je pensais le faire dans le main.js, mais en passant par le main.js cela générait beaucoup plus d'erreurs.
Au final, l'implémentation de l'autocomplétion est simple, mais curieusement dans mon projet, la librairie "Places" ne se charge pas.
Etant donné que je travaille sur un projet professionnel qui ne m'appartient pas, ci-dessous un extrait du html et du script :

- code index.html

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
<html>
  <head>
    <!-- appel css, librairies, etc.. -->	
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api 
                                          /js?sensor=false&libraries=places"></script>
    <!-- script du projet, etc.. -->
    <script type="text/javascript" src="js/main.js"></script>	
    <script type="text/javascript" src="js/autocomp2.js"></script>	
    <!-- script du projet, etc.. -->	
  </head>
  <body onload="initAutocomplete();">
    <!-- début et fin partie header -->
    <!--début partie content -->				
	<!-- début partie formulaire -->
		<b>Départ:</b>
                <input type="text" id="from" value="Adresse de départ"/>
		<b>Arrivée:</b>
		<input type="text" id="to" value="Adresse d'arrivée"/>	
    		<!-- partie submit, etc.. -->						
	<!-- fin partie formulaire -->					
    <!-- début et fin partie footer -->            
  </body>
</html>

- code autocomp2.js

Code :

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

1
2
3
4
5
6
7
8
9
10
function initAutocomplete(){
  var options = {componentRestrictions: {country: 'fr'}};      
  var inputFrom = document.getElementById('from');
  var autocompleteFrom = new google.maps.places.Autocomplete(inputFrom, 
                                                                                        options);
 
  var inputTo = document.getElementById('to');
  var autocompleteTo = new google.maps.places.Autocomplete(inputTo, 
                                                                                     options);
}

En espérant que cela peut aider à comprendre mon problème d'intégration de l'autocomplétion.

Par avance, merci pour ta réponse.

ejazz75

**NoSmoking** · 12/10/2012, 14h49

Bonjour,
c'est normal ce saut de ligne

Code html :

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

1
2
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api 
                                          /js?sensor=false&libraries=places"></script>

**ejazz75** · 12/10/2012, 15h16

Bonjour NoSmoking,
Il n'y a pas de saut de ligne dans mon code.
C'est juste une erreur au moment du copier/coller dans l'éditeur.
ejazz75

Demande d'aide pour l'Autocompletion

APIs Google

Discussions similaires

Partager

Partager