Until now it was almost impossible to get the GeoLocation of a user browsing your site. You could try to use several services to more or less guess the current position. Most of the time they where using the IP address to tackle the problem. This was not very reliable when it came to mobile devices.
Ever since the iPhone hit the market mobile adoption of the web grew exponentially. Google threw in Android and I’m sure some Windows Mobile phones do have GPS as well. According to some talks at re:publica 09 the big telco carriers such as T-Mobile and Vodafone see their future in the mobile (geolocation aware) web.
Even though these devices had the capabilities to get the current location, website developers are still facing the problem that they can not access the positioning hardware of the phone. There was almost no way for (mobile) web developers to get the location of the user. There are some solution out there but you needed to install extra software which is not always possible on a phone.
Fortunately W3C is working on the HTML 5 standard which includes JavaScript access to the browsers location (at least I hope it will be included). The latest beta of Firefox 3.1 (beta3) already supports that API. If you don’t have a GPS system in your computer you can install an addon to set your location. Rumors has it that Apple will release the upcoming iPhone 3.0 OS with a location aware browser and Google will do the same with one of the next updates of Android.
To test that I wrote a small geolocation aware demo webpage with some JavaScript to pull out the information. If you are accessing it with Firefox 3.1b3+ (plugin installed and configured with your position) you will be prompted for unveiling your location to the website. If you do so it will show you your current position on the map and print out the address.
Allow access to the browsers GeoLocation
Showing the GeoLocation of the Browser
To access this information all you need to do is:
function showMap(position) {
// Show a map centered at
// (position.coords.latitude, position.coords.longitude).
}
// One-shot position request.
navigator.geolocation.getCurrentPosition(showMap);
Once this feature is widely available in mobile browsers (I do hope for this summer) my bet is that we will see a whole bunch of websites doing all sort of crazy things with these information. I’m a big Location Based Services (LBS) fan and I can’t wait to see people taking advantage of this.
Update Firefox 3.5.x uses Google’s Geolocation service if no other way can be used. This is halfway accurate. It gathers information about nearby wireless access points and your computer’s IP address. No more plugin needed.
11 Responses to “Getting the Browsers GeoLocation with HTML 5”
Leave a Reply
Additional comments powered by BackType
Nice! just like you predicted.. Mobile Safari is geo-enabled with iPhone 3.0 this summer
I’m sure your page is going to shoot up in popularity on Google Search Results !!
Hi
Love the example but when I test it using Firefox3.5beta the results are a bit flaky.. location shows up sometimes but not other times and I’m using the same Wi-Fi connection… I called my friend over to show your website and boom.. it stopped working..(yeah..a little bit like taking your car to the repair guy to have your car magically start working
I’m pretty sure it is Google Location Services that is being flaky hmmm…thought I would let you know…. might hamper adoption
I guess that’s true but I would bet this will a) improve and b) more devices will have GPS build in. I never played with Google Location Service to see how reliable it is (yet).
Hi Oliver,
Have you, or has anyone, tried this with an iPhone running the 3.0 OS?
As with the above commenter, it also acts flaky. Maybe there is a need for a delay before accepting that the device has truly found it’s location.
I just tested it on my iPhone 3G running the 3.0 software and it worked pretty well.
One thing to note: the first two times I tried it, the map on the test page “located” me about 8 blocks from where I actually was. I then opened the iPhone google map and hit the “locate” button which instantly zeroed in on my correct location. When I then checked your test page again, it now had the correct location.
Great test! I’m excited to see people take advantage of HTML 5.
[...] MaxHeapSize geolocation on the map demo [...]
I’d love to see the code here but the zip file doesn’t seem to be there . . .
This comment was originally posted on studiowhiz
ahh yeah, sorry, it was there but wasn’t very clear as to where to download from – so I changed the link. Grab it from here now
This comment was originally posted on studiowhiz
Nice article! There is one article which highlights the capabilities and constraints of both Wireless Geolocation (HTML 5 Geolocation API) and IP Address Geolocation at http://www.ip2location.com/html5geolocationapi.aspx .
[...] : Ziyaretcinizin harita üzerindeki konumunu belirlemek için. örnekler için buraya ve buraya [...]
[...] GeoLocation with HTML5 2670 pageviews JSF 2 and maven 2607 pageviews Selenium 2 and Concordion vs. Cucumber each 1566 pageviews [...]