Advanced Markers

AdvancedMarkerElement

Classe google.maps.marker.AdvancedMarkerElement

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

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

Cette classe étend HTMLElement.

Cette classe implémente AdvancedMarkerElementOptions.

Accédez-y en appelant 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, l'AdvancedMarkerElement est ajouté à la carte lors de la construction.
anchorLeft
Type : string optional
Par défaut : "-50%"
Une valeur de longueur-pourcentage CSS utilisée pour décaler le point d'ancrage du repère par rapport à son angle supérieur gauche. Cette option est utile lorsque vous utilisez un élément visuel dont le point d'ancrage est différent du point central inférieur standard du repère par défaut.
Attribut HTML :
  • <gmp-advanced-marker anchor-left="string"></gmp-advanced-marker>
anchorTop
Type : string optional
Valeur par défaut : "-100%"
Une valeur de longueur-pourcentage CSS utilisée pour décaler le point d'ancrage du repère par rapport à son angle supérieur gauche. Cette option est utile lorsque vous utilisez un élément visuel dont le point d'ancrage est différent du point central inférieur standard du repère par défaut.
Attribut HTML :
  • <gmp-advanced-marker anchor-top="string"></gmp-advanced-marker>
collisionBehavior
Type : CollisionBehavior optional
Consultez les AdvancedMarkerElementOptions.collisionBehavior.
gmpClickable
Type : boolean optional
Consultez les AdvancedMarkerElementOptions.gmpClickable.
Attribut HTML :
  • <gmp-advanced-marker gmp-clickable></gmp-advanced-marker>
gmpDraggable
Type : boolean optional
Consultez les AdvancedMarkerElementOptions.gmpDraggable.
map
Type : Map optional
Consultez les AdvancedMarkerElementOptions.map.
position
Consultez les AdvancedMarkerElementOptions.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
Consultez les AdvancedMarkerElementOptions.title.
Attribut HTML :
  • <gmp-advanced-marker title="string"></gmp-advanced-marker>
zIndex
Type : number optional
Consultez les AdvancedMarkerElementOptions.zIndex.
element
Type : HTMLElement
Ce champ est en lecture seule. Élément DOM qui sauvegarde la vue.
content
Type : Node optional
Consultez les AdvancedMarkerElementOptions.content.
addEventListener
addEventListener(type, listener[, options])
Paramètres : 
  • type : string Chaîne sensible à la casse représentant le type d'événement à écouter.
  • listener : EventListener|EventListenerObject 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é est envoyé à la cible. Consultez addEventListener.
addListener
addListener(eventName, handler)
Paramètres : 
  • eventName : string Événement observé.
  • handler : fonction Function pour gérer les événements.
Valeur renvoyée : MapsEventListener Écouteur d'événements obtenu.
Ajoute la fonction d'écouteur donnée au nom de l'événement donné dans le système d'événements Maps.
removeEventListener
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énements.
  • 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 de la cible un écouteur d'événements précédemment enregistré avec addEventListener. Consultez removeEventListener.
click
function(event)
Arguments :
Cet événement est déclenché lorsque l'utilisateur clique sur l'élément AdvancedMarkerElement.

Non disponible avec addEventListener() (utilisez plutôt gmp-click).
drag
function(event)
Arguments :
Cet événement est déclenché de manière répétée pendant que l'utilisateur fait glisser l'élément AdvancedMarkerElement.

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

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

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

Interface AdvancedMarkerElementOptions

google.maps.marker.AdvancedMarkerElementOptions interface

Options de construction d'un AdvancedMarkerElement.
anchorLeft optional
Type : string optional
Par défaut : "-50%"
Une valeur de longueur-pourcentage CSS utilisée pour décaler le point d'ancrage du repère par rapport à son angle supérieur gauche. Cette option est utile lorsque vous utilisez un élément visuel dont le point d'ancrage est différent du point central inférieur standard du repère par défaut.
anchorTop optional
Type : string optional
Valeur par défaut : "-100%"
Une valeur de longueur-pourcentage CSS utilisée pour décaler le point d'ancrage du repère par rapport à son angle supérieur gauche. Cette option est utile lorsque vous utilisez un élément visuel dont le point d'ancrage est différent du point central inférieur standard du repère par défaut.
collisionBehavior optional
Type : CollisionBehavior optional
Énumération spécifiant comment un AdvancedMarkerElement doit se comporter lorsqu'il entre en collision avec un autre AdvancedMarkerElement ou avec les libellés de la carte de base sur une carte vectorielle.

Remarque : Les collisions entre AdvancedMarkerElement et AdvancedMarkerElement fonctionnent sur les cartes matricielles et vectorielles. En revanche, les collisions entre AdvancedMarkerElement et les libellés de la carte de base ne fonctionnent que sur les cartes vectorielles.
content optional
Type : Node optional
Par défaut : PinElement
Élément DOM qui soutient 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, si vous transmettez le même élément DOM à un autre AdvancedMarkerElement, l'élément DOM sera déplacé et le AdvancedMarkerElement précédent semblera vide.
gmpClickable optional
Type : boolean optional
Par défaut : false
Si la valeur est true, l'élément AdvancedMarkerElement sera cliquable et déclenchera l'événement gmp-click. Il sera également interactif à des fins d'accessibilité (par exemple, pour permettre 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 requise pour afficher le AdvancedMarkerElement et 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 il 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é à l'élément 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 situés plus haut sur l'écran. Notez que zIndex permet également de 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 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 composé d'une forme et d'un glyphe. La forme a le même style de bulle que celui de l'élément AdvancedMarkerElement ou Marker3DElement par défaut. Le glyphe est un élément DOM facultatif affiché dans la forme de la bulle. Un PinElement peut avoir un format différent en fonction de son PinElement.scale.

Cette classe étend HTMLElement.

Cette classe implémente PinElementOptions.

Accédez-y en appelant const {PinElement} = await google.maps.importLibrary("marker").
Consultez Bibliothèques de l'API Maps JavaScript.
PinElement
PinElement([options])
Paramètres : 
background
Type : string optional
Consultez les PinElementOptions.background.
borderColor
Type : string optional
Consultez les PinElementOptions.borderColor.
glyphColor
Type : string optional
Consultez les PinElementOptions.glyphColor.
glyphSrc
Type : URL|string optional
Consultez les PinElementOptions.glyphSrc.
glyphText
Type : string optional
Consultez les PinElementOptions.glyphText.
scale
Type : number optional
Consultez les PinElementOptions.scale.
element
Type : HTMLElement
Ce champ est en lecture seule. Élément DOM qui sauvegarde la vue.
glyph
Type : string|Element|URL optional
Consultez les PinElementOptions.glyph.
addEventListener
addEventListener(type, listener[, options])
Paramètres : 
  • type : string Chaîne sensible à la casse représentant le type d'événement à écouter.
  • listener : EventListener|EventListenerObject 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é est envoyé à la cible. Consultez addEventListener.
removeEventListener
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énements.
  • 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 de la cible un écouteur d'événements précédemment enregistré avec addEventListener. Consultez removeEventListener.

Interface PinElementOptions

google.maps.marker.PinElementOptions interface

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 le repère.
glyphColor optional
Type : string optional
Couleur du glyphe. Accepte n'importe quelle valeur de couleur CSS.
glyphSrc optional
Type : URL|string optional
Source de l'image du glyphe à afficher dans le repère.
glyphText optional
Type : string optional
Texte affiché dans le repère.
scale optional
Type : number optional
Par défaut : 1
Échelle du repère.