code.youlikeshare.com

This sample code get the latitude and longitude using HTML5 technology and display on Google map. Note: The user must click on the "Share Location" button for the website to access the HTML5 geolocation information.

Source Code
<html>
<head>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<script>
	$(document).ready(function(){
		/////////////////////
		//google map
		var map;
		function showGoogleMap(latitude, longitude) {
		  var myLatlng = new google.maps.LatLng(latitude, longitude);
		  
		  var mapOptions = {
			zoom: 10,
			center: myLatlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		  };
		  
		  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
		  
		  var contentString = '<div style="width:250px; height:30px; padding:10px; text-align:center;">(' + latitude + ',' + longitude + ')</div>';

		  var infowindow = new google.maps.InfoWindow({
			  content: contentString
		  });

		  //Show the marker
		  var marker = new google.maps.Marker({
			  position: myLatlng,
			  map: map,
			  title: ''
		  });
		  
		  //Show the info window
		  infowindow.open(map,marker);
		}
		
		//////////////////////////
		// HTML5 Location
		if (navigator.geolocation){
			navigator.geolocation.getCurrentPosition(showPosition);
		}
		
		function showPosition(position){
			//Show the position on google map
			//x.innerHTML="Latitude: " + position.coords.latitude +  "<br>Longitude: " + position.coords.longitude;	
			showGoogleMap(position.coords.latitude, position.coords.longitude);
		}
	});
	</script>
</head>
<body>
	<div id="map-canvas" style="width:100%; height:400px;">
	</div>
</body>
</html>