Maps

Classe MapElement

Classe google.maps.MapElement

MapElement est une sous-classe HTMLElement pour le rendu des cartes. Une fois la bibliothèque maps chargée, une carte peut être créée en HTML. Exemple : 

<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID">
  <button slot="control-block-start-inline-end">Custom Control</button>
</gmp-map>
En interne, il utilise Map, qui est accessible avec la propriété MapElement.innerMap.

Élément personnalisé :
<gmp-map center="lat,lng" heading-interaction-disabled internal-usage-attribution-ids="id1 id2" map-id="string" rendering-type="vector" tilt-interaction-disabled zoom="number"></gmp-map>

Cette classe étend HTMLElement.

Cette classe implémente MapElementOptions.

Accédez-y en appelant le const {MapElement} = await google.maps.importLibrary("maps").
 Consultez Bibliothèques de l'API Maps JavaScript.
MapElement
MapElement([options])
Paramètres :
center
Type : LatLng|LatLngLiteral optional
Latitude et longitude du centre de la carte.
Attribut HTML :
  • <gmp-map center="lat,lng"></gmp-map>
headingInteractionDisabled
Type : boolean optional
Par défaut : false
Indique si la carte doit autoriser le contrôle de l'orientation de la caméra par l'utilisateur (rotation). Cette option n'est effective que lorsque la carte est une carte vectorielle. Si ce paramètre n'est pas défini dans le code, la configuration cloud de l'ID de carte est utilisée (si elle est disponible).
Attribut HTML :
  • <gmp-map heading-interaction-disabled></gmp-map>
innerMap
Type : Map
Référence au Map que MapElement utilise en interne.
internalUsageAttributionIds
Type : Iterable<string> optional
Par défaut : null
Ajoute un ID d'attribution d'utilisation à l'initialiseur, ce qui aide Google à comprendre quelles bibliothèques et quels exemples sont utiles aux développeurs, comme l'utilisation d'une bibliothèque de regroupement de repères. Pour ne pas envoyer l'ID d'attribution de l'utilisation, vous pouvez supprimer cette propriété ou remplacer la valeur par une chaîne vide. Seules les valeurs uniques seront envoyées. Les modifications apportées à cette valeur après l'instanciation peuvent être ignorées.
Attribut HTML :
  • <gmp-map internal-usage-attribution-ids="id1 id2"></gmp-map>
mapId
Type : string optional
L'ID de carte de la carte. Ce paramètre ne peut pas être défini ni modifié une fois la carte instanciée. Map.DEMO_MAP_ID peut être utilisé pour tester des fonctionnalités qui nécessitent un ID de carte, mais pas l'activation du cloud.
Attribut HTML :
  • <gmp-map map-id="string"></gmp-map>
renderingType
Type : RenderingType optional
Par défaut : RenderingType.VECTOR
Si la carte doit être matricielle ou vectorielle. Ce paramètre ne peut pas être défini ni modifié une fois la carte instanciée. Si elle n'est pas définie, la configuration cloud de l'ID de carte déterminera le type de rendu (si disponible). Veuillez noter que les cartes vectorielles ne sont pas disponibles pour tous les appareils ni tous les navigateurs. La carte basculera vers une carte matricielle si nécessaire.
Attribut HTML :
  • <gmp-map rendering-type="vector"></gmp-map>
  • <gmp-map rendering-type="raster"></gmp-map>
tiltInteractionDisabled
Type : boolean optional
Par défaut : false
Indique si la carte doit autoriser le contrôle de l'inclinaison de la caméra par l'utilisateur. Cette option n'est effective que lorsque la carte est une carte vectorielle. Si ce paramètre n'est pas défini dans le code, la configuration cloud de l'ID de carte est utilisée (si elle est disponible).
Attribut HTML :
  • <gmp-map tilt-interaction-disabled></gmp-map>
zoom
Type : number optional
Niveau de zoom de la carte. Les valeurs de zoom valides sont des nombres compris entre zéro et le niveau de zoom maximal autorisé. Plus la valeur de zoom est élevée, plus la résolution est élevée.
Attribut HTML :
  • <gmp-map zoom="number"></gmp-map>
control-block-end-inline-center
Place l'élément inséré à la position ControlPosition.BLOCK_END_INLINE_CENTER.
control-block-end-inline-end
Place l'élément inséré à la position ControlPosition.BLOCK_END_INLINE_END.
control-block-end-inline-start
Place l'élément inséré à la position ControlPosition.BLOCK_END_INLINE_START.
control-block-start-inline-center
Place l'élément inséré à la position ControlPosition.BLOCK_START_INLINE_CENTER.
control-block-start-inline-end
Place l'élément inséré à la position ControlPosition.BLOCK_START_INLINE_END.
control-block-start-inline-start
Place l'élément inséré à la position ControlPosition.BLOCK_START_INLINE_START.
control-inline-end-block-center
Place l'élément inséré à la position ControlPosition.INLINE_END_BLOCK_CENTER.
control-inline-end-block-end
Place l'élément inséré à la position ControlPosition.INLINE_END_BLOCK_END.
control-inline-end-block-start
Place l'élément inséré à la position ControlPosition.INLINE_END_BLOCK_START.
control-inline-start-block-center
Place l'élément inséré à la position ControlPosition.INLINE_START_BLOCK_CENTER.
control-inline-start-block-end
Place l'élément inséré à la position ControlPosition.INLINE_START_BLOCK_END.
control-inline-start-block-start
Place l'élément inséré à la position ControlPosition.INLINE_START_BLOCK_START.
default
Vous pouvez créer des composants réutilisables autour des composants Web Maps JavaScript, comme AdvancedMarkerElement, à l'aide d'éléments personnalisés. Par défaut, tous les éléments personnalisés ajoutés directement à MapElement sont insérés et affichés dans MapPanes.overlayMouseTarget. Toutefois, les composants Web de l'API Maps JavaScript peuvent être réinsérés dans les emplacements internes de MapElement.
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.
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.
gmp-zoomchange
function(event)
Arguments : 
Cet événement est déclenché lorsque la propriété de zoom de la carte change.

Interface MapElementOptions

Interface google.maps.MapElementOptions

Objet MapElementOptions utilisé pour définir les propriétés pouvant être définies sur un MapElement.
center optional
Type : LatLng|LatLngLiteral optional
Consultez les MapElement.center.
headingInteractionDisabled optional
Type : boolean optional
Consultez les MapElement.headingInteractionDisabled.
internalUsageAttributionIds optional
Type : Iterable<string> optional
Consultez les MapElement.internalUsageAttributionIds.
mapId optional
Type : string optional
Consultez les MapElement.mapId.
renderingType optional
Type : RenderingType optional
Consultez les MapElement.renderingType.
tiltInteractionDisabled optional
Type : boolean optional
Consultez les MapElement.tiltInteractionDisabled.
zoom optional
Type : number optional
Consultez les MapElement.zoom.

Classe ZoomChangeEvent

Classe google.maps.ZoomChangeEvent

Cet événement est créé à partir d'une modification du zoom de surveillance.

Cette classe étend Event.

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

Classe Map

Classe google.maps.Map

Cette classe étend MVCObject.

Accédez-y en appelant le const {Map} = await google.maps.importLibrary("maps").
 Consultez Bibliothèques de l'API Maps JavaScript.
Map
Map(mapDiv[, opts])
Paramètres :
  • mapDiv : HTMLElement La carte s'affichera pour remplir cet élément.
  • opts : MapOptions optional Options
Crée une nouvelle carte à l'intérieur du conteneur HTML (en général un élément DIV).
DEMO_MAP_ID ID de carte pouvant être utilisé pour les exemples de code qui nécessitent un ID de carte. Cet ID de carte n'est pas destiné à être utilisé dans des applications de production et ne peut pas être utilisé pour les fonctionnalités qui nécessitent une configuration cloud (comme le style cloud).
controls
Commandes supplémentaires à associer à la carte. Pour ajouter une commande à la carte, ajoutez le <div> de la commande au MVCArray correspondant à la ControlPosition où elle doit être affichée.
data
Type : Data
Instance de Data, liée à la carte. Ajoutez des fonctionnalités à cet objet Data pour les afficher facilement sur cette carte.
mapTypes
Registre des instances MapType par ID de chaîne.
overlayMapTypes
Type : MVCArray<MapType optional>
Autres types de cartes à superposer. Les types de carte de superposition s'affichent par-dessus la carte de base à laquelle ils sont associés, dans l'ordre dans lequel ils apparaissent dans le tableau overlayMapTypes (les superpositions avec des valeurs d'index plus élevées sont affichées devant celles avec des valeurs d'index plus faibles).
fitBounds
fitBounds(bounds[, padding])
Paramètres :
  • bounds : limites