Google Maps API - Draggable Marker - NoskeWiki

NOTE: This page is a daughter page of: Google Maps API. This piece of code allows you drag around a single marker on the map. GoogleMapsAPI-DraggableMarker FromNoskeWiki Jumptonavigation Jumptosearch Markeryoucandrag. Contents 1About 2DraggableMarker 3SeeAlso 4Links About NOTE:Thispageisadaughterpageof:GoogleMapsAPI Thispieceofcodeallowsyoudragaroundasinglemarkeronthemap.Noticethereisasinglelistener,andfunctionstodealwithwhenthedraggingstarts,endsandisunderway. DraggableMarker draggable_marker.js /* *@fileoverviewSetsupmapwithasinglemarkerwhichcanbe *draggedaroundthemapandreportit'slat,lng. */ /* *Changes'marker-state'divtoshowtext. *@param:strStringtowrite. */ functionupdateMarkerStateTxt(str){ document.getElementById('marker-state').innerHTML=str; } /* *Updatethepositionofour'marker-position'marker. *@param:latLngMapsLatLngobject. */ functionupdateMarkerPositionTxt(latLng){ document.getElementById('marker-position').innerHTML= String(latLng.lat())+','+String(latLng.lng()); } /* *SetsupGooglemapinto'map-canvas'divandaddsthe *thestartingmarkerandadraglistener. */ functioninitialize(){ varlatLng=newgoogle.maps.LatLng(37.2434151284,-122.031447712); varmap=newgoogle.maps.Map(document.getElementById('map-canvas'),{ zoom:15, center:latLng, mapTypeId:google.maps.MapTypeId.ROADMAP }); varmarker=newgoogle.maps.Marker({ position:latLng, title:'DraggableMarker', map:map, draggable:true }); //Updatemarkerpositiontxt. updateMarkerPositionTxt(latLng); //Adddraggingeventlisteners. google.maps.event.addListener(marker,'dragstart',function(){ updateMarkerStateTxt('Draggingstart...'); }); google.maps.event.addListener(marker,'drag',function(){ updateMarkerStateTxt('Dragging...'); updateMarkerPositionTxt(marker.getPosition()); }); google.maps.event.addListener(marker,'dragend',function(){ updateMarkerStateTxt('Dragended'); }); } //Onloadhandlertofireofftheapp: google.maps.event.addDomListener(window,'load',initialize); draggable_marker.html