Comenzar

Sigue estos pasos para configurar la vista previa de Marcadores avanzados.

Obtén una clave de API y habilita la API de Maps JavaScript

Antes de usar la versión preliminar de Marcadores avanzados, debes tener un proyecto de Cloud con una cuenta de facturación y la API de Maps JavaScript habilitada. Para obtener más información, consulta Configura tu proyecto de Google Cloud.

Obtén una clave de API.

Crea un ID de mapa

Para crear un ID de mapa nuevo, sigue los pasos que se indican en Personalización de Cloud. Configura el tipo de mapa como JavaScript y selecciona las opciones Vector o Trama.

Crea un ID de mapa de vectores

Actualiza el código de inicialización del mapa

Para realizar esta acción, necesitas el ID de mapa que acabas de crear. Puedes encontrarlo en la página Administración de mapas.

  1. Usa v=beta y libraries=marker en tu etiqueta de API script. Por ejemplo:

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=marker&callback=initMap"></script>
  2. Cuando crees una instancia del mapa con la propiedad mapId, proporciona un ID de mapa. Puedes proporcionar un ID de mapa propio o utilizar DEMO_MAP_ID.

    const map = new
    google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8,
      mapId: 'YOUR_MAP_ID'
    });

Verifica las funciones del mapa (opcional)

Advanced Markers requiere un ID de mapa. Si no pasas un ID de mapa o pasas uno no válido, Advanced Markers no podrá cargarse. Para solucionar este problema, puedes agregar un objeto de escucha mapcapabilities_changed a fin de suscribirte a los cambios de las funcionalidades del mapa. Esto indicará si se cumplieron las siguientes condiciones:

  • Se estás usando un ID de mapa válido.
  • Si el ID de mapa está asociado a un mapa de vectores, en caso de que se usen elementos que requieran mapas de este tipo.

Usar las funciones del mapa es opcional y se recomienda únicamente para realizar pruebas y solucionar problemas, o bien para fines de resguardo durante el tiempo de ejecución.

// Optional: subscribe to map capability changes.
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (!mapCapabilities.isAdvancedMarkersAvailable) {
    // Advanced markers are *not* available, add a fallback.
  }
});

Próximos pasos

Cómo crear un marcador Advanced Markers predeterminado