IDIOT DEVELOPER

Using HTML5 to Determine User Location on Google Map
Using HTML5 to Determine User Location on Google Map
DOWNLOAD

Geolocation is one of the best new HTML5 APIs, so let’s see what we can do with it. In a nutshell, Geolocation allows you to give your current location information to the browser. Google use Geolocation a lot, especially for things like Google Maps, you’re bound to have seen the popups ‘This page would like to use your current location’. If so, you’ve experienced HTML5 Geolocation.

 

Using some relatively simple JavaScript code, you can create Web applications that determine various aspects of the user location, including longitude, latitude and altitude plus more. Some Web applications can even provide navigation functionality by monitoring the user position over time, integrating with map systems such as Google Maps API.

 

As with all HTML5 functions, you cannot yet rely on browser support. Where browser support exists, it varies in depth and consistency. Essentially, you need to provide alternative functionality for users whose browsers do not fully support HTML5.

 

In this tutorial, we will go through the HTML5 geolocation feature, getting the user location and pinning it on the Google Map. The browser may use different sources to get the location of the user – may be it is using GPS on mobile devices or it may be using IP address data. You need not to concern about the sources.

 

HTML Code

 


<div style="width: 500px; margin: auto;">
<center><button type="button" onclick="getUserLocation()">Get Location</button></center>
<p id="locationData"></p>
<iframe id="locationMap" width="500" height="500" frameborder=0 scrolling=0 src="https://maps.google.co.in?output=embed"></iframe>
</div>

 

CSS Code

 


button{
    background: #333;
    padding: 20px 30px;
    border: 1px solid #333;
    border-radius: 40px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}
button:hover{
    background: #fff;
    color: #333;
    transition: all 0.5s;
}

 

Get Current Position

Using JavaScript, we can gather the details of the current location like latitude, latitude, etc. Please bear in mind though, some ISPs are a little quirky with Geolocation, and sometimes shows you in a different area than you actually are, or not at all. But 99% of the time the location is correct.

 

We’ll be using the geolocation object, which allows us to gather geographic information from the device. This looks like so:

 


navigation.geolocation

 

In the HTML code you can see that we have written a JavaScript function getUserLocation to get the user current location on the click of the button.

 


function getUserLocation(){
  //Check if geolocation is supported
  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(displayLocation, displayError);
  }else{
    document.getElementById("locationData").innerHTML = "Sorry, your broswer doesn't support geolocation!";
  }
 }

 

The function first check if the browser supports the geolocation object, we can say that it checks the presence of the navigator.geolocation object. if the geolocation is supported then it calls the getCurrentPosition function of the navigator.geolocation object. If the geolocaton is not supported then it returns an error message.

 

The getCurrentPosition method takes two parameters indicating callback functions. The first is a function to call when the Geolocation data is received, while the second is a function to call if an error is returned instead.

 


function displayLocation(position){
  var data = "User Cordinates: <br/>Latitude: " + position.coords.latitude + "<br/>Longitude: " + position.coords.longitude;
  document.getElementById("locationData").innerHTML = data;
  var coords = position.coords.latitude + ", " + position.coords.longitude;
  document.getElementById("locationMap").setAttribute('src', 'https://maps.google.co.in?q=' + coords + '&output=embed');
 }

 

The displayLocation function displays the Latitude and Longtitude on the broswer, and pin the current location on the Google Map.

 

The function first create a variable called data containing the latitude and longtitude from the location position parameter, and then writes this to the locationData id. After that it takes the coordinates and put it in the google map url and show it in an iframe.

 

 


function displayError(error){
    locationData = document.getElementById("locationData");

    switch(error.code){
      case error.PERMISSION_DENIED:
        locationData.innerHTML = "Permission was denied!";
        break;
      case error.POSITION_UNAVAILABLE:
        locationData.innerHTML = "Location data is not available";
        break;
      case error.TIMEOUT:
        locationData.innerHTML = "Location request timeout";
        break;
      case error.UNKNOWN_ERROR:
          locationData.innerHTML = "Unknow error occured";
          break;
      default:
        locationData.innerHTML = "Error Occured!";
        break;
    }
}

 

The displayError function deals with error that occur during the process of getting the error.

 

Complete Code

 


<!DOCTYPE html>
<html>
<head>
<title> Determining User Location with HTML5</title>
<style type="text/css">
  button{
  background: #333;
  padding: 20px 30px;
  border: 1px solid #333;
  border-radius: 40px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

button:hover{
  background: #fff;
  color: #333;
  transition: all 0.5s;
}
</style>

<script>
function getUserLocation(){
  //Check if geolocation is supported
  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(displayLocation, displayError);
  }else{
    document.getElementById("locationData").innerHTML = "Sorry, your broswer doesn't support geolocation!";
  }
}

function displayLocation(position){
  var data = "User Cordinates: <br/>Latitude: " + position.coords.latitude + "<br/>Longitude: " + position.coords.longitude;
  document.getElementById("locationData").innerHTML = data;
  var coords = position.coords.latitude + ", " + position.coords.longitude;
  document.getElementById("locationMap").setAttribute('src', 'https://maps.google.co.in?q=' + coords + '&output=embed');
}

function displayError(error){
  locationData = document.getElementById("locationData");

  switch(error.code){
    case error.PERMISSION_DENIED:
      locationData.innerHTML = "Permission was denied!";
      break;
    case error.POSITION_UNAVAILABLE:
      locationData.innerHTML = "Location data is not available";
      break;
    case error.TIMEOUT:
      locationData.innerHTML = "Location request timeout";
      break;
    case error.UNKNOWN_ERROR:
      locationData.innerHTML = "Unknow error occured";
      break;
    default:
      locationData.innerHTML = "Error Occured!";
      break;
  }
}
</script>
</head>

<body>

<div style="width: 500px; margin: auto;">
<center><button type="button" onclick="getUserLocation()">Get Location</button></center>
<p id="locationData"></p>
<iframe id="locationMap" width="500" height="500" frameborder=0 scrolling=0 src="https://maps.google.co.in?output=embed"></iframe>
</div>

</body>
</html>

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *