Html Code: Geo Location

By this code, you can see your location in the google map. It uses GPS or wifi to find the location of user and show map by google api.
It is written by html and javascript. No additional resource is needed.

<!-- this script got from www.htmlbestcodes.com-Coded by: Krishna Eydat -->
<!DOCTYPE html>
<html>
<head>
   <link href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet" type="text/css"/> 
   <style type="text/css">
#map {
	border:3px solid #666;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
			
#map	.unselected .gs-result .gs-title, .gs-result .gs-title * {
    color: #666666;
    font-weight: bold;
    text-decoration: underline;
}

#searchwell.unselected .gs-result .gs-title, .gs-result .gs-title * {
    color: #ffffff;
    font-weight: bold;
    text-decoration: underline;
}

select {
	background-color:#000;
	border:3px solid #666;
	padding:5px 0;
	-moz-border-radius: 4px;
	border-radius: 4px;
	font-size:14px;
	color:#FFF;
	font-weight:bold;
	width:600px;
}
</style>
</head>

<body>
    <section id="main">
     <div id="map" style="height: 350px; width:600px; border: 1px solid #979797; margin:10px 0;"></div> 
       </section>
	<br/><font face="Tahoma"><a target="_blank" href="http://www.htmlbestcodes.com/"><span style="font-size: 8pt; text-decoration: none">HTML Best Codes</span></a></font>
</body>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript"> 
 
    // Our global state
    var gMap;

     // Use feature detection on load to test whether the browser is compatitble
    window.onload = function() {
				if (navigator.geolocation) {
						navigator.geolocation.getCurrentPosition(handle_geo); 
					} else {
						var map = document.getElementById("map");
						map.innerHTML = "Geolocation is not available... have you considered a forward-thinking browser?";
					}	
			};
			
			function handle_geo(position){ 
				// Initialize the map with default UI.
					gMap = new google.maps.Map(document.getElementById("map"), {
					center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
					zoom: 15,
					mapTypeId: 'roadmap'
				});
			
			var myLatlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
			var marker = new google.maps.Marker({
      position: myLatlng, 
      map: gMap, 
      title:"You are here!"
 			 });
    }
    </script>  
</html>

If you don't know how to use this code or need more information Click here!

Compatible browsers:

Html Best Codes

Html Code: Geo Location

Review

Links