Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Learning and Practicing with HTML5 Geolocation Element and Javascript

In this article I will explain what is Geolocation in HTML5 and how to use Geolocation techniques. Also, this tutorial will elaborate the Geolocation capabilities of HTML5 and the basic principles to start the Geolocation.

In this article we will cover these following topics:

  • The HTML5 Geolocation is application programming interface which is used to get the geographical position of a user. It will locate the client positions via map or coordinates.
  • Application captures approximate latitude and longitude coordinates of the client with their permission and display the current geographical position.
  • In this article we’ll first cover how to access this application programming interface and then I will explain some examples of what we can do with this data using Google Maps and other services which help to find user location on browser
  • Geolocation is supported by IE 9, Chrome, Safari, Opera and Firefox.

Working of Browser Geolocation

To summarize the location of a client, one would typically have to test the IP address of the of the system and stroke the reasonable guess as to the where that system was located .The retrieval of geographic positioning information is done with java script.

One substantial application that uses to find geographical positioning is Google Maps.

Using Geolocation

Following Section is simple geological example which will return the approximate latitude and longitude coordinates of the client with their permission and display the current geographical position.

Listing 1: Script to display latitude and longitude coordinates

<!DOCTYPE html>
<html>
<body>
<p id="start">Click the button to get your coordinates:</p>
<button onclick="getLocation()">click</button>
<script>
var myStartVariable=document.getElementById("start");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(CurrentPosition);
    }
  else{myStartVariable.innerHTML="This browser is supporting Geolocation.";}
  }
function CurrentPosition(position)
  {
  myStartVariable.innerHTML="Current Latitude: " + position.coords.latitude + 
  "<br />Current Longitude: " + position.coords.longitude;	
  }
</script>
</body>
</html>
 
The above output shows the current Latitude and Longitude

Figure 1: The above output shows the current Latitude and Longitude

After execution of script browser will ask for permission then it display the approximate latitude and longitude coordinates.

The above code first check if Geolocation is supported by the current browser, if not; display a message and exit. If browser supports the Geolocation then it go display the current the Latitude and Longitude coordinates of client.

Listing 2: Geolocation with Error Handling Script.

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script>
var myDemoVariable=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(displayPosition,displayError);
    }
  else{myDemoVariable.innerHTML="Browser not supported.";}
  }
function displayPosition(position)
  {
  myDemoVariable.innerHTML="Current Latitude: " + position.coords.latitude + 
  "<br />Current Longitude: " + position.coords.longitude;	
  }
function displayError(error)
  {
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      myDemoVariable.innerHTML="Geolocation - Permission Denied."
      break;
    case error.POSITION_UNAVAILABLE:
      myDemoVariable.innerHTML="Geolocation - Location info unavailable."
      break;
    case error.TIMEOUT:
      myDemoVariable.innerHTML="Geolocation - Request Timed out."
      break;
    case error.UNKNOWN_ERROR:
      myDemoVariable.innerHTML="Geolocation - Unknown Error."
      break;
    }
  }
</script>
</body>
</html>
 

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:

If browser does not support the geolocation following message will display.

Browser not supporting the Geolocation

Figure 2: Browser not supporting the Geolocation

Displaying Google Map

Result obtained of latitude and longitude coordinates data use to show the location in a Google map. This is done by using static image.

Listing 3: Script to display current location using Google Map

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your position:</p>
<button onclick="getLocation()">Try me!</button>
<div id="GoogleMapPlaceHolder"></div>
<script>
var myVariable=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(displayPosition,displayError);
    }
  else{myVariable.innerHTML="Browser not supported.";}
  }

function displayPosition(position)
  {
  var mylatlon=position.coords.latitude+","+position.coords.longitude;

  var my_url="http://maps.googleapis.com/maps/api/staticmap?center="
  +mylatlon+"&zoom=14&size=400x300&sensor=false";
  document.getElementById("GoogleMapPlaceHolder").innerHTML="<img class='imagem_artigo' src='"+my_url+"' />";
  }

function displayError(error)
  {
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      myDemoVariable.innerHTML="Geolocation - Permission Denied."
      break;
    case error.POSITION_UNAVAILABLE:
      myDemoVariable.innerHTML="Geolocation - Location info unavailable."
      break;
    case error.TIMEOUT:
      myDemoVariable.innerHTML="Geolocation - Request Timed out."
      break;
    case error.UNKNOWN_ERROR:
      myDemoVariable.innerHTML="Geolocation - Unknown Error."
      break;
    }
  }
</script>
</body>
</html>
Displaying the Coordinates in Google Maps

Figure 3: Displaying the Coordinates in Google Maps

Conclusion:

The Geolocation is very useful while interacting with customers and giving them visual instructions. You can use it to show the location to your client and display it on your website. The article covered almost the basic functionality. Please comment here if you have any questions.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login