Classe PlaceAutocompleteElement
Classe google.maps.places.PlaceAutocompleteElement
PlaceAutocompleteElement est une sous-classe HTMLElement
qui fournit un composant d'UI pour l'API Places Autocomplete.
Élément personnalisé :
<gmp-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng|lat,lng,altitude" requested-language="string" requested-region="string" unit-system="metric|imperial" types="type1 type2 type3..."></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.
Constructeur | |
---|---|
PlaceAutocompleteElement |
PlaceAutocompleteElement(options) Paramètres :
|
Propriétés | |
---|---|
|
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 :
|
|
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 :
|
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 :
|
|
Type :
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional 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 :
|
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 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 :
|
|
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 :
|
|
Type :
ComponentRestrictions optional Restrictions du composant. Les restrictions de composants permettent de limiter les prédictions à celles du composant parent. Par exemple, le pays. |
|
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 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. |
Méthodes | |
---|---|
|
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 distribué à la cible. Consultez addEventListener. |
|
removeEventListener(type, listener[, options]) Paramètres :
Valeur renvoyée :
void Supprime un écouteur d'événements précédemment enregistré avec addEventListener de la cible. Consultez removeEventListener. |
Événements | |
---|---|
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. |
|
function(placeAutocompletePlaceSelectEvent) Arguments :
Cet événement est déclenché lorsqu'un utilisateur sélectionne une prédiction de lieu. Contient un 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.
Propriétés | |
---|---|
|
Type :
ComponentRestrictions optional |
|
Type :
Array<string> optional |
|
Type :
Array<string> optional |
locationBias optional |
Type :
LocationBias optional |
locationRestriction optional |
Type :
LocationRestriction optional |
name optional |
Type :
string optional |
|
Type :
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
requestedLanguage optional |
Type :
string optional |
|
Type :
Array<string> optional |
|
Type :
UnitSystem optional |
PlaceAutocompletePlaceSelectEvent class
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 le const {PlaceAutocompletePlaceSelectEvent} = await google.maps.importLibrary("places")
.
Consultez Bibliothèques de l'API Maps JavaScript.
Propriétés | |
---|---|
|
Type :
Place |
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
.
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.
Propriétés | |
---|---|
placePrediction |
Type :
PlacePrediction |
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 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 le const {PlaceDetailsElement} = await google.maps.importLibrary("places")
.
Consultez 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 la fenêtre d'affichage 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(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 distribué à la cible. Consultez addEventListener. |
configureFromLocation |
configureFromLocation(location) Paramètres :
Valeur de renvoi :
Promise<void> . Promesse qui se résout une fois que les données du lieu sont chargées et affichées.Configure le widget à partir d'un LatLng à l'aide du geocoding inversé. |
configureFromPlace |
configureFromPlace(place) Paramètres :
Valeur de renvoi :
Promise<void> . Promesse qui se résout une fois que les données du lieu sont chargées et affichées.Configure le widget à partir d'un objet Place ou d'un ID de lieu. |
|
removeEventListener(type, listener[, options]) Paramètres :
Valeur renvoyée :
void Supprime un écouteur d'événements précédemment enregistré avec addEventListener de la cible. Consultez removeEventListener. |
Événements | |
---|---|
gmp-load |
function(event) Arguments :
Cet événement est déclenché 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, 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 Voir les PlaceDetailsElement.size |
Constantes PlaceDetailsSize
google.maps.places.PlaceDetailsSize
constantes
Variantes de taille pour PlaceDetailsElement
.
Accédez-y en appelant le const {PlaceDetailsSize} = await google.maps.importLibrary("places")
.
Consultez Bibliothèques de l'API Maps JavaScript.
Constantes | |
---|---|
LARGE |
Variante de grande taille incluant une grande image, des informations de base et des coordonnées. |
MEDIUM |
Variante moyenne incluant une grande image et des informations de base. |
SMALL |
Petite variante 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 lieux 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 de lieux, 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 le const {PlaceListElement} = await google.maps.importLibrary("places")
.
Consultez 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 fenêtres d'affichage des lieux actuellement affichés. |
selectable |
Type :
boolean Indique si les éléments de la liste peuvent être sélectionnés. Si la valeur est "true", les éléments de la liste seront des boutons qui déclenchent l'événement
gmp-placeselect lorsqu'ils sont cliqués. La navigation et la sélection au clavier accessibles sont également prises en charge.Attribut HTML :
|
Méthodes | |
---|---|
|
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 distribué à la cible. Consultez addEventListener. |
configureFromSearchByTextRequest |
configureFromSearchByTextRequest(request) Paramètres :
Valeur de renvoi :
Promise<void> . Promesse qui se résout une fois que les données du lieu sont chargées et affichées.Configure le widget pour afficher les résultats de recherche d'une requête API Places Text Search. |
configureFromSearchNearbyRequest |
configureFromSearchNearbyRequest(request) Paramètres :
Valeur de renvoi :
Promise<void> . Promesse qui se résout une fois que les données du lieu sont chargées et affichées.Configure le widget pour afficher les résultats de recherche d'une requête API Places Nearby Search. |
|
removeEventListener(type, listener[, options]) Paramètres :
Valeur renvoyée :
void Supprime un écouteur d'événements précédemment enregistré avec addEventListener de la cible. Consultez removeEventListener. |
Événements | |
---|---|
gmp-load |
function(event) Arguments :
Cet événement est déclenché lorsque l'élément charge et affiche son contenu. Cet événement ne remonte pas. |
gmp-placeselect |
function(event) Arguments :
Cet événement est déclenché 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, clé API incorrecte). Cet événement ne remonte pas. |
PlaceListElementOptions interface
Interface google.maps.places.PlaceListElementOptions
Options pour PlaceListElement
.
Propriétés | |
---|---|
selectable optional |
Type :
boolean optional Voir les PlaceListElement.selectable |
PlaceListPlaceSelectEvent class
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 le const {PlaceListPlaceSelectEvent} = await google.maps.importLibrary("places")
.
Consultez Bibliothèques de l'API Maps JavaScript.
Propriétés | |
---|---|
index |
Type :
number Index de la liste du lieu sélectionné. |
place |
Type :
Place Objet Place contenant l'ID, l'emplacement et la fenêtre d'affichage du lieu sélectionné. |
Classe Autocomplete
Classe google.maps.places.Autocomplete
Widget qui fournit des prédictions de lieux en fonction du texte saisi par l'utilisateur. Il est associé à un élément d'entrée de type text
et écoute les saisies de texte dans ce champ. La liste des prédictions s'affiche 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 le const {Autocomplete} = await google.maps.importLibrary("places")
.
Consultez Bibliothèques de l'API Maps JavaScript.
Constructeur | |
---|---|
Autocomplete |
Autocomplete(inputField[, opts]) Paramètres :
Crée une instance de Autocomplete qui est associée 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 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 lorsque les détails sont récupérés avec succès. Pour obtenir la liste des champs, consultez PlaceResult . |
getPlace |
getPlace() Paramètres : aucun
Valeur renvoyée :
PlaceResult , le lieu sélectionné par l'utilisateur.Renvoie les détails du lieu sélectionné par l'utilisateur si les détails ont été récupérés avec succès. Sinon, renvoie un objet Place de stub, avec la propriété name définie sur la valeur actuelle du champ d'entrée. |
setBounds |
setBounds(bounds) Paramètres :
Valeur renvoyée : aucune
Définit la zone préférée dans laquelle renvoyer les résultats de lieux. Les résultats sont pondérés en faveur de cette zone, mais n'y sont pas restreints. |
setComponentRestrictions |
setComponentRestrictions(restrictions) Paramètres :
Valeur renvoyée : aucune
Définit les restrictions des composants. Les restrictions de composants 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 "Détails" lorsque les détails sont 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 est déclenché lorsqu'un PlaceResult est disponible pour 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 Place Details échoue, PlaceResult contient la saisie de l'utilisateur dans la propriété name , sans aucune 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 Restrictions du composant. Les restrictions de composants 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 détaillée lorsque les détails sont récupérés avec succès, qui seront facturés. Si ['ALL'] est transmis, tous les champs disponibles seront 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 avec des chemins d'accès (par exemple, "geometry.location" ). La valeur par défaut est ['ALL'] . |
|
Type :
boolean optional Indique si seuls les ID de lieu doivent être récupérés. 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 Autocomplete. Désactivé par défaut |
strictBounds optional |
Type :
boolean optional Valeur booléenne indiquant que le widget Autocomplete ne doit renvoyer que les lieux situés dans les limites du widget Autocomplete au moment de l'envoi de la requête. Si vous définissez strictBounds sur false (valeur par défaut), les résultats seront pondérés en faveur des lieux situés entre les 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 du texte saisi par un utilisateur. Il est associé à un élément d'entrée de type text
et écoute les saisies de texte dans ce champ. La liste des prédictions s'affiche 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 le const {SearchBox} = await google.maps.importLibrary("places")
.
Consultez Bibliothèques de l'API Maps JavaScript.
Constructeur | |
---|---|
SearchBox |
SearchBox(inputField[, opts]) Paramètres :
Crée une instance de SearchBox qui est associée 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ête sont biaisées. |
getPlaces |
getPlaces() Paramètres : aucun
Valeur renvoyée :
Array<PlaceResult>|undefined Renvoie la requête sélectionnée par l'utilisateur à utiliser avec l'événement places_changed . |
setBounds |
setBounds(bounds) Paramètres :
Valeur renvoyée : aucune
Définit la région à utiliser pour orienter les prédictions de requête. Les résultats seront uniquement pondérés en faveur de cette zone, mais n'y seront pas complètement restreints. |
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 orienter les prédictions de requête. Les prédictions sont pondérées en faveur des requêtes ciblant ces limites, mais n'y sont pas restreintes. |