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.
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.
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.
Usa
v=beta
ylibraries=marker
en tu etiqueta de APIscript
. Por ejemplo:<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=marker&callback=initMap"></script>
Cuando crees una instancia del mapa con la propiedad
mapId
, proporciona un ID de mapa. Puedes proporcionar un ID de mapa propio o utilizarDEMO_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. } });