Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share your input on your UI Kit experience.

Make markers draggable

Spark icon

Page Summary

Enable draggable markers on Google Maps by setting the AdvancedMarkerElement.gmpDraggable property to true, allowing users to reposition them using the mouse or arrow keys.
Keyboard navigation enables marker dragging by focusing, selecting, and moving with arrow keys, using modifier keys (Option/Alt + Space/Enter) to activate dragging and Space/Enter or Esc to drop or cancel.
Upon releasing a dragged marker (dragend event), its updated position can be displayed using an InfoWindow.
Set descriptive text for screen readers and mouse hover using the AdvancedMarkerElement.title attribute when creating a marker.

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 dragend event is fired):

[フレーム]

To drag a marker with the keyboard:

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

See the code

TypeScript

constmapElement=document.querySelector('gmp-map')asgoogle.maps.MapElement;
asyncfunctioninitMap(){
// Request needed libraries.
const{Map,InfoWindow}=(awaitgoogle.maps.importLibrary(
'maps'
))asgoogle.maps.MapsLibrary;
const{AdvancedMarkerElement}=(awaitgoogle.maps.importLibrary(
'marker'
))asgoogle.maps.MarkerLibrary;
constinfoWindow=newInfoWindow();
constdraggableMarker=newAdvancedMarkerElement({
position:{lat:37.39094933041195,lng:-122.02503913145092},
gmpDraggable:true,
title:'This marker is draggable.',
});
mapElement.append(draggableMarker);
draggableMarker.addListener('dragend',(event)=>{
constposition=draggableMarker.positionasgoogle.maps.LatLng;
infoWindow.close();
infoWindow.setContent(
`Pin dropped at: ${position.lat}, ${position.lng}`
);
infoWindow.open(draggableMarker.map,draggableMarker);
});
}
initMap();index.ts

JavaScript

constmapElement=document.querySelector('gmp-map');
asyncfunctioninitMap(){
// Request needed libraries.
const{Map,InfoWindow}=(awaitgoogle.maps.importLibrary('maps'));
const{AdvancedMarkerElement}=(awaitgoogle.maps.importLibrary('marker'));
constinfoWindow=newInfoWindow();
constdraggableMarker=newAdvancedMarkerElement({
position:{lat:37.39094933041195,lng:-122.02503913145092},
gmpDraggable:true,
title:'This marker is draggable.',
});
mapElement.append(draggableMarker);
draggableMarker.addListener('dragend',(event)=>{
constposition=draggableMarker.position;
infoWindow.close();
infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`);
infoWindow.open(draggableMarker.map,draggableMarker);
});
}
initMap();index.js

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:

constmarkerView=newgoogle.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.