Geo Location

Written by @kerixa 22 February 2014

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.

Code Snippet:

                                                
                                                <!-- this script is provided by www.htmlbestcodes.com coded by: Kerixa Inc. -->
<!-- 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> 

<a target='_blank' href='www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>                                                
                                            

Example:


About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

K
TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: Nikhil 999+, bishalthakur
advertisement 2