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 position
when dragging is finished (the dragend
event is fired).
Read the documentation .
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 ();
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 these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
git clone https : //github.com/googlemaps-samples/js-api-samples.gitcd samples / advanced - markers - draggablenpm inpm start
