Drag and Drop Markers in Google Maps using JavaScript

The Google Maps is populated using an array consisting of some locations. In order to make the markers draggable, you will need to set the draggable property to ... Home Categories Questions InterviewQuestions Contact Search Search Home Categories Questions InterviewQuestions Contact Search 18Aug2014   MudassarKhan 2 Comments 39278 Views Google HereMudassarAhmedKhanhasexplainedhowtomakethemarkersDraggableinGoogleMapsV3withexamplei.e.howtodraganddropmarkersinGoogleMapsusingJavaScript.Inadditionaltothedragdropfunctionality,hehasalsoexplainedhowtogetthelocationdetailsi.e.Latitude,LongitudeandAddresswhenthemarkerisdroppedusingthemarkerdragendevent. Download ViewDemo DownloadFreeWord/PDF/ExcelAPI DownloadFreeWord/PDF/ExcelAPI InthisarticleIwillexplainhowtomakethemarkersDraggableinGoogleMapsV3withexamplei.e.howtodraganddropmarkersinGoogleMapsusingJavaScript. Inadditionaltothedragdropfunctionality,Iwillalsoexplainhowtogetthelocationdetailsi.e.Latitude,LongitudeandAddresswhenthemarkerisdroppedusingthemarkerdragendevent.   DragandDropMarkersinGoogleMapsusingJavaScript TheGoogleMapsispopulatedusinganarrayconsistingofsomelocations.Inordertomakethemarkersdraggable,youwillneedtosetthedraggablepropertytotruewheninitializingtheGoogleMapmarkerobject. Nowifyouneedtocapturethegeographicaldetailsofthelocationwherethemarkerisdropped,youneedtoimplementdragendeventhandlerofthemarkerwhichisinvokedoncethemarkerisdroppedatsomeplaceonthemap. Insidethedragendeventhandler,youcaneasilygettheLatitudeandLongitudeofthelocationandifyouwishtoextendfurther,youcanmakeuseoftheGoogleMapsGeoLocationAPIandusingtheLatitudeandLongitudeofthelocationyoucaneasilyfinditsAddress. Note:FormoredetailsontheGoogleMapsGeoLocationAPI,pleaserefermyarticleGoogleMapsGeoLocationAPIExample.      varmarkers=[        {            "title":'Alibaug',            "lat":'18.641400',            "lng":'72.872200',            "description":'AlibaugisacoastaltownandamunicipalcouncilinRaigadDistrictintheKonkanregionofMaharashtra,India.'        },        {            "title":'Lonavla',            "lat":'18.750000',            "lng":'73.416700',            "description":'Lonavla'        },        {            "title":'Mumbai',            "lat":'18.964700',            "lng":'72.825800',            "description":'MumbaiformerlyBombay,isthecapitalcityoftheIndianstateofMaharashtra.'        },        {            "title":'Pune',            "lat":'18.523600',            "lng":'73.847800',            "description":'PuneistheseventhlargestmetropolisinIndia,thesecondlargestinthestateofMaharashtraafterMumbai.'        },        {            "title":'Thane',            "lat":'19.182800',            "lng":'72.961200',            "description":'Thane'        },        {            "title":'Vashi',            "lat":'18.750000',            "lng":'73.033300',            "description":'Vashi'        }    ];    window.onload=function(){        varmapOptions={            center:newgoogle.maps.LatLng(markers[0].lat,markers[0].lng),            zoom:8,            mapTypeId:google.maps.MapTypeId.ROADMAP        };        varinfoWindow=newgoogle.maps.InfoWindow();        varlatlngbounds=newgoogle.maps.LatLngBounds();        vargeocoder=geocoder=newgoogle.maps.Geocoder();        varmap=newgoogle.maps.Map(document.getElementById("dvMap"),mapOptions);        for(vari=0;i     Demo ViewDemo     Downloads GoogleMaps_DraggableMarkers.zip DownloadFreeWord/PDF/ExcelAPI RelatedArticles Previous Next Nocommentshavebeenaddedtothisarticle. AddComments Thankyouforthefeedback.Thecommentisnowawaitingmoderation.Youwillbenotifiedviaemailwhentheauthorrepliestoyourcomment. Pleaseselectacommenttoreply Youcanaddyourcommentaboutthisarticleusingtheformbelow.Makesureyouprovideavalidemailaddresselseyouwon'tbenotifiedwhentheauthorrepliestoyourcommentPleasenotethatallcommentsaremoderatedandwillbedeletediftheyareNotrelavanttothearticleSpamAdvertisingcampaignsorlinkstoothersitesAbusivecontent.Pleasedonotpostcode,scriptsorsnippets. Name Email Comment   Securitycode: Invalidsecuritycode. Ideclare,Iacceptthesite's PrivacyPolicy.   AddComment OurSupportTeamisheretohelp. AskQuestion Disclaimer:ThecodesamplesandAPIavailableatwww.aspsnippets.comareavailableabsolutelyfree. Youarefreetouseitforcommercialaswellasnon-commercialuseatyourownrisk,butyoucannotuseitforpostingonblogsorothertutorialwebsitessimilartowww.aspsnippets.comwithoutgivingreferencelinktotheoriginalarticle. AllthecodesamplesandAPIprovidedbytheauthorsaresolelytheircreationandneithertheauthornorthesiteareresponsibleifitdoesnotworkasintended. Iagreetotheaboveterms. Download Required ViewDemo Whatourreaderssay Previous Next © 2022 www.aspsnippets.com Allrightsreserved|PrivacyPolicy |PoweredbyExcelasoftSolutions ThissitemakesuseofCookies.PleasereferPrivacyPolicyformoredetails. Gotit