Places Widgets

Classe PlaceAutocompleteElement

Classe google.maps.places.PlaceAutocompleteElement

PlaceAutocompleteElement est une sous-classe HTMLElement qui fournit un composant d'UI pour l'API Places Autocomplete.

 PlaceAutocompleteElement utilise automatiquement des AutocompleteSessionToken en interne pour regrouper les phases de requête et de sélection d'une recherche de saisie semi-automatique d'un utilisateur.

 Le premier appel à Place.fetchFields sur un Place renvoyé par PlacePrediction.toPlace inclura automatiquement le jeton de session utilisé pour récupérer le PlacePrediction.

 Pour en savoir plus sur le fonctionnement des sessions, consultez https://developers.google.com/maps/documentation/places/web-service/place-session-tokens.

Élément personnalisé :
<gmp-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng" requested-language="string" requested-region="string" unit-system="metric"></gmp-place-autocomplete>

Cette classe étend HTMLElement.

Cette classe implémente PlaceAutocompleteElementOptions.

Accédez-y en appelant le const {PlaceAutocompleteElement} = await google.maps.importLibrary("places").
 Consultez Bibliothèques de l'API Maps JavaScript.
PlaceAutocompleteElement
PlaceAutocompleteElement(options)
Paramètres :
includedPrimaryTypes
Type : Array<string> optional
Type de lieu principal inclus (par exemple, "restaurant" ou "gas_station").

 Un lieu n'est renvoyé que si son type principal est inclus dans cette liste. Vous pouvez spécifier jusqu'à cinq valeurs. Si aucun type n'est spécifié, tous les types de lieux sont renvoyés.
Attribut HTML :
  • <gmp-place-autocomplete included-primary-types="type1 type2 type3..."></gmp-place-autocomplete>
includedRegionCodes
Type : Array<string> optional
Incluez uniquement les résultats dans les régions spécifiées, sous forme de 15 codes de région CLDR à deux caractères maximum. Un ensemble vide ne limitera pas les résultats. Si locationRestriction et includedRegionCodes sont tous les deux définis, les résultats se trouveront dans la zone d'intersection.
Attribut HTML :
  • <gmp-place-autocomplete included-region-codes="c1 c2 c3..."></gmp-place-autocomplete>
locationBias
Type : LocationBias optional
Limite ou indication souple à utiliser lors de la recherche de lieux.
locationRestriction
Type : LocationRestriction optional
Limites pour contraindre les résultats de recherche.
name
Type : string optional
Nom à utiliser pour l'élément d'entrée. Pour en savoir plus, consultez https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name. Il suit le même comportement que l'attribut "name" pour les entrées. Notez qu'il s'agit du nom qui sera utilisé lorsqu'un formulaire sera envoyé. Pour en savoir plus, consultez https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form.
Attribut HTML :
  • <gmp-place-autocomplete name="string"></gmp-place-autocomplete>
origin
Origine à partir de laquelle calculer la distance. Si aucune valeur n'est spécifiée, la distance n'est pas calculée. L'altitude, si elle est indiquée, n'est pas utilisée dans le calcul.
Attribut HTML :
  • <gmp-place-autocomplete origin="lat,lng"></gmp-place-autocomplete>
  • <gmp-place-autocomplete origin="lat,lng,altitude"></gmp-place-autocomplete>
requestedLanguage
Type : string optional
Identifiant de la langue dans laquelle les résultats doivent être renvoyés, si possible. Les résultats dans la langue sélectionnée peuvent être mieux classés, mais les suggestions ne sont pas limitées à cette langue. Consultez la liste des langues disponibles.
Attribut HTML :
  • <gmp-place-autocomplete requested-language="string"></gmp-place-autocomplete>
requestedRegion
Type : string optional
Code de région utilisé pour la mise en forme et le filtrage des résultats. Cela ne limite pas les suggestions à ce pays. Le code régional accepte une valeur ccTLD ("domaine de premier niveau") à deux caractères. La plupart des codes ccTLD sont identiques aux codes ISO 3166-1, à quelques exceptions près. Par exemple, le ccTLD du Royaume-Uni est "uk" (.co.uk), tandis que son code ISO 3166-1 est "gb" (techniquement pour l'entité "Royaume-Uni de Grande-Bretagne et d'Irlande du Nord").
Attribut HTML :
  • <gmp-place-autocomplete requested-region="string"></gmp-place-autocomplete>
unitSystem
Type : UnitSystem optional
Système d'unités utilisé pour afficher les distances. Si elle n'est pas spécifiée, le système d'unités est déterminé par requestedRegion.
Attribut HTML :
  • <gmp-place-autocomplete unit-system="metric"></gmp-place-autocomplete>
  • <gmp-place-autocomplete unit-system="imperial"></gmp-place-autocomplete>
prediction-item
Élément du menu déroulant des prédictions qui représente une seule prédiction.
prediction-item-icon
Icône affichée à gauche de chaque élément dans la liste des prédictions.
prediction-item-main-text
Partie d'un élément de prédiction qui constitue le texte principal de la prédiction. Pour les emplacements géographiques, cet élément contient le nom du lieu, par exemple "Sydney", ou le nom et le numéro d'une rue, comme "10 King Street". Par défaut, le texte principal de l'élément de prédiction est noir. Si l'élément de prédiction contient du texte supplémentaire, il se trouve en dehors de prediction-item-main-text et hérite son style de prediction-item. Par défaut, il apparaît en gris. Le texte additionnel est généralement une adresse.
prediction-item-match
Partie de la prédiction renvoyée qui correspond à ce qu'a saisi l'utilisateur. Par défaut, le texte correspondant apparaît en gras. Notez que le texte correspondant peut se trouver n'importe où dans prediction-item. Il ne fait pas nécessairement partie de prediction-item-main-text.
prediction-item-selected
Élément vers lequel l'utilisateur accède à l'aide du clavier. Remarque : Les éléments sélectionnés seront affectés à la fois par les styles de cette partie et par les styles de la partie "prediction-item".
prediction-list
Élément visuel contenant la liste des prédictions renvoyées par le service Place Autocomplete. Cette liste apparaît sous forme de liste déroulante sous PlaceAutocompleteElement.
BetaaddEventListener
addEventListener(type, listener[, options])
Paramètres :
  • type : string chaîne sensible à la casse représentant le type d'événement à écouter.
  • listener : EventListener|EventListenerObject L'objet qui reçoit une notification. Il doit s'agir d'une fonction ou d'un objet avec la méthode handleEvent.
  • options : boolean|AddEventListenerOptions optional. Consultez les options. Les événements personnalisés ne sont compatibles qu'avec capture et passive.
Valeur renvoyée : void
Configure une fonction qui sera appelée chaque fois que l'événement spécifié sera distribué à la cible. Consultez addEventListener.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Paramètres :
  • type : string chaîne qui spécifie le type d'événement pour lequel supprimer un écouteur d'événement.
  • listener : EventListener|EventListenerObject L'écouteur d'événements du gestionnaire d'événements à supprimer de la cible de l'événement.
  • options : boolean|EventListenerOptions optional. Consultez les options.
Valeur renvoyée : void
Supprime un écouteur d'événements précédemment enregistré avec addEventListener de la cible. Consultez removeEventListener.
gmp-error
function(errorEvent)
Arguments : 
Cet événement est déclenché lorsqu'une requête envoyée au backend a été refusée (par exemple, clé API incorrecte). Cet événement ne remonte pas.
gmp-select
function(placePredictionSelectEvent)
Arguments : 
Cet événement est déclenché lorsqu'un utilisateur sélectionne une prédiction de lieu. Contient un objet PlacePrediction qui peut être converti en objet Place.

PlaceAutocompleteElementOptions interface

Interface google.maps.places.PlaceAutocompleteElementOptions

Options de construction d'un PlaceAutocompleteElement. Pour obtenir la description de chaque propriété, consultez la propriété du même nom dans la classe PlaceAutocompleteElement.
locationBias optional
Type : LocationBias optional
locationRestriction optional
Type : LocationRestriction optional
name optional
Type : string optional
requestedLanguage optional
Type : string optional

Classe PlacePredictionSelectEvent

Classe google.maps.places.PlacePredictionSelectEvent

Cet événement est créé une fois que l'utilisateur a sélectionné un élément de prédiction avec PlaceAutocompleteElement. Accédez à la sélection avec event.placePrediction.

 Convertissez placePrediction en Place en appelant PlacePrediction.toPlace.

Cette classe étend Event.

Accédez-y en appelant le const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places").
 Consultez Bibliothèques de l'API Maps JavaScript.
placePrediction
Convertissez-le en Place en appelant PlacePrediction.toPlace.

PlaceAutocompleteRequestErrorEvent class

Classe google.maps.places.PlaceAutocompleteRequestErrorEvent

Cet événement est émis par PlaceAutocompleteElement en cas de problème avec la requête réseau.

Cette classe étend Event.

Accédez-y en appelant le const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places").
 Consultez Bibliothèques de l'API Maps JavaScript.

Classe PlaceContextualElement

Classe google.maps.places.PlaceContextualElement

Widget qui utilise le jeton de contexte pour afficher une vue contextuelle de la réponse d'ancrage avec Google Maps.

Élément personnalisé :
<gmp-place-contextual context-token="string"></gmp-place-contextual>

Cette classe étend HTMLElement.

Cette classe implémente PlaceContextualElementOptions.

Accédez-y en appelant le const {PlaceContextualElement} = await google.maps.importLibrary("places").
 Consultez Bibliothèques de l'API Maps JavaScript.
contextToken
Type : string optional
Jeton de contexte.
Attribut HTML :
  • <gmp-place-contextual context-token="string"></gmp-place-contextual>
BetaaddEventListener
addEventListener(type, listener[, options])
Paramètres :
  • type : string chaîne sensible à la casse représentant le type d'événement à écouter.
  • listener : EventListener|EventListenerObject L'objet qui reçoit une notification. Il doit s'agir d'une fonction ou d'un objet avec la méthode handleEvent.
  • options : boolean|AddEventListenerOptions optional. Consultez les options. Les événements personnalisés ne sont compatibles qu'avec capture et passive.
Valeur renvoyée : void
Configure une fonction qui sera appelée chaque fois que l'événement spécifié sera distribué à la cible. Consultez addEventListener.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Paramètres :
  • type : string chaîne qui spécifie le type d'événement pour lequel supprimer un écouteur d'événement.
  • listener : EventListener|EventListenerObject L'écouteur d'événements du gestionnaire d'événements à supprimer de la cible de l'événement.
  • options : boolean|EventListenerOptions optional. Consultez les options.
Valeur renvoyée : void
Supprime un écouteur d'événements précédemment enregistré avec addEventListener de la cible. Consultez removeEventListener.

Interface PlaceContextualElementOptions

Interface google.maps.places.PlaceContextualElementOptions

Options pour PlaceContextualElement.
contextToken optional
Type : string optional
Jeton de contexte fourni par la réponse "Ancrage avec Google Maps".

PlaceContextualListConfigElement class

Classe google.maps.places.PlaceContextualListConfigElement

Élément HTML qui configure les options de la vue Liste de l'élément contextuel de lieu.

Élément personnalisé :
<gmp-place-contextual-list-config layout="compact" map-hidden></gmp-place-contextual-list-config>

Cette classe étend HTMLElement.

Cette classe implémente