Let's use following HTML:
<html>
...
<head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" ></script>
<script type="text/javascript">
var map;
var mapCenter;
var marker;
function handleError(error) {
alert('Error: ' + error.message + ' (' + error.code + ')');
}
function locationFound(position) {
// Center map on your location ...
mapCenter = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
map.setCenter(mapCenter);
// ... add new marker at map's center ...
marker = new google.maps.Marker(
{ position: mapCenter,
map: map, title: "Your position" });
}
$(document).ready(
function() {
// Create new Google Map using the div having id 'map' ...
map = new google.maps.Map($('#map')[0],
{ zoom: 14,
mapTypeId: google.maps.MapTypeId.TERRAIN });
// ... check if your browser supports W3C Geolocation API ...
if (navigator.geolocation) {
// ... ask for current position ...
navigator.geolocation.getCurrentPosition(locationFound,
handleError);
} else {
alert("Geolocation not available");
}
});
</script>
...
</head>
<body>
<div id="map" style="width: 640px; height: 480px;"></div>
</body>
</html>
I started with Google Chrome and when the above code has loaded in it, it asked first:
With trembling heart I pressed "Allow", and after few moments, I saw the desired position on map:
Don't ask me how they are able to track me down ;) - I can see some possibilities: black magic, IP number tracking, some hidden cameras, or electronic bugs in my apartment ;) - to discard the last possibility, I took my iPhone and went out for the stroll - and guess what ;) - when I opened the above page, iPhone asked me if I want to reveal my current position to the mobile Safari, and when I confirmed, showed me similar map view to the above ...
Some links for the dessert:
Which Devices Support Javascript Geolocation via navigator.geolocation?
How to Use iPhone JavaScript Geolocation
How to use the W3C Geolocation API (Opera)
Using geolocation (Firefox)
No comments:
Post a Comment