Saturday, August 10, 2013

Find your current location using your Browser - HTML 5

Since i have posted some WSO2 related posts in my recent past blogs, I thought of writing something in diffident context. As most of you know, HTML 5 supports for the Geo Location finder.

This blog can be answer to servaral question such like,
[1]How To Use HTML5 GeoLocation API With Google Maps
[2] How to locate my location using html5 compatible browser
[3] Locate me using html 5


So lets make use of it and develop small HTML web site to identify where are we ;)

As a prerequisite you have to obtain the key from Google in order to activate Google API.
Please refer Google Maps JavaScript API v3 to obtain more information about it.

Lets step into the code and see what is happening underneath...
In line 12 of the code snippet, I have configured the Google API with key in your case you have to replace with your Toke Key you have obtained with Google.

Immediately after this page is loaded, I am calling "getLocation()" using body onload event. In getLocation method (line 17) I am making use of HTML5 Geolocation API to identify my current location. I have set the google.maps.Marker with detected latitude and longitude to configured the Google map that is displayed bellow.