Web Development

Locate His Position

Locate His Position is part 7 of Beginner’s Guide to HTML5. With this new edition we are covering up the APIs that HTML5 provides. This is our first article on the HTML5 APIs.

HTML5 offers to locate, where does the reader who is reading this article comes from. But if and only if reader is willing to reveal that information.

The HTML5 Geolocation API is used to get the geographical position of a user. Since this can compromise user privacy, the position is not available unless the user approves it. If a website is using this API to locate the user, user will always get something popped up on his browser like as below.

geolocation approval

With the name of the website, it asks permission to reveal that information. But when the reader is viewing the website through his PC, it doesn’t give any accurate information. But when it on a mobile device which includes GPS, it gives out accurate information where the user viewing the website from.

Let’s go through a code snippet how to do this. But actually to do this you need to know a little bit of JavaScript. Through JavaScript we are accessing HTML5 DOM(Document Object Model) elements.

[code language=”js”]
[/code] [code language=”html”]

Click the button to get your coordinates:


[/code]

Let’s see what is happening in here. Use the getCurrentPosition() method to get the user’s position. It is a simple Geolocation example returning the latitude and longitude of the user’s position. If everything goes okay, you’ll see some output like the following.

Latitude: 6.887212Longitude: 79.9063267

The example above is a very basic Geolocation script, with no error handling. There are several error points that might comes up in the getCurrentPosition() method.

  • Permission denied – The user did not allow Geolocation
  • Position unavailable – It is not possible to get the current location
  • Timeout – The operation timed out

To handle those error, we can use the second parameter of the getCurrentPosition() method is used to handle errors. It specifies a function to run if it fails to get the user’s location.

Change the calling getCurrentPosition() method as follows by adding the 2nd parameter.

[code language=”js”] navigator.geolocation.getCurrentPosition(showPosition,showError);
[/code]

Then add the function it mention as below.

[code language=”js”] function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = “User denied the request for Geolocation.”
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = “Location information is unavailable.”
break;
case error.TIMEOUT:
x.innerHTML = “The request to get user location timed out.”
break;
case error.UNKNOWN_ERROR:
x.innerHTML = “An unknown error occurred.”
break;
}
}
[/code]

Information that gained from this way can be send to the server side for necessary operations. If you know how to use Google Maps API, this information can be converted into a display on the Google Maps.

To display first you have to have a division tag to display the map.

[code language=”html”]
[/code]

To send to the Google Maps API service you need to create a latitude and longitude string in the following format.

latitude_longitude_string = ,

[code language=”js”] var latlon = position.coords.latitude+”,”+position.coords.longitude;
[/code]

What we are going to do now is appends a image inside our division tag. The src attribute value of the image goes as follows.

[code language=”js”] var img_url = “http://maps.googleapis.com/maps/api/staticmapcenter=”+latlon+”&zoom=14&size=400×300&sensor=false”;
[/code]

Here we send our latitude_longitude_string as the  staticmapcenter parameter to google maps service, so our location position is centered in the map. We set the zoom level as 14 and size of the image as 400×300 with no sensors.

Next thing is create the image and append it to the division.

[code language=”js”] document.getElementById(“mapholder”).innerHTML = ““;
[/code]

Check whether if your location appears here correctly. But don’t forget to give the permission when your browser asked.

[cjtoolbox name=’Geolocation_HTML5′ ] [/cjtoolbox]

So in this section we had go through the HTML5 Geolocation API where it offers to locate the users of the website. In the next section we are going to do some interactive things. But you need to be familiar with JavaScript before moving into it.

What’s Next?

Learn Dragging and Dropping,

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW