Stay organized with collectionsSave and categorize content based on your preferences.
When draggability is enabled, users can drag markers on the map using the mouse
or the arrow keys. To make a marker draggable, set theAdvancedMarkerElement.gmpDraggableproperty totrue.
The following example map shows a draggable marker that displays its updated
position when dragging is finished (thedragendevent is fired):
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-09-04 UTC."],[[["\u003cp\u003eEnable draggable markers on Google Maps by setting the \u003ccode\u003eAdvancedMarkerElement.gmpDraggable\u003c/code\u003e property to \u003ccode\u003etrue\u003c/code\u003e, allowing users to reposition them using the mouse or arrow keys.\u003c/p\u003e\n"],["\u003cp\u003eKeyboard 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.\u003c/p\u003e\n"],["\u003cp\u003eUpon releasing a dragged marker (\u003ccode\u003edragend\u003c/code\u003e event), its updated position can be displayed using an InfoWindow.\u003c/p\u003e\n"],["\u003cp\u003eSet descriptive text for screen readers and mouse hover using the \u003ccode\u003eAdvancedMarkerElement.title\u003c/code\u003e attribute when creating a marker.\u003c/p\u003e\n"]]],["Draggable markers on a map are enabled by setting `AdvancedMarkerElement.gmpDraggable` to `true`. Users can drag markers with the mouse or arrow keys. Keyboard dragging involves tabbing to the marker, activating drag mode with specific key combinations (Option/Alt + Space/Enter), moving with arrow keys, and confirming the new location with Space/Enter or canceling with Esc. The `dragend` event updates and displays the marker's new position. The descriptive text is set by the `AdvancedMarkerElement.title` attribute.\n"],null,["When draggability is enabled, users can drag markers on the map using the mouse\nor the arrow keys. To make a marker draggable, set the `AdvancedMarkerElement.gmpDraggable`\nproperty to `true`.\n\nThe following example map shows a draggable marker that displays its updated\nposition when dragging is finished (the `dragend` event is fired):\n\n\nTo drag a marker with the keyboard:\n\n1. Press the tab key until markers are focused.\n2. Use the arrow key to move to the desired marker.\n3. To activate dragging, press **Option + Space** or **Option + Enter** (Mac), **Alt + Space** or **Alt + Enter** (Windows).\n4. Use the arrow keys to move the marker.\n5. To drop the marker at its new location, press **Space** or **Enter**. This will also turn dragging off.\n6. To turn dragging off and return the marker to its previous position, press **Esc**.\n\nSee the code\n\n\nTypeScript \n\n```typescript\nasync function initMap() {\n // Request needed libraries.\n const { Map, InfoWindow } = await google.maps.importLibrary(\"maps\") as google.maps.MapsLibrary;\n const { AdvancedMarkerElement } = await google.maps.importLibrary(\"marker\") as google.maps.MarkerLibrary;\n\n const map = new Map(document.getElementById('map') as HTMLElement, {\n center: {lat: 37.39094933041195, lng: -122.02503913145092},\n zoom: 14,\n mapId: '4504f8b37365c3d0',\n });\n\n const infoWindow = new InfoWindow();\n\n const draggableMarker = new AdvancedMarkerElement({\n map,\n position: {lat: 37.39094933041195, lng: -122.02503913145092},\n gmpDraggable: true,\n title: \"This marker is draggable.\",\n });\n draggableMarker.addListener('dragend', (event) =\u003e {\n const position = draggableMarker.position as google.maps.LatLng;\n infoWindow.close();\n infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`);\n infoWindow.open(draggableMarker.map, draggableMarker);\n });\n\n}\n\ninitMap();https://github.com/googlemaps-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/dist/samples/advanced-markers-draggable/docs/index.ts#L8-L38\n```\n| **Note:** Read the [guide](/maps/documentation/javascript/using-typescript) on using TypeScript and Google Maps.\n\nJavaScript \n\n```javascript\nasync function initMap() {\n // Request needed libraries.\n const { Map, InfoWindow } = await google.maps.importLibrary(\"maps\");\n const { AdvancedMarkerElement } = await google.maps.importLibrary(\"marker\");\n const map = new Map(document.getElementById('map'), {\n center: { lat: 37.39094933041195, lng: -122.02503913145092 },\n zoom: 14,\n mapId: '4504f8b37365c3d0',\n });\n const infoWindow = new InfoWindow();\n const draggableMarker = new AdvancedMarkerElement({\n map,\n position: { lat: 37.39094933041195, lng: -122.02503913145092 },\n gmpDraggable: true,\n title: \"This marker is draggable.\",\n });\n draggableMarker.addListener('dragend', (event) =\u003e {\n const position = draggableMarker.position;\n infoWindow.close();\n infoWindow.setContent(`Pin dropped at: ${position.lat}, ${position.lng}`);\n infoWindow.open(draggableMarker.map, draggableMarker);\n });\n}\ninitMap();https://github.com/googlemaps-samples/js-api-samples/blob/7a62b25fe463fc0fd06949fcd1029aecc8b8504b/dist/samples/advanced-markers-draggable/docs/index.js#L8-L33\n```\n\n\u003cbr /\u003e\n\nSet descriptive text\n\nTo set descriptive text for a marker, which can be read by screen readers, use\nthe `AdvancedMarkerElement.title` attribute, as shown here: \n\n const markerView = new google.maps.marker.AdvancedMarkerElement({\n map,\n position: { lat: 37.4239163, lng: -122.0947209 },\n title: \"Some descriptive text.\",\n });\n\nWhen the `title` attribute is set, the text is visible to screen readers, and\nwill appear when the mouse hovers over the marker."]]
