How to use Location API and Google maps in HTML5

0
1333

In our blog today we will write a small little program to invoke the location API of HTML5.
The HTML5 uses Geolocation API to provide the current location of the user. But before providing this access our program will have to request to grant access to the privacy settings and user will have to approve this for the API to work.

Step 1

We will create a HTML page and will create a button there. The user’s location will be displayed on Google MAP once the user presses the button.

Step 2

Create a button to call the Geolocation API

This line of code is used the google APIs in our application.User can use it directly or they can generate their own key.To generate their own key go for the following link :

https://developers.google.com/maps/documentation/javascript/tutorial#api_key

This is the geolocation() function defined.This Api first take permission from the user.If user approve then the location is showed otherwise it shows an error that “This feature is not available”.

Step 3

Get and Display the position

To define the location on google maps we take another variable which stores the location of the user.An link to the image of google maps is provided in the link.We get the element by using the id and set its inner html property.

You will have to put this code in a webserver for it to work properly.

Output

output1

output2