Personalización básica de los marcadores

La API de Marcadores avanzados usa dos clases para definir marcadores: la clase AdvancedMarkerView proporciona la funcionalidad predeterminada del marcador y PinView contiene opciones para una mayor personalización. En esta página, te indicamos los pasos para aplicar las siguientes personalizaciones:

Cómo agregar el texto del título
Cómo aumentar la escala del marcador
Cómo cambiar el color del fondo
Cómo cambiar el color del borde
Cómo cambiar el color del glifo
Cómo ocultar el glifo

Diagrama que muestra las distintas partes de un marcador de Advanced Markers — **Imagen 1**: Partes de un marcador de Advanced Markers

Cómo agregar el texto del título

El texto del título aparece cuando se coloca el cursor sobre un marcador y es visible para los lectores de pantalla. Usa la opción AdvancedMarkerView.title para agregar el texto del título a un marcador:

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

Cómo aumentar la escala del marcador

Usa la opción PinView.scale para ajustar la escala de un 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

Cómo cambiar el color del fondo

Usa la opción PinView.background para cambiar el color de fondo de un 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

Cómo cambiar el color del borde

Usa la opción PinView.borderColor para cambiar el color del borde de un 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

Cómo cambiar el color del glifo

Usa la opción PinView.glyphColor para cambiar el color del glifo de un 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

Cómo ocultar el glifo

Establece la opción PinView.glyph en una string vacía para ocultar el glifo del 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óximos pasos:

Cómo crear marcadores con gráficos