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 en tant que composant Web (par exemple, l'utilisation 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 au compte en appelant const {AdvancedMarkerElement} = await google.maps.importLibrary("marker"). Consultez Bibliothèques dans 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, AdvancedMarkerElement est ajouté à la carte lors de la construction.
collisionBehavior
Type:CollisionBehavior optional
Consultez les AdvancedMarkerElementOptions.collisionBehavior.
content
Type:Node optional
Consultez les AdvancedMarkerElementOptions.content.
element
Ce champ est en lecture seule. Élément DOM qui sauvegarde la vue.
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.
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 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 est appelée chaque fois que l'événement spécifié est diffusé vers la cible. Voir GroupByKey
addListener
addListener(eventName, handler)
Paramètres:
  • eventName:  string événement observé.
  • handler:  Function fonction pour gérer les événements.
Valeur renvoyée:MapsEventListener écouteur d'événements obtenu.
Ajoute la fonction d'écouteur donnée au nom d'événement donné dans le système d'événements Google Maps.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Paramètres:
  • type:  string chaîne spécifiant le type d'événement pour lequel vous souhaitez supprimer un écouteur d'événements.
  • listener:  EventListener|EventListenerObject écouteur d'événements du gestionnaire d'événements à supprimer de la cible d'événement.
  • options:  boolean|EventListenerOptions optional Voir les options
Valeur renvoyée:  void
Supprime de la cible un écouteur d'événements précédemment enregistré auprès de GroupByKey. Voir 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 gmp-click à la place).
drag
function(event)
Arguments:
Cet événement se déclenche de façon répétée lorsque l'utilisateur fait glisser le 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 le AdvancedMarkerElement.

Non disponible avec addEventListener().
Betagmp-click
function(event)
Arguments:
Cet événement est déclenché lorsque l'utilisateur clique sur l'élément AdvancedMarkerElement. Utilisation optimale avec addEventListener() (au lieu de addListener()).

Interface AdvancedMarkerElementOptions

Interface google.maps.marker.AdvancedMarkerElementOptions

Options pour créer un AdvancedMarkerElement
collisionBehavior optional
Type:CollisionBehavior optional
Énumération spécifiant le comportement d'une AdvancedMarkerElement lorsqu'elle entre en collision avec une autre AdvancedMarkerElement ou avec les étiquettes de carte de base sur une carte vectorielle.

Remarque: Les collisions AdvancedMarkerElement vers AdvancedMarkerElement fonctionnent aussi bien sur les cartes matricielles que vectorielles. Toutefois, AdvancedMarkerElement sur la carte de base ne fonctionne que sur les cartes vectorielles.
content optional
Type:Node optional
Par défaut:PinElement.element
Élément DOM qui sauvegarde le visuel d'un AdvancedMarkerElement.

Remarque: AdvancedMarkerElement ne clone pas l'élément DOM transmis. Une fois l'élément DOM transmis à un AdvancedMarkerElement, transmettre le même élément DOM à un autre AdvancedMarkerElement déplace l'élément DOM et donne l'impression que l'élément AdvancedMarkerElement précédent était vide.
gmpDraggable optional
Type:boolean optional
Par défaut:false
Si true, vous pouvez faire glisser AdvancedMarkerElement.

Remarque: Il n'est pas possible de déplacer les AdvancedMarkerElement avec altitude.
map optional
Type:Map optional
Carte sur laquelle afficher AdvancedMarkerElement. La carte est requise pour afficher 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 s'affiche que lorsque sa position est fournie (par exemple, en fonction des actions ou des choix de l'utilisateur). La position d'une AdvancedMarkerElement peut être fournie en définissant AdvancedMarkerElement.position si elle n'est pas fournie à la construction.

Remarque: AdvancedMarkerElement avec altitude n'est compatible qu'avec les cartes vectorielles.
title optional
Type:string optional
Texte de roulement. Si cette valeur est définie, un texte d'accessibilité (par exemple, pour les lecteurs d'écran) est 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 devant les AdvancedMarkerElement ayant des valeurs plus faibles. Par défaut, les AdvancedMarkerElement sont affichées en fonction de leur position verticale à l'écran, les AdvancedMarkerElement plus basses devant les AdvancedMarkerElement plus haut. Notez que zIndex permet également de déterminer la priorité relative entre les repères avancés CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY. Plus la valeur zIndex est élevée, plus la priorité est élevée.

Classe AdvancedMarkerClickEvent

Classe google.maps.marker.AdvancedMarkerClickEvent

Pour créer cet événement, cliquez sur un repère avancé. Accédez à la position du repère avec event.target.position.

Cette classe étend Event.

Accédez au compte en appelant const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker"). Consultez Bibliothèques dans 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 d'infobulle que dans l'élément AdvancedMarkerElement par défaut. Le glyphe est un élément DOM facultatif affiché dans la forme d'une infobulle. Le format de PinElement peut être différent en fonction de sa 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 disponible.

Cette classe étend HTMLElement.

Cette classe implémente PinElementOptions.

Accédez au compte en appelant const {PinElement} = await google.maps.importLibrary("marker"). Consultez Bibliothèques dans 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.
element
Ce champ est en lecture seule. Élément DOM qui sauvegarde la vue.
glyph
Type:string|Element|URL optional
Consultez les PinElementOptions.glyph.
glyphColor
Type:string optional
Consultez les PinElementOptions.glyphColor.
scale
Type:number optional
Consultez les PinElementOptions.scale.
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 spécifiant le type d'événement pour lequel vous souhaitez supprimer un écouteur d'événements.
  • listener:  EventListener|EventListenerObject écouteur d'événements du gestionnaire d'événements à supprimer de la cible d'événement.
  • options:  boolean|EventListenerOptions optional Voir les options
Valeur renvoyée:  void
Supprime de la cible un écouteur d'événements précédemment enregistré auprès de GroupByKey. Voir removeEventListener

Interface PinElementOptions

Interface google.maps.marker.PinElementOptions

Options pour créer un PinElement
background optional
Type:string optional
Couleur d'arrière-plan de la forme du repère. Accepte toutes les valeurs de couleur CSS.
borderColor optional
Type:string optional
Couleur de bordure de la forme du repère. Accepte toutes les valeurs 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 toutes les valeurs de couleur CSS.
scale optional
Type:number optional
Par défaut:1
Échelle du repère.