Geo Location
Written by 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 https://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='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Online Users:
12
Recent Members:
Muzamiru, TheDewalt, sahjahan, fk khan, Proper
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!