location detection in web browser
I am searching for a method to locate the user location while visiting my website, i have tried Maxmind but they seems to be inaccurate in the city level. the information i want is (Country, City, longitude, latitude) i want the country and the city to be very accurate if possible.
I have also used HTML5 but the problem that it asks my user to share location information which seems to me bad solution. (althougth i got very accurate results)
Any solutions?
Notice: i found google search got an accurate detection and without "ask for sharing my location", but i didn't find any api to use google service
Answer
This is a code i found for a tutorial for Geo Location using Google maps.. Hope this is useful.
This works on the way you connect to the network.
- if you use a Boradband ISP what gives you an fixed ip your location will be more accurate.
- if you use mobile device to connect to internet, the Location of the nearest Mobile tower from which your network gets the signal will be shown
Example for HTML5 Geolocation
<!DOCTYPE html>
<html>
<head>
<title>GeoLocation Demo</title>
<meta charset="utf-8"/>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script>
var startPos;
var map;
function init() {
if (navigator.geolocation) {
document.getElementById("support").innerHTML = "<p style='color:green'>Great! This browser supports HTML5 Geolocation</p>";
navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, {
timeout: 50000
});
//navigator.geolocation.watchPosition(updateCurrPosition,handleLocationError);
} else {
document.getElementById("support").innerHTML = "<p style='color:red'>Oops! This browser does not support HTML5 Geolocation</p>";
}
}
function updateLocation(position) {
startPos = position;
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
//document.getElementById("startLat").innerHTML = latitude;
//document.getElementById("startLon").innerHTML = longitude;
var coords = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 10,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Your current location!"
});
}
function handleLocationError(error) {
switch (error.code) {
case 0:
updateStatus("There was an error while retrieving your location: " + error.message);
break;
case 1:
updateStatus("The user prevented this page from retrieving the location.");
break;
case 2:
updateStatus("The browser was unable to determine your location: " + error.message);
break;
case 3:
updateStatus("The browser timed out before retrieving the location.");
break;
}
}
function updateStatus(msg) {
document.getElementById("divStatus").innerHTML = msg;
}
</script>
</head>
<body onload="init()">
<div id="support"></div>
<div id="divStatus"></div>
<div id="map_canvas" style="width:600px;height:400px;"></div>
</body>
</html>