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 correspondiente para importar la biblioteca del marcador. Ten en cuenta que la versión anterior de los marcadores (google.maps.Marker) no incluye este requisito.
  2. Cambia google.maps.Marker a google.maps.marker.AdvancedMarkerElement.
  3. Agrega un ID de mapa a tu código de inicialización del mapa. Por ejemplo: mapId: 'DEMO_MAP_ID'. Puedes usar "DEMO_MAP_ID" si 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 carga de secuencia de comandos dinámica, 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

  // 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,
    mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
  });

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

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: