Descripción general

Marcadores avanzados te permite crear y personalizar marcadores de alto rendimiento y ofrece una funcionalidad nueva para ellos. Con Advanced Markers, puedes personalizar el fondo predeterminado del marcador, el borde y el color del glifo, ajustar su tamaño y reemplazar el ícono predeterminado del marcador por una imagen gráfica personalizada. También puedes crear marcadores accesibles que respondan a eventos de clic del DOM y a entradas del teclado. Para una personalización aún más detallada, Marcadores avanzados admite el uso de HTML y CSS personalizados y hasta permite crear marcadores completamente personalizados. En las aplicaciones 3D, puedes controlar la altitud en la que aparece un marcador. Advanced Markers es compatible tanto con los mapas de trama como los de vectores (se requiere un ID de mapa).

Comienza a utilizar Advanced Markers

Cómo personalizar el color, la escala y la imagen del ícono

Personaliza el fondo, el glifo y el color del borde del marcador predeterminado, y ajusta su tamaño.

Captura de pantalla en la que se muestran algunos marcadores personalizados

Reemplaza el ícono de marcador predeterminado por una imagen SVG o PNG personalizada.

Captura de pantalla que muestra marcadores personalizados con imágenes SVG

Cómo crear marcadores HTML personalizados

Usa HTML y CSS personalizados para crear marcadores interactivos que se destaquen visualmente, así como animaciones.

Captura de pantalla que muestra un marcador HTML personalizado

Configura los marcadores para que respondan a los clics y los eventos de teclado

Para lograr que un marcador responda a los clics y a los eventos de teclado, agrega un objeto de escucha de eventos click.

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 37.4239163, lng: -122.0947209},
    zoom: 17,
    mapId: 'DEMO_MAP_ID',
  });

  const markerView = new google.maps.marker.AdvancedMarkerView({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

  markerView.addListener('click', ({domEvent, latLng}) => {
    const {target} = domEvent;
    // Handle the click event.
    // ...
  });
}

Cómo establecer la altitud y el comportamiento de colisión de los marcadores

Configura la altitud en la que deseas que aparezca el marcador para que se muestre correctamente junto a los elementos del mapa 3D. También especifica cómo debe comportarse un marcador si se superpone con otro o con una etiqueta del mapa. La altitud del marcador solo se admite en los mapas de vectores.

Captura de pantalla que muestra un marcador ajustado según la altitud

Próximo paso