Google Maps V3, get point

get point of map when click and drag

by Ruben Ruiz Perez

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
	// 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()...

CSS

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

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