Les repères avancés utilisent deux classes pour les définir :
La classe AdvancedMarkerElement
fournit les paramètres de base (position
,
title
et map
), et la classe PinElement
contient des options permettant d'effectuer
la personnalisation. L'extrait de code suivant montre le code permettant de créer un PinElement
,
puis appliquez-la à un repère.
// Create a pin element.
const pin = new PinElement({
scale: 1.5,
});
// Create a marker and apply the element.
const marker = new AdvancedMarkerElement({
map,
position: { lat: 37.419, lng: -122.02 },
content: pin.element,
});
Dans les cartes créées en HTML, les paramètres de base d'un repère sont déclarés à l'aide de la méthode
l'élément HTML gmp-advanced-marker
; toute personnalisation qui utilise
La classe PinElement
doit être appliquée de manière programmatique. Pour ce faire, votre code doit récupérer les éléments gmp-advanced-marker
à partir de la page HTML. L'extrait de code suivant montre du code permettant d'interroger une collection d'éléments gmp-advanced-marker
, puis d'itérer les résultats pour appliquer la personnalisation déclarée dans PinElement
.
// Return an array of markers.
const advancedMarkers = [...document.querySelectorAll('gmp-advanced-marker')];
// Loop through the markers
for (let i = 0; i < advancedMarkers.length; i++) {
const pin = new PinElement({
scale: 2.0,
});
marker.appendChild(pin.element);
}
Cette page explique comment personnaliser les repères de différentes manières :
- Ajouter un titre
- Redimensionner le repère
- Modifier la couleur d'arrière-plan
- Modifier la couleur de la bordure
- Modifier la couleur du glyphe
- Utiliser du texte dans un glyphe
- Masquer le glyphe
Ajouter un titre
Le texte du titre apparaît lorsque le curseur pointe sur un repère. Les lecteurs d'écran peuvent le lire.
Pour ajouter du texte de titre de manière automatisée, utilisez l'option AdvancedMarkerElement.title
:
// Default marker with title text (no PinElement). const markerViewWithText = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.03 }, title: "Title text for the marker at lat: 37.419, lng: -122.03", });
Pour ajouter un texte de titre à un repère créé à l'aide du code HTML, utilisez l'attribut title
:
<gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID" style="height: 400px" > <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA" ></gmp-advanced-marker> <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA" ></gmp-advanced-marker> </gmp-map>
Redimensionner le repère
Pour mettre à l'échelle un repère, utilisez l'option scale
.
TypeScript
// Adjust the scale. const pinScaled = new PinElement({ scale: 1.5, }); const markerViewScaled = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.02 }, content: pinScaled.element, });
JavaScript
// Adjust the scale. const pinScaled = new PinElement({ scale: 1.5, }); const markerViewScaled = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.02 }, content: pinScaled.element, });
Modifier la couleur d'arrière-plan
Utilisez l'option PinElement.background
pour modifier la couleur d'arrière-plan d'un repère :
TypeScript
// Change the background color. const pinBackground = new PinElement({ background: '#FBBC04', }); const markerViewBackground = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.01 }, content: pinBackground.element, });
JavaScript
// Change the background color. const pinBackground = new PinElement({ background: "#FBBC04", }); const markerViewBackground = new AdvancedMarkerElement({ map, position: { lat: 37.419, lng: -122.01 }, content: pinBackground.element, });
Modifier la couleur de la bordure
Utilisez l'option PinElement.borderColor
pour modifier la couleur de la bordure d'un repère :
TypeScript
// Change the border color. const pinBorder = new PinElement({ borderColor: '#137333', }); const markerViewBorder = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.035 }, content: pinBorder.element, });
JavaScript
// Change the border color. const pinBorder = new PinElement({ borderColor: "#137333", }); const markerViewBorder = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.035 }, content: pinBorder.element, });
Modifier la couleur du glyphe
Utilisez l'option PinElement.glyphColor
pour modifier la couleur du glyphe d'un repère :
TypeScript
// Change the glyph color. const pinGlyph = new PinElement({ glyphColor: 'white', }); const markerViewGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.025 }, content: pinGlyph.element, });
JavaScript
// Change the glyph color. const pinGlyph = new PinElement({ glyphColor: "white", }); const markerViewGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.025 }, content: pinGlyph.element, });
Ajouter du texte à un glyphe
Utilisez l'option PinElement.glyph
pour remplacer le glyphe par défaut par du texte
. Le glyphe de texte de l'PinElement
se met à l'échelle avec l'PinElement
et sa couleur par défaut correspond à la glyphColor
par défaut de l'PinElement
.
TypeScript
const pinTextGlyph = new PinElement({ glyph: 'T', glyphColor: 'white', }); const markerViewGlyphText = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.015 }, content: pinTextGlyph.element, });
JavaScript
const pinTextGlyph = new PinElement({ glyph: "T", glyphColor: "white", }); const markerViewGlyphText = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.015 }, content: pinTextGlyph.element, });
Masquer le glyphe
Définissez l'option PinElement.glyph
sur une chaîne vide pour masquer le glyphe d'un repère :
TypeScript
// Hide the glyph. const pinNoGlyph = new PinElement({ glyph: '', }); const markerViewNoGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.005 }, content: pinNoGlyph.element, });
JavaScript
// Hide the glyph. const pinNoGlyph = new PinElement({ glyph: "", }); const markerViewNoGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.005 }, content: pinNoGlyph.element, });
Vous pouvez aussi définir PinElement.glyphColor
sur la même valeur que PinElement.background
.
Cela a pour effet de masquer visuellement le glyphe.