Google Maps V3, get point

get point of map when click and drag

by grant

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;signed_in=true"></script>

<input id="position" name="position" size="60"><br><br>

	<div id="panel">
		<button type="button" class="btn btn-default" aria-label="Left Align" onclick="deleteMarkers();">
			Eliminar <span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span>
		</button>
		</div>
	<div id="map-canvas"></div>

CSS

#map-canvas {
		height: 250px;
		margin: 0px;
		padding: 0px
	}
	#panel {
		position: absolute;

		z-index: 5;
		padding: 10px;
}

JavaScript

// In the following example, markers appear when the user clicks on the map.
	// The markers are stored in an array.
	// The user can then click an option to hide, show or delete the markers.

	$(window).ready(function(){
		$('#position').val('0,0,0');
	});


	var map;
	var markers = [];

	function initialize() {
		var initialPoint = new google.maps.LatLng(32.363733054623076,-117.0545186444275);
		var mapOptions = {
			zoom: 15,
			center: initialPoint,
			mapTypeId: google.maps.MapTypeId.HYBRID
		};
		map = new google.maps.Map(document.getElementById('map-canvas'),
			mapOptions);

		// This event listener will call addMarker() when the map is clicked.
		google.maps.event.addListener(map, 'click', function(event) {
			addMarker(event.latLng);

			//get data of point to form
			//marker = new google.maps.Marker({position: event.latLng, map: map});

			saveData(map, event);
		});



		// Adds a marker at the center of the map.
	//	addMarker(initialPoint);
	}

	function saveData(map, event)
	{
		var zoomLevel = map.getZoom();
		var pos = (event.latLng).toString();

		pos = pos.replace('(','');
		pos = pos.replace(')','');
		pos = pos.replace(' ','');

		$('#position').val('(zoom,lat,lng) = '+zoomLevel+','+pos);
	}

	// Add a marker to the map and push to the array.
	function addMarker(location) {
		clearMarkers();
		var marker = new google.maps.Marker({
			position: location,
			map: map,
			draggable:true
		});

		google.maps.event.addListener(marker, 'dragend', function (event) {
			//$('#position').val('* '+this.getPosition().lat()+','+this.getPosition().lng());
			saveData(map,event);
		});

		markers.push(marker);
	}

	// Sets the map on all markers in the array.
	function setAllMap(map) {
		for (var i = 0; i < markers.length; i++) {
			markers[i].setMap(map);
		}
	}

	// Removes the markers from the map, but keeps them in the array.
	function clearMarkers() {
		setAllMap(null);
	}

	// Shows any markers currently in the array.
	function showMarkers()...