web-dev-qa-db-fra.com

API Google Maps v3 - Saisie automatique (adresse)

Tentative de faire fonctionner la saisie automatique pour mon application google maps.

Voici le code actuel:

HTML

<input type="text" class="clearText" id="address" name="address" value="" size=20 autocomplete="off">

Javascript

    var input = document.getElementById('address');
    var options = {
        componentRestrictions: {country: 'au'}
    };
    var autocomplete = new google.maps.places.Autocomplete(input, options);

Malheureusement, rien ne se passe lors de la saisie d'une adresse.

Des idées?

Merci d'avance.

Modifier: je reçois actuellement l'erreur suivante:

TypeError non capturé: impossible de lire la propriété "saisie semi-automatique" de non défini

Je ne sais pas pourquoi, le code est placé dans ma fonction d'initialisation de la carte.

Édition 2: corrigé. Réponse ci-dessous.

javascriptgoogle-mapsgoogle-maps-api-3autocomplete
42
Matt

Fixé. La bibliothèque de saisie semi-automatique est en fait une bibliothèque distincte qui doit être explicitement chargée. La ligne suivante a résolu le problème.

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

Votre solution a également fonctionné pour moi. J'utilise le plug-in jQuery Geocomplete http://ubilabs.github.com/geocomplete/ et les instructions sur leur page d'accueil indiquent d'utiliser ceci

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

Mais cela n'a pas fonctionné pour moi et obtenait la même erreur.

Voir la documentation de l'API Google Maps ici https://developers.google.com/maps/documentation/javascript/places?hl=en-EN#loading_the_library

19
Hung Luu

si vous utilisez angular:

Si vous utilisez Google Maps, vous devez importer l'API dans le module ng comme ceci

@NgModule({
  declarations: [...],
  imports: [...,
    AgmCoreModule.forRoot({
      clientId: '<mandatory>',
      //apiVersion: 'xxx', // optional
      //channel: 'yyy', // optional
      //apiKey: 'zzz', // optional
      language: 'en',
      libraries: ['geometry', 'places']
    })
  ],
  providers: [...],
  bootstrap: [...]
})

la bibliothèque "places" est nécessaire pour utiliser le module de saisie semi-automatique.

Ensuite, utilisez-le comme ceci:

import {MapsAPILoader} from "@agm/core";
...
constructor(private mapsAPILoader: MapsAPILoader,
...
    this.mapsAPILoader.load().then(() => {
      let autocomplete = new window['google'].maps.places.Autocomplete(..., ...);

      autocomplete.addListener("place_changed", () => { ...
3
Kesara Wimal

Merci Matt pour la réponse! D'une certaine manière, il semble important de ne pas omettre type="text/javascript" attribut sur <script> tag lors de l'utilisation de libraries=places.

Ne fonctionne pas:

<script src="http://maps.googleapis.com/maps/api/js?libaries=places&sensor=false&callback=initMap"></script>
<script src="http://maps.googleapis.com/maps/api/js?libaries=places&sensor=false"></script>

Travaux:

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

La variante de rappel fonctionne également (avec la fonction initMap définie):

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

Cela semble cohérent avec un autre réponse SO et incohérent avec le documentation officielle (sauf si fournir le key dans l'url fait la différence).

0
davke

j'ai trouvé cette erreur car ma clé API a dépassé le quota de demandes quotidiennes pour cette API.

je viens de créer une nouvelle clé API et de la remplacer au lieu de l'ancienne.

ça marche pour moi

je vous remercie

0
vinayak surywanshi

Vous devez ajouter 'defer async' à l'attribut de script, comme ceci:

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
            async defer></script>
0
Mohammed Mukhtar

Étant donné que cette question m'a aidé, j'ai pensé que j'aiderais quiconque a ce problème en 2019. En 2019, vous ajoutez l'importation de Google Maps api comme ceci:

https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY

Ajoutez ensuite & bibliothèques = places à la fin pour que tout soit dit et fait, cela ressemble à ceci:

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&libraries=places">
</script>
0
Caleb