Advanced Markers

Classe AdvancedMarkerElement

Classe google.maps.marker.AdvancedMarkerElement

Affiche une position sur une carte. Notez que position doit être défini pour que AdvancedMarkerElement s'affiche.

Remarque : L'utilisation comme composant Web (par exemple, à l'aide de l'élément HTML personnalisé <gmp-advanced-marker>) n'est disponible que dans le canal v=beta.

Élément personnalisé :
<gmp-advanced-marker position="lat,lng" title="string"></gmp-advanced-marker>

Cette classe étend HTMLElement.

Cette classe implémente AdvancedMarkerElementOptions.

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

AdvancedMarkerElement
AdvancedMarkerElement([options])
Paramètres :
Crée un AdvancedMarkerElement avec les options spécifiées. Si une carte est spécifiée, le AdvancedMarkerElement y est ajouté lors de la construction.
collisionBehavior
Type : CollisionBehavior optional
content
Type : Node optional
element
Type : HTMLElement
Ce champ est en lecture seule. Élément DOM servant de support à la vue.
BetagmpClickable
Type : boolean optional
gmpDraggable
Type : boolean optional
map
Type : Map optional
position
Attribut HTML :
  • <gmp-advanced-marker position="lat,lng"></gmp-advanced-marker>
  • <gmp-advanced-marker position="lat,lng,altitude"></gmp-advanced-marker>
title
Type : string
Attribut HTML :
  • <gmp-advanced-marker title="string"></gmp-advanced-marker>
zIndex
Type : number optional
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.
addListener
addListener(eventName, handler)
Paramètres :
  • eventName : string événement observé.
  • handler : fonction Function permettant de gérer les événements.
Valeur renvoyée : écouteur d'événements résultant MapsEventListener.
Ajoute la fonction d'écouteur donnée au nom d'événement donné dans le système Maps Eventing.
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.
click
function(event)
Arguments : 
Cet événement est déclenché lorsque l'élément AdvancedMarkerElement est cliqué.

Non disponible avec addEventListener() (utilisez plutôt gmp-click).
drag
function(event)
Arguments : 
Cet événement est déclenché à plusieurs reprises lorsque l'utilisateur fait glisser AdvancedMarkerElement.

Non disponible avec addEventListener().
dragend
function(event)
Arguments : 
Cet événement est déclenché lorsque l'utilisateur arrête de faire glisser le AdvancedMarkerElement.

Non disponible avec addEventListener().
dragstart
function(event)
Arguments : 
Cet événement est déclenché lorsque l'utilisateur commence à faire glisser le AdvancedMarkerElement.

Non disponible avec addEventListener().
Betagmp-click
function(event)
Arguments : 
Cet événement est déclenché lorsque l'élément AdvancedMarkerElement est cliqué. À utiliser de préférence avec addEventListener() (au lieu de addListener()).

Interface AdvancedMarkerElementOptions

Interface google.maps.marker.AdvancedMarkerElementOptions

Options pour construire un AdvancedMarkerElement.

collisionBehavior optional
Type : CollisionBehavior optional
Énumération spécifiant le comportement d'un AdvancedMarkerElement en cas de collision avec un autre AdvancedMarkerElement ou avec les libellés de la carte de base sur une carte vectorielle.

Remarque : La collision AdvancedMarkerElement à AdvancedMarkerElement fonctionne sur les cartes matricielles et vectorielles, mais la collision AdvancedMarkerElement à libellé de carte de base ne fonctionne que sur les cartes vectorielles.

content optional
Type : Node optional
Par défaut : PinElement.element
Élément DOM qui sous-tend l'élément visuel d'un AdvancedMarkerElement.

Remarque : AdvancedMarkerElement ne clone pas l'élément DOM transmis. Une fois l'élément DOM transmis à un AdvancedMarkerElement, la transmission du même élément DOM à un autre AdvancedMarkerElement déplacera l'élément DOM et fera apparaître le AdvancedMarkerElement précédent comme vide.

BetagmpClickable optional
Type : boolean optional
Par défaut : false
Si la valeur est true, le AdvancedMarkerElement sera cliquable et déclenchera l'événement gmp-click. Il sera également interactif à des fins d'accessibilité (par exemple, en permettant la navigation au clavier à l'aide des touches fléchées).
gmpDraggable optional
Type : boolean optional
Par défaut : false
Si la valeur est true, le AdvancedMarkerElement peut être déplacé.

Remarque : AdvancedMarkerElement avec altitude n'est pas déplaçable.

map optional
Type : Map optional
Carte sur laquelle afficher le AdvancedMarkerElement. La carte est nécessaire pour afficher le AdvancedMarkerElement. Elle peut être fournie en définissant AdvancedMarkerElement.map si elle n'est pas fournie lors de la construction.
position optional
Définit la position de AdvancedMarkerElement. Un AdvancedMarkerElement peut être construit sans position, mais ne sera pas affiché tant que sa position n'aura pas été fournie (par exemple, par les actions ou les choix d'un utilisateur). La position d'un AdvancedMarkerElement peut être fournie en définissant AdvancedMarkerElement.position si elle n'est pas fournie lors de la construction.

Remarque : AdvancedMarkerElement avec altitude n'est compatible qu'avec les cartes vectorielles.

title optional
Type : string optional
Texte de roulement. Si un texte d'accessibilité est fourni (par exemple, pour une utilisation avec des lecteurs d'écran), il sera ajouté à AdvancedMarkerElement avec la valeur fournie.
zIndex optional
Type : number optional
Tous les AdvancedMarkerElement sont affichés sur la carte par ordre de zIndex, les valeurs plus élevées s'affichant devant les AdvancedMarkerElement ayant des valeurs plus faibles. Par défaut, les AdvancedMarkerElement sont affichés en fonction de leur position verticale à l'écran, les AdvancedMarkerElement inférieurs apparaissant devant les AdvancedMarkerElement plus haut sur l'écran. Notez que zIndex est également utilisé pour déterminer la priorité relative entre les repères avancés CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY. (une valeur zIndex supérieure indique une priorité plus élevée).

Classe AdvancedMarkerClickEvent

Classe google.maps.marker.AdvancedMarkerClickEvent

Cet événement est créé lorsque l'utilisateur clique sur un repère avancé. Accédez à la position du repère avec event.target.position.

Cette classe étend Event.

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

Classe PinElement

Classe google.maps.marker.PinElement

Un PinElement représente un élément DOM qui se compose d'une forme et d'un glyphe. La forme a le même style de ballon que celui de l'icône AdvancedMarkerElement par défaut. Le glyphe est un élément DOM facultatif affiché dans la forme ballon. Un PinElement peut avoir un format différent selon son PinElement.scale.

Remarque : L'utilisation en tant que composant Web (par exemple, en tant que sous-classe HTMLElement ou via HTML) n'est pas encore prise en charge.

Cette classe étend HTMLElement.

Cette classe implémente PinElementOptions.

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

PinElement
PinElement([options])
Paramètres :
background
Type : string optional
borderColor
Type : string optional
element
Type : HTMLElement
Ce champ est en lecture seule. Élément DOM servant de support à la vue.
glyph
Type : string|Element|URL optional
glyphColor
Type : string optional
scale
Type : number optional
BetaaddEventListener
addEventListener(type, listener[, options])
Paramètres :
Valeur renvoyée : void
Cette fonction n'est pas encore disponible.
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 PinElementOptions

Interface google.maps.marker.PinElementOptions

Options de création d'un PinElement.

background optional
Type : string optional
Couleur d'arrière-plan de la forme du repère. Accepte n'importe quelle valeur de couleur CSS.
borderColor optional
Type : string optional
Couleur de la bordure de la forme du repère. Accepte n'importe quelle valeur de couleur CSS.
glyph optional
Type : string|Element|URL optional
Élément DOM affiché dans l'épingle.
glyphColor optional
Type : string optional
Couleur du glyphe. Accepte n'importe quelle valeur de couleur CSS.
scale optional
Type : number optional
Par défaut : 1
Échelle du repère.