Migra a los marcadores avanzados

La clase google.maps.Marker dejó de estar disponible el 21 de febrero de 2024 (v3.56). Te recomendamos que migres a la nueva clase google.maps.marker.AdvancedMarkerElement. Los marcadores avanzados ofrecen mejoras sustantivas en relación con la clase google.maps.Marker heredada. Más información sobre esta baja

Para actualizar un marcador heredado y convertirlo en uno avanzado, haz lo siguiente:

  1. Agrega el código para importar la biblioteca del marcador (consulta los pasos a continuación).
  2. Cambia google.maps.Marker por google.maps.marker.AdvancedMarkerElement; si tu instrucción de importación declara AdvancedMarker, puedes omitir la ruta calificada.
  3. Agrega un ID de mapa a tu código de inicialización del mapa. Por ejemplo, mapId: 'DEMO_MAP_ID' para fines de prueba si aún no tienes un ID de mapa.

Agrega la biblioteca de Marcadores avanzados

El método que uses para cargar las bibliotecas dependerá de cómo tu página web cargue la API de Maps JavaScript.

  • Si tu página web usa la importación dinámica de bibliotecas, agrega la biblioteca de marcadores y, luego, importa AdvancedMarkerElement (y, opcionalmente, PinElement) en el tiempo de ejecución, como se muestra aquí.

    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

  • Si tu página web utiliza la etiqueta de carga de secuencia de comandos directa heredada, agrega libraries=marker a la secuencia de comandos de carga, como se muestra en el siguiente fragmento.

    <script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker"
defer
></script>

Más información sobre cómo cargar la API de Maps JavaScript

Ejemplos

En los siguientes ejemplos, se muestra el código utilizado para agregar un marcador heredado y, luego, el código para hacer lo mismo, pero con marcadores avanzados:

Antes de la migración

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
});

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  map: map,
  position: position,
  title: 'Uluru',
});

Después de la migración

// Import the needed libraries.
// Not required if the legacy direct script loading tag is in use.
const { Map } = await.google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

const map = new Map(document.getElementById("map"),  {
  zoom: 4,
  center: position,
  mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
});

// The advanced marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
    map,
    position: position,
    title: 'Uluru/Ayers Rock',
});

Explora las características de los marcadores avanzados

Los marcadores avanzados se pueden personalizar de modos completamente nuevos. Ahora puedes ajustar su tamaño (la escala) y cambiar los colores del fondo, el borde y el glifo. Resulta más fácil trabajar con imágenes personalizadas y ahora también puedes crear marcadores personalizados con HTML y CSS. Obtén más información sobre todo lo que puedes hacer con los marcadores avanzados: