Personnalisation des repères de base

L'API Markers pour Maps 3D utilise deux classes pour définir les repères : la classe 3DMarkerElement fournit les paramètres de base (position, label et map), et la classe PinElement contient des options de personnalisation plus avancées.

Pour ajouter des repères à une carte, vous devez d'abord charger la bibliothèque de repères, qui fournit les classes 3DMarkerElement et PinElement.

L'extrait suivant montre le code permettant de créer un PinElement, puis de l'appliquer à un repère :

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(pinScaled);

Dans les cartes créées à l'aide de HTML, les paramètres de base d'un repère sont déclarés à l'aide de l'élément HTML gmp-marker-3d. Toute personnalisation utilisant la classe PinElement doit être appliquée par programmation. Pour ce faire, votre code doit récupérer les éléments gmp-marker-3d de la page HTML. L'extrait suivant montre le code permettant d'interroger une collection d'éléments gmp-marker-3d, puis d'itérer les résultats pour appliquer la personnalisation déclarée dans gmp-marker-3d.

// Return an array of markers.
const markers = [...document.querySelectorAll('gmp-marker-3d')];

// Loop through the markers
for (let i = 0; i < markers.length; i++) {
  const pin = new PinElement({
      scale: 2.0,
  });

  markers[i].appendChild(pin.element);
}

Cette page explique comment personnaliser les repères de différentes manières :

Redimensionner le repère

Pour redimensionner un repère, utilisez l'option scale :

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(pinScaled);

Modifier la couleur d'arrière-plan

Utilisez l'option PinElement.background pour modifier la couleur d'arrière-plan d'un repère :

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});

const markerWithBackground = new Marker3DElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerWithBackground.append(pinBackground);

Modifier la couleur de la bordure

Utilisez l'option PinElement.borderColor pour modifier la couleur de la bordure d'un repère :

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#FFFFFF',
});
const markerWithBorder = new Marker3DElement({
    position: { lat: 37.415, lng: -122.035 },
});
markerWithBorder.append(pinBorder);

Modifier la couleur du glyphe

Utilisez l'option PinElement.glyphColor pour modifier la couleur du glyphe d'un repère :

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerWithGlyphColor = new Marker3DElement({
    position: { lat: 37.415, lng: -122.025 },
});
markerWithGlyphColor.append(pinGlyph);

Ajouter du texte à un glyphe

Utilisez l'option PinElement.glyph pour remplacer le glyphe par défaut par un caractère de texte. Le glyphe de texte de PinElement est mis à l'échelle avec PinElement, et sa couleur par défaut correspond à la glyphColor par défaut de PinElement :

// Change many elements together and extrude marker.
const pinTextGlyph = new PinElement({
    background: '#F0F6FC',
    glyphText: 'E',
    glyphColor: 'red',
    borderColor: '#0000FF',
});
const markerWithGlyphText = new Marker3DElement({
    position: { lat: 37.415, lng: -122.015, altitude: 50 },
    extruded: true,
    altitudeMode: 'RELATIVE_TO_GROUND',
});
markerWithGlyphText.append(pinTextGlyph);

Modifier l'altitude

Utilisez l'option Marker3DElement.position.altitude combinée à Marker3DElement.altitudeMode et Marker3DElement.extruded pour modifier l'altitude du repère et ajouter une ligne extrudée entre le sol et le repère :

// Change a marker's altitude and add an extrusion.
const extrudedMarker = new Marker3DElement({
    position: { lat: 37.4239163, lng: -122.0947209, altitude: 100 },
    altitudeMode: 'RELATIVE_TO_GROUND',
    extruded: true,
});

Supprimer des repères

Utilisez Marker3DElement.remove() pour supprimer des repères de la carte :

const marker = document.querySelector('gmp-marker-3d');
marker.remove();

Étapes suivantes