I am trying to get the users geolocation via the html5 geolcation api, and i use the following snippet for it:
if (navigator.geolocation) {
var timeoutVal = 10 * 1000 * 1000;
navigator.geolocation.getCurrentPosition(
displayPosition,
displayError,
{ enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 }
);
}
else {
// DO SOME STUFF HERE
}
function displayPosition(position) {
// configuration
var myZoom = 12;
var myMarkerIsDraggable = true;
var myCoordsLenght = 6;
var defaultLat = position.coords.latitude;
var defaultLng = position.coords.longitude;
document.getElementById('latitude').value = defaultLat;
document.getElementById('longitude').value = defaultLng;
/*
1. creates the map
2. zooms
3. centers the map
4. sets the map’s type
*/
var map = new google.maps.Map(document.getElementById('canvas'), {
zoom: myZoom,
center: new google.maps.LatLng(defaultLat, defaultLng),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
// centers the map on markers coords
map.setCenter(myMarker.position);
// adds the marker on the map
myMarker.setMap(map);
}
function displayError(error) {
var errors = {
1: 'Permission denied',
2: 'Position unavailable',
3: 'Request timeout'
};
alert("Error: " + errors[error.code]);
}
});
The trouble with the above approach is that, few of the users have found it difficult to use. Few of the times, they have clicked Deny instead of Allow and keep staring on the screen. So from usability point of view, I think a good approach would be:
Ask them for permission.
Wait for 3 seconds, if they click deny or don't respond, use IP to show the geolcation on the map.
How can I accomplish the second step in my above snippets. Please let me know, thanks! However, what would be a better way to handle
You would then use a geo ip api like this one:
http://freegeoip.net/static/index.html
If there is a timeout or the user denies the request, I would set a default location like New York, NY (40.7142, -74.0064). If a user denies a request, they have to also expect that you won't know their location so choosing an intelligible default is the next best thing.
Using a default without changing your code much can be accomplished by calling
displayPosition({coords: {latitude: 40.7142, longitude: -74.0064}})
in two places:On http://nearbytweets.com I use a "queue" of functions for finding a user's location, looping through the queue until one of them finds a valid location. The last function returns New York, NY, which means all other attempts have failed. Here's a sample of the code modified slightly:
Here's what each position_finder does:
Here is a script (geolocator.js) I wrote some time ago and updated recently.
Update: Geolocator v2 is released.
Features:
See a live demo.
See API documentation.
Usage:
Example Output:
You can use this online service to get the lat lng easily:
http://dev.maxmind.com/geoip/javascript
Regarding the timeout, I don't think there's a way to interfere with the browsers permission mechanism (as in, to close that permission popup after a certain amount of seconds) - though I would gladly be proven wrong. What you could do would be to set a timer and after three seconds, get the IP based geolocation and set the map to it (or, refresh the page after 3 seconds, and set a cookie that triggers the IP based geo and not the HTML5 geo, but that's a bit over the top if you ask me).
Then, if they give permission, it would refresh the map with the HTML5 geolocation (which should be much more accurate). You can also encapsulate the IP geo fallback into a function and use it if they don't have HTML5 geolocation or they hit deny.
Here's a fiddle: http://jsfiddle.net/mfNCn/1/
Here's the rough cut from the fiddle:
(I hesitate to put the whole code chunk onto here, as it's rather lengthy, so check the fiddle for the rest and full implementation)
This, might be of help: http://jsfiddle.net/sandesh2302/FghFZ/ I used this for my stuff, it worked fine.
Ex:
look at this tutsplus example http://mobile.tutsplus.com/tutorials/mobile-web-apps/html5-geolocation/