Personnalisation des repères de base

L'API Advanced Markers utilise deux classes pour définir les repères : AdvancedMarkerView fournit une fonctionnalité de repère par défaut. PinView contient des options de personnalisation plus avancées. 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
Masquer le glyphe

Schéma représentant les différentes parties d'un repère avancé. — **Figure 1** : Composants d'un repère avancé.

Ajouter un titre

Le texte du titre apparaît lorsque le curseur pointe sur un repère. Le texte du titre est visible par les lecteurs d'écran. Utilisez l'option AdvancedMarkerView.title pour ajouter du texte de titre à un repère :

TypeScript

// Default marker with title text (no PinView).
const markerViewWithText = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.419, lng: -122.03 },
    title: 'Title text for the marker at lat: 37.419, lng: -122.03',
});index.ts

JavaScript

// Default marker with title text (no PinView).
const markerViewWithText = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.419, lng: -122.03 },
  title: "Title text for the marker at lat: 37.419, lng: -122.03",
});index.js

Redimensionner le repère

Utilisez l'option PinView.scale pour ajuster l'échelle d'un repère :

TypeScript

// Adjust the scale.
const pinViewScaled = new google.maps.marker.PinView({
    scale: 1.5,
});
const markerViewScaled = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pinViewScaled.element,
});index.ts

JavaScript

// Adjust the scale.
const pinViewScaled = new google.maps.marker.PinView({
  scale: 1.5,
});
const markerViewScaled = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.419, lng: -122.02 },
  content: pinViewScaled.element,
});index.js

Modifier la couleur d'arrière-plan

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

TypeScript

// Change the background color.
const pinViewBackground = new google.maps.marker.PinView({
    background: '#FBBC04',
});
const markerViewBackground = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.419, lng: -122.01 },
    content: pinViewBackground.element,
});index.ts

JavaScript

// Change the background color.
const pinViewBackground = new google.maps.marker.PinView({
  background: "#FBBC04",
});
const markerViewBackground = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.419, lng: -122.01 },
  content: pinViewBackground.element,
});index.js

Modifier la couleur de la bordure

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

TypeScript

// Change the border color.
const pinViewBorder = new google.maps.marker.PinView({
    borderColor: '#137333',
});
const markerViewBorder = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.415, lng: -122.03 },
    content: pinViewBorder.element,
});index.ts

JavaScript

// Change the border color.
const pinViewBorder = new google.maps.marker.PinView({
  borderColor: "#137333",
});
const markerViewBorder = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.415, lng: -122.03 },
  content: pinViewBorder.element,
});index.js

Modifier la couleur du glyphe

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

TypeScript

// Change the glyph color.
const pinViewGlyph = new google.maps.marker.PinView({
    glyphColor: 'white',
});
const markerViewGlyph = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.415, lng: -122.02 },
    content: pinViewGlyph.element,
});index.ts

JavaScript

// Change the glyph color.
const pinViewGlyph = new google.maps.marker.PinView({
  glyphColor: "white",
});
const markerViewGlyph = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.415, lng: -122.02 },
  content: pinViewGlyph.element,
});index.js

Masquer le glyphe

Définissez l'option PinView.glyph sur une chaîne vide pour masquer le glyphe d'un repère :

TypeScript

// Hide the glyph.
const pinViewNoGlyph = new google.maps.marker.PinView({
    glyph: '',
});
const markerViewNoGlyph = new google.maps.marker.AdvancedMarkerView({
    map,
    position: { lat: 37.415, lng: -122.01 },
    content: pinViewNoGlyph.element,
});index.ts

JavaScript

// Hide the glyph.
const pinViewNoGlyph = new google.maps.marker.PinView({
  glyph: "",
});
const markerViewNoGlyph = new google.maps.marker.AdvancedMarkerView({
  map,
  position: { lat: 37.415, lng: -122.01 },
  content: pinViewNoGlyph.element,
});index.js

Étapes suivantes :

Créer des repères avec des graphiques