When draggability is enabled, users can drag markers on the map using the mouse
or the arrow keys. To make a marker draggable, set the `AdvancedMarkerElement.gmpDraggable`
property to `true`.

The following example map shows a draggable marker that displays its updated
position when dragging is finished (the `gmp-dragend` event is fired):


<iframe src="https://maps-docs-team.web.app/samples/advanced-markers-draggable/dist/" allow="fullscreen; fullscreen"></iframe>

#### To drag a marker with the keyboard:

1. Press the tab key until markers are focused.
2. Use the arrow key to move to the desired marker.
3. To activate dragging, press **Option + Space** or **Option + Enter** (Mac), **Alt + Space** or **Alt + Enter** (Windows).
4. Use the arrow keys to move the marker.
5. To drop the marker at its new location, press **Space** or **Enter**. This will also turn dragging off.
6. To turn dragging off and return the marker to its previous position, press **Esc**.

### See the code


### TypeScript

```typescript
const mapElement = document.querySelector('gmp-map')!;

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
    ]);

    const infoWindow = new InfoWindow();

    const draggableMarker = new AdvancedMarkerElement({
        position: { lat: 37.39094933041195, lng: -122.02503913145092 },
        gmpDraggable: true,
        title: 'This marker is draggable.',
    });
    mapElement.append(draggableMarker);

    draggableMarker.addEventListener('gmp-dragend', () => {
        const position = draggableMarker.position as google.maps.LatLngAltitude;
        infoWindow.close();
        infoWindow.setContent(
            `Pin dropped at: ${String(position.lat)}, ${String(position.lng)}`
        );
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}

void init();
```

### JavaScript

```javascript
const mapElement = document.querySelector('gmp-map');

async function init() {
    // Request needed libraries.
    const [{ InfoWindow }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
    ]);

    const infoWindow = new InfoWindow();

    const draggableMarker = new AdvancedMarkerElement({
        position: { lat: 37.39094933041195, lng: -122.02503913145092 },
        gmpDraggable: true,
        title: 'This marker is draggable.',
    });
    mapElement.append(draggableMarker);

    draggableMarker.addEventListener('gmp-dragend', () => {
        const position = draggableMarker.position;
        infoWindow.close();
        infoWindow.setContent(
            `Pin dropped at: ${String(position.lat)}, ${String(position.lng)}`
        );
        infoWindow.open(draggableMarker.map, draggableMarker);
    });
}

void init();
```

<br />

## Set descriptive text

To set descriptive text for a marker, which can be read by screen readers, use
the `AdvancedMarkerElement.title` attribute, as shown here:

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

When the `title` attribute is set, the text is visible to screen readers, and
will appear when the mouse hovers over the marker.