Google map - Drag and Drop marker to get latitude and longitude ?

Google map - Drag and Drop marker to get latitude and longitude 

Draggable google map marker

To see the output  

  • copy paste the below code in a text file.
  • save the file as .html format .
  • open it on the browser. 
<!--dynamicc_map.htm file-->
<html>
	<head>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript" >
		
// Map Initialize function
function initialize() 
{
	// Set static latitude, longitude value
	var latlng = new google.maps.LatLng(37.7699298, -122.4469157);
	// Set map options
	var myOptions = {
		zoom: 16,
		center: latlng,
		panControl: true,
		zoomControl: true,
		scaleControl: true,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	// Create map object with options
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	// Create and set the marker
	marker = new google.maps.Marker({
		map: map,
		draggable:true,	
		position: latlng
	});
	
	// Register Custom "dragend" Event
	google.maps.event.addListener(marker, 'dragend', function() {
		
		// Get the Current position, where the pointer was dropped
		var point = marker.getPosition();
		// Center the map at given point
		map.panTo(point);
		// Update the textbox
		document.getElementById('txt_latlng').value=point.lat()+", "+point.lng();
	});
}
		
		</script>
	</head>
	<body onload="initialize();">
		Latitude, Longitude <input type="text" value="37.7699298, -122.4469157" name="txt_latlng" id="txt_latlng" style="width:480px;">
		<div id="map_canvas" style="width:600px;height:400px;border:solid black 1px;"></div>
	</body>
</html>