Haz que los marcadores sean arrastrables

Cuando la función de arrastre se encuentra habilitada, los usuarios pueden arrastrar marcadores en el mapa con el mouse o las teclas de flecha. Si deseas configurar un marcador para que sea arrastrable, establece la propiedad AdvancedMarkerElement.gmpDraggable en true.

En el siguiente ejemplo, aparece un marcador arrastrable que muestra su posición actualizada cuando finaliza el arrastre (se activa el evento dragend):

Para arrastrar un marcador con el teclado, haz lo siguiente:

  1. Presiona la tecla Tab hasta enfocarte en los marcadores.
  2. Usa la tecla de flecha para desplazarte al marcador que deseas arrastrar.
  3. Para activar el arrastre, presiona Opción + Espacio o bien Opción + Intro (Mac), o Alt + Espacioo Alt + Intro (Windows).
  4. Usa las teclas de flecha para mover el marcador.
  5. Para colocar el marcador en una ubicación nueva, presiona la barra espaciadora o Intro. Esta acción también desactivará la función de arrastre.
  6. Para desactivar la función de arrastre y devolver el marcador a su posición anterior, presiona Esc.

Consulta el código

TypeScript

async function initMap() {
    // Request needed libraries.
    const { Map, InfoWindow } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

    const map = new Map(document.getElementById('map') as HTMLElement, {
        center: {lat: 37.39094933041195, lng: -122.02503913145092},
        zoom: 14,
        mapId: '4504f8b37365c3d0',
    });

    const infoWindow = new InfoWindow();

    const draggableMarker = new AdvancedMarkerElement({
        map,
        position: {lat: 37.39094933041195, lng: -122.02503913145092},
        gmpDraggable: true,
        title: "This marker is draggable.",
    });
    draggableMarker.addListener('dragend', (event) => {
        const position = draggableMarker.position as google.maps.LatLng;
        infoWindow.close();
        infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`);
        infoWindow.open(draggableMarker.map, draggableMarker);
    });

}

initMap();
index.ts

JavaScript

async function initMap() {
    // Request needed libraries.
    const { Map, InfoWindow } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    const map = new Map(document.getElementById('map'), {
        center: { lat: 37.39094933041195, lng: -122.02503913145092 },
        zoom: 14,
        mapId: '4504f8b37365c3d0',
    });
    const infoWindow = new InfoWindow();
    const draggableMarker = new AdvancedMarkerElement({
        map,
        position: { lat: 37.39094933041195, lng: -122.02503913145092 },
        gmpDraggable: true,
        title: "This marker is draggable.",
    });
    draggableMarker.addListener('dragend', (event) => {
        const position = draggableMarker.position;
        infoWindow.close();
        infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`);
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}
initMap();
index.js

Establece texto descriptivo

Si deseas establecer texto descriptivo para un marcador de modo que sea visible para los lectores de pantalla, usa el atributo AdvancedMarkerElement.title, como se muestra a continuación:

    const markerView = new google.maps.marker.AdvancedMarkerElement({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
        title: "Some descriptive text.",
    });

Cuando se configura el atributo title, el texto se vuelve visible para los lectores de pantalla y aparece cuando el cursor se coloca sobre el marcador.