AI-generated Key Takeaways
-
Enable draggable markers on Google Maps by setting the
AdvancedMarkerElement.gmpDraggableproperty totrue, 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 (
dragendevent), its updated position can be displayed using an InfoWindow. -
Set descriptive text for screen readers and mouse hover using the
AdvancedMarkerElement.titleattribute 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 + Spaceor Option + Enter(Mac), Alt + Spaceor Alt + Enter(Windows).
- Use the arrow keys to move the marker.
- To drop the marker at its new location, press Spaceor 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
const mapElement = document . querySelector ( 'gmp-map' ) as google . maps . MapElement ; 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 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 . 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 ();
JavaScript
const mapElement = document . querySelector ( 'gmp-map' ); async function initMap () { // Request needed libraries. const { Map , InfoWindow } = await google . maps . importLibrary ( "maps" ); const { AdvancedMarkerElement } = await 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 . addListener ( 'dragend' , ( event ) = > { const position = draggableMarker . position ; infoWindow . close (); infoWindow . setContent ( `Pin dropped at: ${ position . lat } , ${ position . lng } ` ); infoWindow . open ( draggableMarker . map , draggableMarker ); }); } initMap ();
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:
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.
