Classe PlaceAutocompleteElement
Classe google.maps.places.PlaceAutocompleteElement
PlaceAutocompleteElement est une sous-classe HTMLElement
qui fournit un composant d'interface utilisateur pour l'API Place Autocomplete.
Élément personnalisé:
<gmp-place-autocomplete name="string" requested-language="string" requested-region="string" types="type1 type2 type3..."></gmp-place-autocomplete>
Cette classe étend HTMLElement
.
Cette classe implémente PlaceAutocompleteElementOptions
.
Accédez-y en appelant const {PlaceAutocompleteElement} = await google.maps.importLibrary("places")
. Consultez la section Bibliothèques de l'API Maps JavaScript.
Constructeur | |
---|---|
PlaceAutocompleteElement |
PlaceAutocompleteElement(options) Paramètres:
|
Propriétés | |
---|---|
componentRestrictions |
Type:
ComponentRestrictions optional Les restrictions du composant. Les restrictions de composant permettent de limiter les prédictions à celles du composant parent. Par exemple, le pays. |
locationBias |
Type:
LocationBias optional Limite ou indice à utiliser lors de la recherche de lieux. |
locationRestriction |
Type:
LocationRestriction optional Limites pour limiter les résultats de recherche. |
name |
Type:
string optional Nom à utiliser pour l'élément de saisie. Pour en savoir plus, consultez la page https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name. Suit le même comportement que l'attribut name pour les entrées. Notez qu'il s'agit du nom qui sera utilisé lors de l'envoi d'un formulaire. Pour en savoir plus, consultez la page https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form.
Attribut HTML
|
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
|
requestedRegion |
Type:
string optional Code de région utilisé pour le formatage et le filtrage des résultats. Les suggestions ne sont pas limitées à 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
|
types |
Type:
Array<string> optional Types de prédictions à renvoyer. Pour connaître les types acceptés, consultez le guide du développeur. Si aucun type n'est spécifié, tous les types sont renvoyés.
Attribut HTML
|
Pièces | |
---|---|
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 de l'élément de prédiction qui correspond au 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 le champ "prediction-item" contient du texte supplémentaire, il se trouve en dehors de "prediction-item-main-text" et hérite de 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 que l'utilisateur accède à l'aide du clavier. Remarque: Les éléments sélectionnés seront affectés à la fois par ces styles de partie et par les styles de partie des éléments de prédiction. |
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. |
Méthodes | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) Paramètres:
Valeur renvoyée:
void Configure une fonction qui sera appelée chaque fois que l'événement spécifié sera envoyé à la cible. Voir addEventListener |
removeEventListener |
removeEventListener(type, listener[, options]) Paramètres:
Valeur renvoyée:
void Supprime de la cible un écouteur d'événement précédemment enregistré avec addEventListener. Voir removeEventListener |
Événements | |
---|---|
gmp-placeselect |
function(placeAutocompletePlaceSelectEvent) Arguments:
Cet événement se déclenche lorsqu'un utilisateur sélectionne une prédiction de lieu. Contient un objet Place. |
gmp-requesterror |
function(placeAutocompleteRequestErrorEvent) Arguments:
Cet événement est déclenché lorsqu'une requête envoyée au backend a été refusée (par exemple, en raison d'une clé API incorrecte). Cet événement ne remonte pas. |
Interface PlaceAutocompleteElementOptions
Interface google.maps.places.PlaceAutocompleteElementOptions
Options permettant de créer un élément PlaceAutocompleteElement.
Propriétés | |
---|---|
componentRestrictions optional |
Type:
ComponentRestrictions optional |
locationBias optional |
Type:
LocationBias optional |
locationRestriction optional |
Type:
LocationRestriction optional |
requestedLanguage optional |
Type:
string optional |
requestedRegion optional |
Type:
string optional |
types optional |
Type:
Array<string> optional |
Classe PlaceAutocompletePlaceSelectEvent
Classe google.maps.places.PlaceAutocompletePlaceSelectEvent
Cet événement est créé une fois que l'utilisateur a sélectionné un lieu avec l'élément Place Autocomplete. Accédez à la sélection avec event.place
.
Cette classe étend Event
.
Accédez-y en appelant const {PlaceAutocompletePlaceSelectEvent} = await google.maps.importLibrary("places")
. Consultez la section Bibliothèques de l'API Maps JavaScript.
Propriétés | |
---|---|
place |
Type:
Place |
Classe PlaceAutocompleteRequestErrorEvent
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 const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places")
. Consultez la section Bibliothèques de l'API Maps JavaScript.
Classe PlaceDetailsElement
Classe google.maps.places.PlaceDetailsElement
Élément HTML qui affiche les détails d'un lieu. Utilisez les méthodes configureFromPlace()
ou configureFromLocation()
pour spécifier le contenu à afficher. Pour utiliser l'élément "Détails du lieu", activez l'API Places UI Kit pour votre projet dans la console Google Cloud.
Élément personnalisé:
<gmp-place-details size="small"></gmp-place-details>
Cette classe étend HTMLElement
.
Cette classe implémente PlaceDetailsElementOptions
.
Accédez-y en appelant const {PlaceDetailsElement} = await google.maps.importLibrary("places")
. Consultez la section Bibliothèques de l'API Maps JavaScript.
Constructeur | |
---|---|
PlaceDetailsElement |
PlaceDetailsElement([options]) Paramètres:
|
Propriétés | |
---|---|
place |
Type:
Place optional Lecture seule. Objet Place contenant l'ID, l'emplacement et le viewport du lieu actuellement affiché. |
size |
Type:
PlaceDetailsSize optional Variante de taille de PlaceDetailsElement. Par défaut, l'élément affiche
PlaceDetailsSize.X_LARGE .Attribut HTML
|
Méthodes | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) Paramètres:
Valeur renvoyée:
void Configure une fonction qui sera appelée chaque fois que l'événement spécifié sera envoyé à la cible. Voir addEventListener |
configureFromLocation |
configureFromLocation(location) Paramètres:
Valeur renvoyée:
Promise<void> Une promesse qui se résout une fois que les données de lieu sont chargées et affichées.Configure le widget à partir d'un LatLng à l'aide du géocodage inversé. |
configureFromPlace |
configureFromPlace(place) Paramètres:
Valeur renvoyée:
Promise<void> Une promesse qui se résout une fois que les données de lieu sont chargées et affichées.Configure le widget à partir d'un objet Place ou d'un ID de lieu. |
removeEventListener |
removeEventListener(type, listener[, options]) Paramètres:
Valeur renvoyée:
void Supprime de la cible un écouteur d'événement précédemment enregistré avec addEventListener. Voir removeEventListener |
Événements | |
---|---|
gmp-load |
function(event) Arguments:
Cet événement se déclenche lorsque l'élément charge et affiche son contenu. Cet événement ne remonte pas. |
gmp-requesterror |
function(event) Arguments:
Cet événement est déclenché lorsqu'une requête envoyée au backend a été refusée (par exemple, en raison d'une clé API incorrecte). Cet événement ne remonte pas. |
Interface PlaceDetailsElementOptions
Interface google.maps.places.PlaceDetailsElementOptions
Options pour PlaceDetailsElement
.
Propriétés | |
---|---|
size optional |
Type:
PlaceDetailsSize optional |
Constantes PlaceDetailsSize
Constantes google.maps.places.PlaceDetailsSize
Variantes de taille pour PlaceDetailsElement
.
Accédez-y en appelant const {PlaceDetailsSize} = await google.maps.importLibrary("places")
. Consultez la section Bibliothèques de l'API Maps JavaScript.
Constantes | |
---|---|
LARGE |
Variante grande taille incluant une grande image, des informations de base et des coordonnées. |
MEDIUM |
Variante de taille moyenne incluant une grande image et des informations de base. |
SMALL |
Variante petite taille incluant une petite image et des informations de base. |
X_LARGE |
Variante extra large incluant un collage de photos, des avis et des informations complètes sur le lieu. |
Classe PlaceListElement
Classe google.maps.places.PlaceListElement
Élément HTML qui affiche les résultats d'une recherche de lieu dans une liste. Utilisez les méthodes configureFromSearchByTextRequest()
ou configureFromSearchNearbyRequest()
pour spécifier la requête pour laquelle afficher les résultats. Pour utiliser l'élément de liste d'établissements, activez l'API Places UI Kit pour votre projet dans la console Google Cloud.
Élément personnalisé:
<gmp-place-list selectable></gmp-place-list>
Cette classe étend HTMLElement
.
Cette classe implémente PlaceListElementOptions
.
Accédez-y en appelant const {PlaceListElement} = await google.maps.importLibrary("places")
. Consultez la section Bibliothèques de l'API Maps JavaScript.
Constructeur | |
---|---|
PlaceListElement |
PlaceListElement([options]) Paramètres:
|
Propriétés | |
---|---|
places |
Lecture seule. Tableau d'objets Place contenant les ID, les emplacements et les vues d'ensemble des lieux actuellement affichés. |
selectable |
Type:
boolean Indique si les éléments de la liste peuvent être sélectionnés ou non. Si la valeur est "true", les éléments de liste sont des boutons qui distribuent l'événement
gmp-placeselect lorsqu'ils sont cliqués. La navigation et la sélection accessibles au clavier sont également prises en charge.Attribut HTML
|
Méthodes | |
---|---|
addEventListener |
addEventListener(type, listener[, options]) Paramètres:
Valeur renvoyée:
void Configure une fonction qui sera appelée chaque fois que l'événement spécifié sera envoyé à la cible. Voir addEventListener |
configureFromSearchByTextRequest |
configureFromSearchByTextRequest(request) Paramètres:
Valeur renvoyée:
Promise<void> Une promesse qui se résout une fois que les données de lieu sont chargées et affichées.Configure le widget pour qu'il affiche les résultats de recherche à partir d'une requête de l'API Places Text Search. |
configureFromSearchNearbyRequest |
configureFromSearchNearbyRequest(request) Paramètres:
Valeur renvoyée:
Promise<void> Une promesse qui se résout une fois que les données de lieu sont chargées et affichées.Configure le widget pour qu'il affiche les résultats de recherche à partir d'une requête de l'API Places Nearby Search. |
removeEventListener |
removeEventListener(type, listener[, options]) Paramètres:
Valeur renvoyée:
void Supprime de la cible un écouteur d'événement précédemment enregistré avec addEventListener. Voir removeEventListener |
Événements | |
---|---|
gmp-load |
function(event) Arguments:
Cet événement se déclenche lorsque l'élément charge et affiche son contenu. Cet événement ne remonte pas. |
gmp-placeselect |
function(event) Arguments:
Cet événement se déclenche lorsqu'un utilisateur sélectionne un lieu. Contient un objet Place et l'index du lieu sélectionné dans la liste. |
gmp-requesterror |
function(event) Arguments:
Cet événement est déclenché lorsqu'une requête envoyée au backend a été refusée (par exemple, en raison d'une clé API incorrecte). Cet événement ne remonte pas. |
Interface PlaceListElementOptions
Interface google.maps.places.PlaceListElementOptions
Options pour PlaceListElement
.
Propriétés | |
---|---|
selectable optional |
Type:
boolean optional |
Classe PlaceListPlaceSelectEvent
Classe google.maps.places.PlaceListPlaceSelectEvent
Cet événement est émis par PlaceListElement
lorsque l'utilisateur sélectionne un lieu.
Cette classe étend Event
.
Accédez-y en appelant const {PlaceListPlaceSelectEvent} = await google.maps.importLibrary("places")
. Consultez la section Bibliothèques de l'API Maps JavaScript.
Propriétés | |
---|---|
index |
Type:
number Indice de liste du lieu sélectionné. |
place |
Type:
Place Objet Place contenant l'ID, l'emplacement et le viewport du lieu sélectionné. |
Classe Autocomplete
Classe google.maps.places.Autocomplete
Widget qui fournit des prévisions de lieux en fonction de la saisie de texte de l'utilisateur. Il se connecte à un élément d'entrée de type text
et écoute la saisie de texte dans ce champ. La liste des prédictions est présentée sous forme de liste déroulante et est mise à jour à mesure que du texte est saisi.
Cette classe étend MVCObject
.
Accédez-y en appelant const {Autocomplete} = await google.maps.importLibrary("places")
. Consultez la section Bibliothèques de l'API Maps JavaScript.
Constructeur | |
---|---|
Autocomplete |
Autocomplete(inputField[, opts]) Paramètres:
Crée une instance de Autocomplete qui se joint au champ de texte d'entrée spécifié avec les options données. |
Méthodes | |
---|---|
getBounds |
getBounds() Paramètres:aucun
Valeur renvoyée:
LatLngBounds|undefined Les limites de biais.Renvoie les limites auxquelles les prédictions sont biaisées. |
getFields |
getFields() Paramètres:aucun
Valeur renvoyée:
Array<string>|undefined Renvoie les champs à inclure pour le lieu dans la réponse de détails une fois les détails récupérés. Pour obtenir la liste des champs, consultez PlaceResult . |
getPlace |
getPlace() Paramètres:aucun
Valeur renvoyée:
PlaceResult Lieu sélectionné par l'utilisateur.Renvoie les informations sur le lieu sélectionné par l'utilisateur si elles ont bien été récupérées. Sinon, renvoie un objet Place fictif, avec la propriété name définie sur la valeur actuelle du champ de saisie. |
setBounds |
setBounds(bounds) Paramètres:
Valeur renvoyée:aucune
Définit la zone préférée dans laquelle afficher les résultats de recherche de lieux. Les résultats sont orientés vers cette zone, mais n'y sont pas restreints. |
setComponentRestrictions |
setComponentRestrictions(restrictions) Paramètres:
Valeur renvoyée:aucune
Définit les restrictions du composant. Les restrictions de composant permettent de limiter les prédictions à celles du composant parent. Par exemple, le pays. |
setFields |
setFields(fields) Paramètres:
Valeur renvoyée:aucune
Définit les champs à inclure pour le lieu dans la réponse de détails une fois les détails récupérés. Pour obtenir la liste des champs, consultez PlaceResult . |
setOptions |
setOptions(options) Paramètres:
Valeur renvoyée:aucune
|
setTypes |
setTypes(types) Paramètres:
Valeur renvoyée:aucune
Définit les types de prédictions à renvoyer. Pour connaître les types acceptés, consultez le guide du développeur. Si aucun type n'est spécifié, tous les types sont renvoyés. |
Hérité:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
Événements | |
---|---|
place_changed |
function() Arguments:aucun
Cet événement se déclenche lorsqu'un PlaceResult est mis à la disposition d'un lieu sélectionné par l'utilisateur. Si l'utilisateur saisit le nom d'un lieu qui n'a pas été suggéré par le contrôle et appuie sur la touche Entrée, ou si une requête de détails sur un lieu échoue, PlaceResult contient la saisie de l'utilisateur dans la propriété name , sans autre propriété définie. |
Interface AutocompleteOptions
Interface google.maps.places.AutocompleteOptions
Options pouvant être définies sur un objet Autocomplete
.
Propriétés | |
---|---|
bounds optional |
Type:
LatLngBounds|LatLngBoundsLiteral optional Zone dans laquelle rechercher des lieux. |
componentRestrictions optional |
Type:
ComponentRestrictions optional Les restrictions du composant. Les restrictions de composant permettent de limiter les prédictions à celles du composant parent. Par exemple, le pays. |
fields optional |
Type:
Array<string> optional Champs à inclure pour le lieu dans la réponse de détails lorsque les détails sont récupérés, qui seront facturés. Si ['ALL'] est transmis, tous les champs disponibles sont renvoyés et facturés (non recommandé pour les déploiements de production). Pour obtenir la liste des champs, consultez PlaceResult . Les champs imbriqués peuvent être spécifiés à l'aide de chemins avec des points (par exemple, "geometry.location" ). La valeur par défaut est ['ALL'] . |
|
Type:
boolean optional Indique si vous souhaitez ne récupérer que les ID de lieu. Le PlaceResult mis à disposition lorsque l'événement place_changed est déclenché ne comporte que les champs place_id, types et name, avec le place_id, les types et la description renvoyés par le service de saisie semi-automatique. Désactivé par défaut |
strictBounds optional |
Type:
boolean optional Valeur booléenne indiquant que le widget de saisie semi-automatique ne doit renvoyer que les lieux situés dans les limites du widget de saisie semi-automatique au moment de l'envoi de la requête. Si vous définissez strictBounds sur false (valeur par défaut), les résultats seront orientés vers les lieux situés entre ces limites, mais n'y seront pas restreints. |
types optional |
Type:
Array<string> optional Types de prédictions à renvoyer. Pour connaître les types acceptés, consultez le guide du développeur. Si aucun type n'est spécifié, tous les types sont renvoyés. |
Classe SearchBox
Classe google.maps.places.SearchBox
Widget qui fournit des prédictions de requêtes en fonction de la saisie de texte de l'utilisateur. Il se connecte à un élément d'entrée de type text
et écoute la saisie de texte dans ce champ. La liste des prédictions est présentée sous forme de liste déroulante et est mise à jour à mesure que du texte est saisi.
Cette classe étend MVCObject
.
Accédez-y en appelant const {SearchBox} = await google.maps.importLibrary("places")
. Consultez la section Bibliothèques de l'API Maps JavaScript.
Constructeur | |
---|---|
SearchBox |
SearchBox(inputField[, opts]) Paramètres:
Crée une instance de SearchBox qui se joint au champ de texte d'entrée spécifié avec les options données. |
Méthodes | |
---|---|
getBounds |
getBounds() Paramètres:aucun
Valeur renvoyée:
LatLngBounds|undefined Renvoie les limites auxquelles les prédictions de requêtes sont biaisées. |
getPlaces |
getPlaces() Paramètres:aucun
Valeur renvoyée:
Array<PlaceResult>|undefined Renvoie la requête sélectionnée par l'utilisateur pour être utilisée avec l'événement places_changed . |
setBounds |
setBounds(bounds) Paramètres:
Valeur renvoyée:aucune
Définit la région à utiliser pour biaiser les prédictions de requêtes. Les résultats seront orientés vers cette zone, mais ne seront pas complètement limités à celle-ci. |
Hérité:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
Événements | |
---|---|
places_changed |
function() Arguments:aucun
Cet événement est déclenché lorsque l'utilisateur sélectionne une requête. getPlaces doit être utilisé pour obtenir de nouveaux lieux. |
Interface SearchBoxOptions
Interface google.maps.places.SearchBoxOptions
Options pouvant être définies sur un objet SearchBox
.
Propriétés | |
---|---|
bounds optional |
Type:
LatLngBounds|LatLngBoundsLiteral optional Zone vers laquelle biaiser les prédictions de requête. Les prédictions sont orientées vers les requêtes ciblant ces limites, mais n'y sont pas limitées. |