Draw on the map

Marker3DElement

Classe google.maps.maps3d.Marker3DElement

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

Élément personnalisé :
<gmp-marker-3d altitude-mode="absolute" collision-behavior="required" draws-when-occluded extruded label="string" position="lat,lng" size-preserved z-index="number"></gmp-marker-3d>

Cette classe étend HTMLElement.

Cette classe implémente Marker3DElementOptions.

Accédez-y en appelant const {Marker3DElement} = await google.maps.importLibrary("maps3d").
Consultez Bibliothèques de l'API Maps JavaScript.
Marker3DElement
Marker3DElement([options])
Paramètres : 
Crée un Marker3DElement avec les options spécifiées.
altitudeMode
Type : AltitudeMode optional
Par défaut : AltitudeMode.CLAMP_TO_GROUND
Spécifie comment l'altitude de la position est interprétée.
Attribut HTML :
  • <gmp-marker-3d altitude-mode="absolute"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="clamp-to-ground"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="relative-to-ground"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="relative-to-mesh"></gmp-marker-3d>
collisionBehavior
Type : CollisionBehavior optional
Par défaut : CollisionBehavior.REQUIRED
Énumération spécifiant comment un Marker3DElement doit se comporter lorsqu'il entre en collision avec un autre Marker3DElement ou avec les libellés de la carte de base.
Attribut HTML :
  • <gmp-marker-3d collision-behavior="required"></gmp-marker-3d>
  • <gmp-marker-3d collision-behavior="required-and-hides-optional"></gmp-marker-3d>
  • <gmp-marker-3d collision-behavior="optional-and-hides-lower-priority"></gmp-marker-3d>
drawsWhenOccluded
Type : boolean optional
Par défaut : false
Indique si ce repère doit être dessiné ou non lorsqu'il est masqué. Le repère peut être masqué par la géométrie de la carte (par exemple, des bâtiments).
Attribut HTML :
  • <gmp-marker-3d draws-when-occluded></gmp-marker-3d>
extruded
Type : boolean optional
Par défaut : false
Indique si le repère doit être connecté au sol. Pour extruder un repère, le altitudeMode doit être RELATIVE_TO_GROUND ou ABSOLUTE.
Attribut HTML :
  • <gmp-marker-3d extruded></gmp-marker-3d>
label
Type : string optional
Texte à afficher par ce repère.
Attribut HTML :
  • <gmp-marker-3d label="string"></gmp-marker-3d>
position
Emplacement de la pointe du repère. L'altitude est ignorée dans certains modes et est donc facultative.
Attribut HTML :
  • <gmp-marker-3d position="lat,lng"></gmp-marker-3d>
  • <gmp-marker-3d position="lat,lng,altitude"></gmp-marker-3d>
sizePreserved
Type : boolean optional
Par défaut : false
Indique si ce repère doit conserver sa taille ou non, quelle que soit la distance par rapport à la caméra. Par défaut, la taille du repère est ajustée en fonction de la distance par rapport à la caméra/de l'inclinaison.
Attribut HTML :
  • <gmp-marker-3d size-preserved></gmp-marker-3d>
zIndex
Type : number optional
zIndex par rapport aux autres repères.
Attribut HTML :
  • <gmp-marker-3d z-index="number"></gmp-marker-3d>
default
Tous les éléments personnalisés ajoutés directement à Marker3DElement seront insérés. Toutefois, seuls les éléments de type HTMLImageElement, SVGElement et PinElement seront utilisés pour dessiner des repères. Les autres éléments seront ignorés.
HTMLImageElement et SVGElement doivent être encapsulés dans un élément <template> avant d'être attribués à l'emplacement par défaut de Marker3DElement.

Les images et les SVG sont actuellement pixellisés avant d'être affichés dans la scène 3D. Par conséquent, le code HTML personnalisé intégré aux classes SVG ou CSS ajoutées aux images ne sera pas appliqué et risque de ne pas être reflété lorsque les repères sont affichés à l'écran.
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 Marker3DElementOptions

google.maps.maps3d.Marker3DElementOptions interface

Objet Marker3DElementOptions utilisé pour définir les propriétés pouvant être définies sur un Marker3DElement.
altitudeMode optional
Type : AltitudeMode optional
Consultez les Marker3DElement.altitudeMode.
collisionBehavior optional
Type : CollisionBehavior optional
Consultez les Marker3DElement.collisionBehavior.
drawsWhenOccluded optional
Type : boolean optional
Consultez les Marker3DElement.drawsWhenOccluded.
extruded optional
Type : boolean optional
Consultez les Marker3DElement.extruded.
label optional
Type : string optional
Consultez les Marker3DElement.label.
position optional
Consultez les Marker3DElement.position.
sizePreserved optional
Type : boolean optional
Consultez les Marker3DElement.sizePreserved.
zIndex optional
Type : number optional
Consultez les Marker3DElement.zIndex.

Classe Marker3DInteractiveElement

Classe google.maps.maps3d.Marker3DInteractiveElement

Affiche une position sur une carte 3D. Notez que le position doit être défini pour que le Marker3DInteractiveElement s'affiche. Contrairement à Marker3DElement, Marker3DInteractiveElement reçoit un événement gmp-click.

Élément personnalisé :
<gmp-marker-3d-interactive gmp-popover-target="popover-id" title="string"></gmp-marker-3d-interactive>

Cette classe étend Marker3DElement.

Cette classe implémente Marker3DInteractiveElementOptions.

Accédez-y en appelant const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d").
Consultez Bibliothèques de l'API Maps JavaScript.
Marker3DInteractiveElement
Marker3DInteractiveElement([options])
Paramètres : 
Crée un Marker3DInteractiveElement avec les options spécifiées.
gmpPopoverTargetElement
Type : PopoverElement optional
Lorsqu'il est défini, l'élément popover s'ouvre lorsque l'utilisateur clique sur ce repère.
Attribut HTML :
  • <gmp-marker-3d-interactive gmp-popover-target="popover-id"></gmp-marker-3d-interactive>
title
Type : string
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 Marker3DInteractiveElement avec la valeur fournie.
Attribut HTML :
  • <gmp-marker-3d-interactive title="string"></gmp-marker-3d-interactive>
Héritées : altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex
default
Tous les éléments personnalisés ajoutés directement à Marker3DInteractiveElement seront insérés. Toutefois, seuls les éléments de type PinElement seront utilisés pour dessiner des repères. Les autres éléments seront ignorés.
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.
gmp-click
function(clickEvent)
Arguments :
Cet événement est déclenché lorsque l'utilisateur clique sur l'élément Marker3DInteractiveElement.

Marker3DInteractiveElementOptions

google.maps.maps3d.Marker3DInteractiveElementOptions interface

Objet Marker3DInteractiveElementOptions utilisé pour définir les propriétés pouvant être définies sur un Marker3DInteractiveElement.

Cette interface étend Marker3DElementOptions.

gmpPopoverTargetElement optional
Type : PopoverElement optional
Consultez les Marker3DInteractiveElement.gmpPopoverTargetElement.
title optional
Type : string optional
Consultez les Marker3DInteractiveElement.title.
Héritées : altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex

Classe Model3DElement

Classe google.maps.maps3d.Model3DElement

Un modèle 3D qui permet d'afficher des modèles glTF. Notez que position et src doivent être définis pour que Model3DElement s'affiche.

Les propriétés de base de gLTF PBR doivent être acceptées. Aucune extension ni propriété d'extension n'est actuellement prise en charge.

Élément personnalisé :
<gmp-model-3d altitude-mode="absolute" orientation="heading,tilt,roll" position="lat,lng" scale="number" src="url"></gmp-model-3d>

Cette classe étend HTMLElement.

Cette classe implémente Model3DElementOptions.

Accédez-y en appelant const {Model3DElement} = await google.maps.importLibrary("maps3d").
Consultez Bibliothèques de l'API Maps JavaScript.
Model3DElement
Model3DElement([options])
Paramètres : 
Crée un Model3DElement avec les options spécifiées.
altitudeMode
Type : AltitudeMode optional
Par défaut : AltitudeMode.CLAMP_TO_GROUND
Spécifie comment l'altitude de la position est interprétée.
Attribut HTML :
  • <gmp-model-3d altitude-mode="absolute"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="clamp-to-ground"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="relative-to-ground"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="relative-to-mesh"></gmp-model-3d>
orientation
Décrit la rotation du système de coordonnées d'un modèle 3D pour positionner le modèle sur la carte 3D.

Les rotations sont appliquées au modèle dans l'ordre suivant : roulis, inclinaison, puis cap.
Attribut HTML :
  • <gmp-model-3d orientation="heading,tilt,roll"></gmp-model-3d>
position
Définit la position de Model3DElement. L'altitude est ignorée dans certains modes et est donc facultative.
Attribut HTML :
  • <gmp-model-3d position="lat,lng"></gmp-model-3d>
  • <gmp-model-3d position="lat,lng,altitude"></gmp-model-3d>
scale
Type : number|Vector3D|Vector3DLiteral optional
Par défaut : 1
Met à l'échelle le modèle le long des axes x, y et z dans l'espace de coordonnées du modèle.
Attribut HTML :
  • <gmp-model-3d scale="number"></gmp-model-3d>
  • <gmp-model-3d scale="x,y,z"></gmp-model-3d>
src
Type : string|URL optional
Spécifie l'URL du modèle 3D. Pour le moment, seuls les modèles au format .glb sont acceptés.

Toutes les URL HTTP relatives seront résolues en URL absolues correspondantes.

Veuillez noter que si vous hébergez vos fichiers de modèle .glb sur un site Web ou un serveur différent de votre application principale, vous devez configurer les en-têtes HTTP CORS appropriés. Cela permet à votre application d'accéder de manière sécurisée aux fichiers de modèle de l'autre domaine.
Attribut HTML :
  • <gmp-model-3d src="url"></gmp-model-3d>
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 Model3DElementOptions

google.maps.maps3d.Model3DElementOptions interface

Objet Model3DElementOptions utilisé pour définir les propriétés pouvant être définies sur un Model3DElement.
altitudeMode optional
Type : AltitudeMode optional
Consultez les Model3DElement.altitudeMode.
orientation optional
Consultez les Model3DElement.orientation.
position optional
Consultez les Model3DElement.position.
scale optional
Type : number|Vector3D|Vector3DLiteral optional
Consultez les Model3DElement.scale.
src optional
Type : string|URL optional
Consultez les Model3DElement.src.

Classe Model3DInteractiveElement

Classe google.maps.maps3d.Model3DInteractiveElement

Un modèle 3D qui permet d'afficher des modèles glTF. Notez que position et src doivent être définis pour que Model3DElement s'affiche.

Les propriétés de base de gLTF PBR doivent être acceptées. Aucune extension ni propriété d'extension n'est actuellement prise en charge.

Contrairement à Model3DElement, Model3DInteractiveElement reçoit un événement gmp-click.

Élément personnalisé :
<gmp-model-3d-interactive></gmp-model-3d-interactive>

Cette classe étend Model3DElement.

Cette classe implémente Model3DInteractiveElementOptions.

Accédez-y en appelant const {Model3DInteractiveElement} = await google.maps.importLibrary("maps3d").
Consultez Bibliothèques de l'API Maps JavaScript.
Model3DInteractiveElement
Model3DInteractiveElement([options])
Paramètres : 
Crée un Model3DInteractiveElement avec les options spécifiées.
Hérité : altitudeMode, orientation, position, scale, src
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.
gmp-click
function(clickEvent)
Arguments :
Cet événement est déclenché lorsque l'utilisateur clique sur l'élément Model3DInteractiveElement.

Interface Model3DInteractiveElementOptions

google.maps.maps3d.Model3DInteractiveElementOptions interface

Objet Model3DInteractiveElementOptions utilisé pour définir les propriétés pouvant être définies sur un Model3DInteractiveElement.

Cette interface étend Model3DElementOptions.

Hérité : altitudeMode, orientation, position, scale, src

Polyline3DElement

Classe google.maps.maps3d.Polyline3DElement

Une polyligne 3D est une superposition linéaire de segments de ligne connectés sur une carte 3D.

Élément personnalisé :
<gmp-polyline-3d altitude-mode="absolute" draws-occluded-segments extruded geodesic outer-color="string" outer-width="number" path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." stroke-color="string" stroke-width="number" z-index="number"></gmp-polyline-3d>

Cette classe étend HTMLElement.

Cette classe implémente Polyline3DElementOptions.

Accédez-y en appelant const {Polyline3DElement} = await google.maps.importLibrary("maps3d").
Consultez Bibliothèques de l'API Maps JavaScript.
Polyline3DElement
Polyline3DElement([options])
Paramètres : 
Crée un Polyline3DElement avec les options spécifiées.
altitudeMode
Type : AltitudeMode optional
Par défaut : AltitudeMode.CLAMP_TO_GROUND
Spécifie la façon dont les composants d'altitude dans les coordonnées sont interprétés.
Attribut HTML :
  • <gmp-polyline-3d altitude-mode="absolute"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="clamp-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-mesh"></gmp-polyline-3d>
drawsOccludedSegments
Type : boolean optional
Par défaut : false
Indique si les parties de la polyligne qui pourraient être masquées sont dessinées ou non. Les polylignes peuvent être masquées par la géométrie de la carte (par exemple, des bâtiments).
Attribut HTML :
  • <gmp-polyline-3d draws-occluded-segments></gmp-polyline-3d>
extruded
Type : boolean optional
Par défaut : false
Indique si la polyligne doit être connectée au sol. Pour extruder une polyligne, altitudeMode doit être défini sur RELATIVE_TO_GROUND ou ABSOLUTE.
Attribut HTML :
  • <gmp-polyline-3d extruded></gmp-polyline-3d>
geodesic
Type : boolean optional
Par défaut : false
Lorsque la valeur est true, les bords de la polyligne sont interprétés comme géodésiques et suivent la courbure de la Terre. Lorsque la valeur est false, les bords de la polyligne sont affichés sous forme de lignes droites dans l'espace de l'écran.
Attribut HTML :
  • <gmp-polyline-3d geodesic></gmp-polyline-3d>
outerColor
Type : string optional
Couleur extérieure. Toutes les couleurs CSS3 sont compatibles.
Attribut HTML :
  • <gmp-polyline-3d outer-color="string"></gmp-polyline-3d>
outerWidth
Type : number optional
La largeur extérieure est comprise entre 0.0 et 1.0. Il s'agit d'un pourcentage de strokeWidth.
Attribut HTML :
  • <gmp-polyline-3d outer-width="number"></gmp-polyline-3d>
path
Séquence ordonnée de coordonnées de la polyligne. L'altitude est ignorée dans certains modes et est donc facultative.
Attribut HTML :
  • <gmp-polyline-3d path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."></gmp-polyline-3d>
strokeColor
Type : string optional
Couleur du trait. Toutes les couleurs CSS3 sont compatibles.
Attribut HTML :
  • <gmp-polyline-3d stroke-color="string"></gmp-polyline-3d>
strokeWidth
Type : number optional
Épaisseur du trait, en pixels.
Attribut HTML :
  • <gmp-polyline-3d stroke-width="number"></gmp-polyline-3d>
zIndex
Type : number optional
zIndex par rapport aux autres polygones.
Attribut HTML :
  • <gmp-polyline-3d z-index="number"></gmp-polyline-3d>
coordinates
Séquence ordonnée de coordonnées de la polyligne. L'altitude est ignorée dans certains modes et est donc facultative.
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 Polyline3DElementOptions

google.maps.maps3d.Polyline3DElementOptions interface

Objet Polyline3DElementOptions utilisé pour définir les propriétés pouvant être définies sur un Polyline3DElement.
altitudeMode optional
Type : AltitudeMode optional
Consultez les Polyline3DElement.altitudeMode.
coordinates optional
Consultez les Polyline3DElement.coordinates.
drawsOccludedSegments optional
Type : boolean optional
Consultez les Polyline3DElement.drawsOccludedSegments.
extruded optional
Type : boolean optional
Consultez les Polyline3DElement.extruded.
geodesic optional
Type : boolean optional
Consultez les Polyline3DElement.geodesic.
outerColor optional
Type : string optional
Consultez les Polyline3DElement.outerColor.
outerWidth optional
Type : number optional
Consultez les Polyline3DElement.outerWidth.
strokeColor optional
Type : string optional
Consultez les Polyline3DElement.strokeColor.
strokeWidth optional
Type : number optional
Consultez les Polyline3DElement.strokeWidth.
zIndex optional
Type : number optional
Consultez les Polyline3DElement.zIndex.

Classe Polyline3DInteractiveElement

Classe google.maps.maps3d.Polyline3DInteractiveElement

Une polyligne 3D est une superposition linéaire de segments de ligne connectés sur une carte 3D. Contrairement à Polyline3DElement, Polyline3DInteractiveElement reçoit un événement gmp-click.

Élément personnalisé :
<gmp-polyline-3d-interactive></gmp-polyline-3d-interactive>

Cette classe étend Polyline3DElement.

Cette classe implémente Polyline3DInteractiveElementOptions.

Accédez-y en appelant const {Polyline3DInteractiveElement} = await google.maps.importLibrary("maps3d").
Consultez Bibliothèques de l'API Maps JavaScript.
Polyline3DInteractiveElement
Polyline3DInteractiveElement([options])
Paramètres : 
Crée un Polyline3DInteractiveElement avec les options spécifiées.
Hérité : altitudeMode, drawsOccludedSegments, extruded, geodesic, outerColor, outerWidth, path, strokeColor, strokeWidth, zIndex, coordinates
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.
gmp-click
function(clickEvent)
Arguments :
  • clickEvent : LocationClickEvent L'objet d'événement contiendra la position (latitude, longitude et altitude) du clic.
Cet événement est déclenché lorsque l'utilisateur clique sur l'élément Polyline3DInteractiveElement.

Interface Polyline3DInteractiveElementOptions

google.maps.maps3d.Polyline3DInteractiveElementOptions interface

Objet Polyline3DInteractiveElementOptions utilisé pour définir les propriétés pouvant être définies sur un Polyline3DInteractiveElement.

Cette interface étend Polyline3DElementOptions.

Hérité : altitudeMode, coordinates, drawsOccludedSegments, extruded, geodesic, outerColor, outerWidth, strokeColor, strokeWidth, zIndex

Classe Polygon3DElement

Classe google.maps.maps3d.Polygon3DElement

Un polygone 3D (comme une polyligne 3D) définit une série de coordonnées connectées dans une séquence ordonnée. De plus, les polygones forment une boucle fermée et définissent une région pleine.

Élément personnalisé :
<gmp-polygon-3d altitude-mode="absolute" draws-occluded-segments extruded fill-color="string" geodesic path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." stroke-color="string" stroke-width="number" z-index="number"></gmp-polygon-3d>

Cette classe étend HTMLElement.

Cette classe implémente Polygon3DElementOptions.

Accédez-y en appelant const {Polygon3DElement} = await google.maps.importLibrary("maps3d").
Consultez Bibliothèques de l'API Maps JavaScript.
Polygon3DElement
Polygon3DElement([options])
Paramètres : 
Crée un Polygon3DElement avec les options spécifiées.
altitudeMode
Type : AltitudeMode optional
Par défaut : AltitudeMode.CLAMP_TO_GROUND
Spécifie la façon dont les composants d'altitude dans les coordonnées sont interprétés.
Attribut HTML :
  • <gmp-polygon-3d altitude-mode="absolute"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="clamp-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-mesh"></gmp-polygon-3d>
drawsOccludedSegments
Type : boolean optional
Par défaut : false
Indique si les parties du polygone qui pourraient être masquées sont dessinées ou non. Les polygones peuvent être masqués par la géométrie de la carte (par exemple, des bâtiments).
Attribut HTML :
  • <gmp-polygon-3d draws-occluded-segments></gmp-polygon-3d>
extruded
Type : boolean optional
Par défaut : false
Indique si le polygone doit être relié au sol. Pour extruder un polygone, le altitudeMode doit être RELATIVE_TO_GROUND ou ABSOLUTE.
Attribut HTML :
  • <gmp-polygon-3d extruded></gmp-polygon-3d>
fillColor
Type : string optional
Couleur de remplissage. Toutes les couleurs CSS3 sont compatibles.
Attribut HTML :
  • <gmp-polygon-3d fill-color="string"></gmp-polygon-3d>
geodesic
Type : boolean optional
Par défaut : false
Si la valeur est true, les bords du polygone sont interprétés comme géodésiques et suivent la courbure de la Terre. Lorsque la valeur est false, les bords du polygone sont affichés sous forme de lignes droites dans l'espace de l'écran.
Attribut HTML :
  • <gmp-polygon-3d geodesic></gmp-polygon-3d>
innerPaths
Séquence ordonnée de coordonnées qui désigne une boucle fermée. Contrairement aux polylignes, un polygone peut être constitué d'un ou de plusieurs tracés, qui créent plusieurs découpes à l'intérieur du polygone.
path
Séquence ordonnée de coordonnées qui désigne une boucle fermée. L'altitude est ignorée dans certains modes et est donc facultative.
Attribut HTML :
  • <gmp-polygon-3d path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."></gmp-polygon-3d>
strokeColor
Type : string optional
Couleur du trait. Toutes les couleurs CSS3 sont compatibles.
Attribut HTML :
  • <gmp-polygon-3d stroke-color="string"></gmp-polygon-3d>
strokeWidth
Type : number optional
Épaisseur du trait, en pixels.
Attribut HTML :
  • <gmp-polygon-3d stroke-width="number"></gmp-polygon-3d>
zIndex
Type : number optional
zIndex par rapport aux autres polygones.
Attribut HTML :
  • <gmp-polygon-3d z-index="number"></gmp-polygon-3d>
outerCoordinates
Séquence ordonnée de coordonnées qui désigne une boucle fermée. L'altitude est ignorée dans certains modes et est donc facultative.
innerCoordinates
Séquence ordonnée de coordonnées qui désigne une boucle fermée. Contrairement aux polylignes, un polygone peut être constitué d'un ou de plusieurs tracés, qui créent plusieurs découpes à l'intérieur du polygone.
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 Polygon3DElementOptions

google.maps.maps3d.Polygon3DElementOptions interface

Objet Polygon3DElementOptions utilisé pour définir les propriétés pouvant être définies sur un Polygon3DElement.
altitudeMode optional
Type : AltitudeMode optional
Consultez les Polygon3DElement.altitudeMode.
drawsOccludedSegments optional
Type : boolean optional
Consultez les Polygon3DElement.drawsOccludedSegments.
extruded optional
Type : boolean optional
Consultez les Polygon3DElement.extruded.
fillColor optional
Type : string optional
Consultez les Polygon3DElement.fillColor.
geodesic optional
Type : boolean optional
Consultez les Polygon3DElement.geodesic.
innerCoordinates optional
Consultez les Polygon3DElement.innerCoordinates.
outerCoordinates optional
Consultez les Polygon3DElement.outerCoordinates.
strokeColor optional
Type : string optional
Consultez les Polygon3DElement.strokeColor.
strokeWidth optional
Type : number optional
Consultez les Polygon3DElement.strokeWidth.
zIndex optional
Type : number optional
Consultez les Polygon3DElement.zIndex.

Classe Polygon3DInteractiveElement

Classe google.maps.maps3d.Polygon3DInteractiveElement

Un polygone 3D (comme une polyligne 3D) définit une série de coordonnées connectées dans une séquence ordonnée. De plus, les polygones forment une boucle fermée et définissent une région pleine. Contrairement à Polygon3DElement, Polygon3DInteractiveElement reçoit un événement gmp-click.

Élément personnalisé :
<gmp-polygon-3d-interactive></gmp-polygon-3d-interactive>

Cette classe étend Polygon3DElement.

Cette classe implémente Polygon3DInteractiveElementOptions.

Accédez-y en appelant const {Polygon3DInteractiveElement} = await google.maps.importLibrary("maps3d").
Consultez Bibliothèques de l'API Maps JavaScript.
Polygon3DInteractiveElement
Polygon3DInteractiveElement([options])
Paramètres : 
Crée un Polygon3DInteractiveElement avec les options spécifiées.
Hérité : altitudeMode, drawsOccludedSegments, extruded, fillColor, geodesic, innerPaths, path, strokeColor, strokeWidth, zIndex, outerCoordinates, innerCoordinates
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.
gmp-click
function(clickEvent)
Arguments :
  • clickEvent : LocationClickEvent L'objet d'événement contiendra l'emplacement du clic (latitude, longitude et altitude).
Cet événement est déclenché lorsque l'utilisateur clique sur l'élément Polygon3DInteractiveElement.

Interface Polygon3DInteractiveElementOptions

google.maps.maps3d.Polygon3DInteractiveElementOptions interface

Objet Polygon3DInteractiveElementOptions utilisé pour définir les propriétés pouvant être définies sur un Polygon3DInteractiveElement.

Cette interface étend Polygon3DElementOptions.

Hérité : altitudeMode, drawsOccludedSegments, extruded, fillColor, geodesic, innerCoordinates, outerCoordinates, strokeColor, strokeWidth, zIndex

Classe PopoverElement

Classe google.maps.maps3d.PopoverElement

Élément HTML personnalisé qui affiche un popover. Elle ressemble à une bulle et est souvent associée à un repère.

Élément personnalisé :
<gmp-popover altitude-mode="absolute" auto-pan-disabled light-dismiss-disabled open position-anchor="lat,lng"></gmp-popover>

Cette classe étend HTMLElement.

Cette classe implémente PopoverElementOptions.

Accédez-y en appelant const {PopoverElement} = await google.maps.importLibrary("maps3d").
Consultez Bibliothèques de l'API Maps JavaScript.
PopoverElement
PopoverElement([options])
Paramètres : 
altitudeMode
Type : AltitudeMode optional
Par défaut : AltitudeMode.CLAMP_TO_GROUND
Spécifie comment l'altitude de la position est interprétée.
Attribut HTML :
  • <gmp-popover altitude-mode="absolute"></gmp-popover>
  • <gmp-popover altitude-mode="clamp-to-ground"></gmp-popover>
  • <gmp-popover altitude-mode="relative-to-ground"></gmp-popover>
  • <gmp-popover altitude-mode="relative-to-mesh"></gmp-popover>
autoPanDisabled
Type : boolean optional
Par défaut : false
Si la valeur est définie sur "true", désactive le panoramique de la carte pour rendre le popover entièrement visible lorsqu'il s'ouvre.
Attribut HTML :
  • <gmp-popover auto-pan-disabled></gmp-popover>
lightDismissDisabled
Type : boolean optional
Par défaut : false
Indique si ce popover doit être fermé par un clic en dehors de la zone ou non. Le comportement de "fermeture par clic en dehors" est semblable à la définition de l'attribut popover="auto", qui fait partie de l'API Popover du navigateur.
Attribut HTML :
  • <gmp-popover light-dismiss-disabled></gmp-popover>
open
Type : boolean optional
Par défaut : false
Indique si ce popover doit être ouvert ou non.
Attribut HTML :
  • <gmp-popover open></gmp-popover>
positionAnchor
Position à laquelle afficher ce popover. Si le popover est ancré à un repère interactif, la position du repère sera utilisée à la place.
Attribut HTML :
  • <gmp-popover position-anchor="lat,lng"></gmp-popover>
  • <gmp-popover position-anchor="lat,lng,altitude"></gmp-popover>
  • <gmp-popover position-anchor="marker-id"></gmp-popover>
default
Place le contenu de l'emplacement dans la section principale du popover.
header
Place le contenu de l'emplacement dans la section d'en-tête du popover.
--gmp-popover-max-width
Largeur maximale du popover, quelle que soit la largeur du contenu.
--gmp-popover-min-width
Largeur minimale du popover, quelle que soit la largeur du contenu. Lorsque vous utilisez cette propriété, nous vous recommandons vivement de la définir sur une valeur inférieure à la largeur de la carte (en pixels).
--gmp-popover-pixel-offset-x
Décalage sur l'axe des abscisses, en pixels, de la pointe du popover par rapport au point de la carte dont les coordonnées géographiques correspondent au point d'ancrage du popover.
--gmp-popover-pixel-offset-y
Décalage sur l'axe Y, en pixels, de la pointe du popover par rapport au point de la carte dont les coordonnées géographiques correspondent à l'ancrage du popover.
background-color
Couleur d'arrière-plan du popover. Pour en savoir plus, consultez la documentation sur background-color. Veuillez noter que le popover de lieu par défaut est également affecté par cette propriété. Utilisez des classes CSS ciblées ou des styles intégrés sur les popovers personnalisés pour éviter de styliser le popover de lieu par défaut.
border-radius
Rayon de bordure du pop-over. Pour en savoir plus, consultez la documentation sur border-radius. Veuillez noter que le popover de lieu par défaut est également affecté par cette propriété. Utilisez des classes CSS ciblées ou des styles intégrés sur les popovers personnalisés pour éviter de styliser le popover de lieu par défaut.
box-shadow
Propriété box-shadow du popover. Pour en savoir plus, consultez la documentation sur box-shadow. Veuillez noter que le popover de lieu par défaut est également affecté par cette propriété. Utilisez des classes CSS ciblées ou des styles intégrés sur les popovers personnalisés pour éviter de styliser le popover de lieu par défaut.
color-scheme
Indique le jeu de couleurs dans lequel ce popover peut être affiché. Pour en savoir plus, consultez la documentation sur color-scheme. Si aucune valeur n'est spécifiée, les préférences de jeu de couleurs de l'utilisateur sont utilisées par défaut.
padding
Marge intérieure du popover. Pour en savoir plus, consultez la documentation sur padding. Veuillez noter que le popover de lieu par défaut est également affecté par cette propriété. Utilisez des classes CSS ciblées ou des styles intégrés sur les popovers personnalisés pour éviter de styliser le popover de lieu par défaut.
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 PopoverElementOptions

google.maps.maps3d.PopoverElementOptions interface

Objet PopoverElementOptions utilisé pour définir les propriétés pouvant être définies sur un PopoverElement.
altitudeMode optional
Type : AltitudeMode optional
Consultez les PopoverElement.altitudeMode.
autoPanDisabled optional
Type : boolean optional
Consultez les PopoverElement.autoPanDisabled.
lightDismissDisabled optional
Type : boolean optional
Consultez les PopoverElement.lightDismissDisabled.
open optional
Type : boolean optional
Consultez les PopoverElement.open.
positionAnchor optional
Consultez les PopoverElement.positionAnchor.

AltitudeMode

google.maps.maps3d.AltitudeMode constantes

Spécifie la façon dont les composants d'altitude dans les coordonnées sont interprétés.

Accédez-y en appelant const {AltitudeMode} = await google.maps.importLibrary("maps3d").
Consultez Bibliothèques de l'API Maps JavaScript.
ABSOLUTE Permet d'exprimer les objets par rapport au niveau moyen de la mer. Cela signifie également que si le niveau de détail du relief change sous l'objet, sa position absolue reste la même.
CLAMP_TO_GROUND Permet d'exprimer des objets placés au sol. Ils resteront au niveau du sol en suivant le terrain, quelle que soit l'altitude fournie. Si l'objet est positionné au-dessus d'une grande étendue d'eau, il sera placé au niveau de la mer.
RELATIVE_TO_GROUND Permet d'exprimer des objets par rapport à la surface du sol. Si le niveau de détail du terrain change, la position de l'objet reste constante par rapport au sol. Au-dessus de l'eau, l'altitude est interprétée comme une valeur en mètres au-dessus du niveau de la mer.
RELATIVE_TO_MESH Permet d'exprimer les objets par rapport au point le plus élevé entre le sol, le bâtiment et la surface de l'eau. Au-dessus de l'eau, il s'agit de la surface de l'eau. Au-dessus d'un terrain, il s'agit de la surface du bâtiment (le cas échéant) ou de la surface du sol (en l'absence de bâtiment).