Make markers draggable
AI-generated Key Takeaways
This example demonstrates creating a draggable marker on a Google Map using the Maps JavaScript API.
The marker's position updates and is displayed in an info window when the drag action ends.
The sample code utilizes the
AdvancedMarkerElementand provides implementations in both JavaScript and TypeScript.Users can interact with a live version of the map or clone the sample code to run it locally.
This example map shows a draggable marker that displays its updated positionwhen dragging is finished (thedragend event is fired).
Read thedocumentation.
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();
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();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */gmp-map{height:100%;}/* * Optional: Makes the sample page fill the window. */html,body{height:100%;margin:0;padding:0;}
HTML
<html> <head> <title>Draggable Advanced Marker</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script> </head> <body> <gmp-map center="37.39094933041195,-122.02503913145092" zoom="14" map-id="4504f8b37365c3d0"></gmp-map> </body></html>Try Sample
Clone Sample
Git and Node.js are required to run this sample locally. Follow theseinstructionsto install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
gitclonehttps://github.com/googlemaps-samples/js-api-samples.gitcdsamples/advanced-markers-draggablenpminpmstart
Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-11-21 UTC.