Personalização básica de marcadores

A API Advanced Markers usa duas classes para definir marcadores: a classe AdvancedMarkerView, que oferece a funcionalidade de marcador padrão, e a PinView, que contém mais opções para personalização. Nesta página, mostramos como personalizar marcadores da seguinte forma:

Adicionar texto do título
Ajustar a escala do marcador
Mudar a cor do plano de fundo
Mudar a cor da borda
Mudar a cor do glifo
Ocultar o glifo

Diagrama mostrando as partes de um marcador avançado. — **Figura 1**: as partes de um marcador avançado.

Adicionar texto do título

O texto do título aparece ao passar o cursor sobre um marcador e é visível para os leitores de tela. Use a opção AdvancedMarkerView.title para adicionar texto ao título:

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

Ajustar a escala do marcador

Use a opção PinView.scale para ajustar a escala de um marcador:

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

Mudar a cor do plano de fundo

Use a opção PinView.background para mudar a cor de fundo de um marcador:

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

Mudar a cor da borda

Use a opção PinView.borderColor para mudar a cor da borda de um marcador:

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

Mudar a cor do glifo

Use a opção PinView.glyphColor para mudar a cor do glifo de um marcador:

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

Ocultar o glifo

Defina a opção PinView.glyph como uma string vazia para ocultar o glifo de um marcador:

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

Próximas etapas:

Criar marcadores com gráficos