Advanced Markers

AdvancedMarkerElement

class google.maps.marker.AdvancedMarkerElement extends HTMLElement implements AdvancedMarkerElementOptions
library "marker"

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

<gmp-advanced-marker
  anchor-left="string"
  anchor-top="string"
  gmp-clickable
  position="lat,lng"
  title="string">
</gmp-advanced-marker>

const {AdvancedMarkerElement} = await google.maps.importLibrary("marker");

Constructeur
AdvancedMarkerElement	AdvancedMarkerElement([options]) Paramètres : options: AdvancedMarkerElementOptions optional 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.

Propriétés
anchorLeft attr: anchor-left	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 : anchor-left="string"
anchorTop attr: anchor-top	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 : anchor-top="string"
collisionBehavior	Type : CollisionBehavior optional Consultez les AdvancedMarkerElementOptions.collisionBehavior.
gmpClickable attr: gmp-clickable	Type : boolean optional Consultez les AdvancedMarkerElementOptions.gmpClickable. Attribut HTML : gmp-clickable
gmpDraggable	Type : boolean optional Consultez les AdvancedMarkerElementOptions.gmpDraggable.
map	Type : Map optional Consultez les AdvancedMarkerElementOptions.map.
position attr: position	Type : LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional Consultez les AdvancedMarkerElementOptions.position. Attribut HTML : position="lat,lng" position="lat,lng,altitude"
title attr: title	Type : string Consultez les AdvancedMarkerElementOptions.title. Attribut HTML : title="string"
zIndex	Type : number optional Consultez les AdvancedMarkerElementOptions.zIndex.
element readonly	Obsolète : utilisez directement AdvancedMarkerElement. Type : HTMLElement Ce champ est en lecture seule. Élément DOM qui sauvegarde la vue.
content	Obsolète : utilisez plutôt .children. Type : Node optional Consultez les AdvancedMarkerElementOptions.content.

Méthodes
addListener	Obsolète : utilisez plutôt la méthode DOM addEventListener() standard. addListener(eventName, handler) Paramètres : eventName: string Événement observé. handler: Function Fonction permettant de 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.
Hérité : addEventListener, removeEventListener

Événements
gmp-click	function(event) Arguments : event: AdvancedMarkerClickEvent Cet événement est déclenché lorsque l'utilisateur clique sur l'élément AdvancedMarkerElement. Compatible uniquement avec addEventListener() (au lieu de addListener()).
gmp-drag	function(event) Arguments : event: Event Cet événement est déclenché de manière répétée pendant que l'utilisateur fait glisser l'élément AdvancedMarkerElement. Compatible uniquement avec addEventListener() (au lieu de addListener()).
gmp-dragend	function(event) Arguments : event: Event Cet événement est déclenché lorsque l'utilisateur arrête de faire glisser l'élément AdvancedMarkerElement. Compatible uniquement avec addEventListener() (au lieu de addListener()).
gmp-dragstart	function(event) Arguments : event: Event Cet événement est déclenché lorsque l'utilisateur commence à faire glisser l'élément AdvancedMarkerElement. Compatible uniquement avec addEventListener() (au lieu de addListener()).
click	Obsolète : utilisez plutôt AdvancedMarkerElement.gmp-click. function(event) Arguments : event: MapMouseEvent Cet événement est déclenché lorsque l'utilisateur clique sur l'élément AdvancedMarkerElement. Non disponible avec addEventListener() (utilisez plutôt gmp-click).
dragstart	Obsolète : utilisez plutôt AdvancedMarkerElement.gmp-dragstart. function(event) Arguments : event: MapMouseEvent Cet événement est déclenché lorsque l'utilisateur commence à faire glisser l'élément AdvancedMarkerElement. Non disponible avec addEventListener() (utilisez plutôt gmp-dragstart).
drag	Obsolète : utilisez plutôt AdvancedMarkerElement.gmp-drag. function(event) Arguments : event: MapMouseEvent 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() (utilisez plutôt gmp-drag).
dragend	Obsolète : utilisez plutôt AdvancedMarkerElement.gmp-dragend. function(event) Arguments : event: MapMouseEvent Cet événement est déclenché lorsque l'utilisateur arrête de faire glisser l'élément AdvancedMarkerElement. Non disponible avec addEventListener() (utilisez plutôt gmp-dragend).

Interface AdvancedMarkerElementOptions

interface google.maps.marker.AdvancedMarkerElementOptions
implémentée par AdvancedMarkerElement

Options de construction d'un AdvancedMarkerElement.

Propriétés
anchorLeft facultatif	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 facultatif	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 facultatif	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 facultatif	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 facultatif	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 facultatif	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 facultatif	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 facultatif	Type : LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral 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 facultatif	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 facultatif	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. Mélanger des repères avec un zIndex explicite et des repères sans peut entraîner des résultats visuels inattendus. Pour garantir un comportement prévisible, il est recommandé de définir le zIndex pour tous les repères ou de ne pas le définir. 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

class google.maps.marker.AdvancedMarkerClickEvent extends Event
library "marker"

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.

const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker");

Classe PinElement

class google.maps.marker.PinElement extends HTMLElement implements PinElementOptions
library "marker"

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.

const {PinElement} = await google.maps.importLibrary("marker");

Constructeur
PinElement	PinElement([options]) Paramètres : options: PinElementOptions optional

Propriétés
background	Type : string optional Couleur d'arrière-plan de la forme du repère. Consultez les PinElementOptions.background.
borderColor	Type : string optional Couleur de la bordure de la forme du repère. Consultez les PinElementOptions.borderColor.
glyphColor	Type : string optional Couleur du glyphe du repère. Consultez les PinElementOptions.glyphColor.
glyphSrc	Type : URL|string optional Source de l'image du glyphe à afficher dans le repère. Consultez les PinElementOptions.glyphSrc.
glyphText	Type : string optional Texte affiché dans le repère. Consultez les PinElementOptions.glyphText.
scale	Type : number optional Consultez les PinElementOptions.scale.
element readonly	Obsolète : utilisez directement PinElement. Type : HTMLElement Ce champ est en lecture seule. Élément DOM qui sauvegarde la vue.
glyph	Obsolète : utilisez plutôt PinElementOptions.glyphText ou PinElementOptions.glyphSrc. Type : string|Element|URL optional Consultez les PinElementOptions.glyph.

Méthodes
Hérité : addEventListener, removeEventListener

Interface PinElementOptions

interface google.maps.marker.PinElementOptions
implémentée par PinElement

Options de création d'un PinElement.

Propriétés
background facultatif	Type : string optional Couleur d'arrière-plan de la forme du repère. Accepte n'importe quelle valeur de couleur CSS.
borderColor facultatif	Type : string optional Couleur de la bordure de la forme du repère. Accepte n'importe quelle valeur de couleur CSS.
glyph facultatif	Obsolète : utilisez plutôt PinElementOptions.glyphText ou PinElementOptions.glyphSrc. Type : string|Element|URL optional Élément DOM affiché dans le repère.
glyphColor facultatif	Type : string optional Couleur du glyphe. Accepte n'importe quelle valeur de couleur CSS.
glyphSrc facultatif	Type : URL|string optional Source de l'image du glyphe à afficher dans le repère.
glyphText facultatif	Type : string optional Texte affiché dans le repère.
scale facultatif	Type : number optional Par défaut : 1 Échelle du repère.