GEOLOCATION IN HTML5

ZenRays 01:21 Add Comment Edit

HTML5 is very interesting with many new features which was not supported in early versions. Geolocation is one among them. Geolocation in HTML5 is used to share location in our site. Latitude and longitude is captured by JavaScript and sent to web server in the back-end. Geolocation API is supported by browsers and mobile devices Geolocation API will uses cell triangulation, GPS, A-GPS, WIFI, IP- based position techniques to identify location. Before sending the location to websites Geolocation API asks the permission of the user for protecting their privacy. The user gets the pop-over request for sharing their location.

To check for the browser's compatibility, navigator object is used and can be created using
var geolocation = navigator.geolocation;

if(navigator.geolocation){  
//do this  
}else{  
alert('Not supported by Browser')';  
}

getCurrentPosition function is used to get the current location of the user. It has 3 parameters

Success Callback Function
Error Callback Function
Position option

The error callback function is called when the location data is not fetched. If it is fetched successfully and user agrees to share their location, then success callback function will be called. Position option is used describe options to retrieve the location of the user.

navigator.geolocation.getCurrentPosition(showPos, showErr, optn);  
funtion showPos(position){  
document.write('latitude: '+position.coords.latitude+'longitude: '+position.coords.longitude);  
}

coords is an object and has the following properties:

Latitude,longitude
Altitude
AltitudeAccuracy
Accuracy
Speed

Showing Location on Google Maps

Using geolocation API, the longitude and latitude coordinates has to be converted into a latLng object of Google Maps.

var googlePos=new google.maps.Latlng(position.coords.latitude,position.coords.longitude);

Map object can also be created to specify the display options. Some of the options are zoom - to specify the zoom level, center - to specify that the map should be placed at the center, mapTypeId - to specify roadmap or satellite.

We can also create a marker. Below is the code for creating marker.

In the code map is the object where marker will appear, position is the latLng position and title is the one which will be displayed when we hover on the marker.

Below is the sample code for displaying location

<!DOCTYPE html>
<html>
<head>
<title>Sample Map</title>
<style>
#mapdiv {
 margin: 0;
 padding: 0;
 width: 500px;
 height: 500px;
}
</style>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script>
 var watchId = null;
 function geoloc() {
 if (navigator.geolocation) {
  var optn = {
    enableHighAccuracy : true,
    timeout : Infinity,
    maximumAge : 0
  };
 watchId = navigator.geolocation.watchPosition(showPosition, showError, optn);
 } else {
   alert('Geolocation is not supported in your browser');
 }
 }

function showPosition(position) {
  var googlePos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var mapOptions = {
   zoom : 12,
   center : googlePos,
   mapTypeId : google.maps.MapTypeId.ROADMAP
  };
  var mapObj = document.getElementById('mapdiv');
  var googleMap = new google.maps.Map(mapObj, mapOptions);
  var markerOpt = {
   map : googleMap,
   position : googlePos,
   title : 'Hi , I am here',
   animation : google.maps.Animation.DROP
  };
  var googleMarker = new google.maps.Marker(markerOpt);
  var geocoder = new google.maps.Geocoder();
  geocoder.geocode({
   'latLng' : googlePos
   }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
    if (results[1]) {
     var popOpts = {
      content : results[1].formatted_address,
      position : googlePos
     };
    var popup = new google.maps.InfoWindow(popOpts);
    google.maps.event.addListener(googleMarker, 'click', function() {
    popup.open(googleMap);
   });
    } else {
     alert('No results found');
    }
    } else {
     alert('Geocoder failed due to: ' + status);
    }
   });
   }

   function stopWatch() {
    if (watchId) {
     navigator.geolocation.clearWatch(watchId);
     watchId = null;

    }
   }

  function showError(error) {
  var err = document.getElementById('mapdiv');
  switch(error.code) {
  case error.PERMISSION_DENIED:
  err.innerHTML = "User denied the request for Geolocation."
  break;
  case error.POSITION_UNAVAILABLE:
  err.innerHTML = "Location information is unavailable."
  break;
  case error.TIMEOUT:
  err.innerHTML = "The request to get user location timed out."
  break;
  case error.UNKNOWN_ERROR:
  err.innerHTML = "An unknown error occurred."
  break;
  }
  }
  </script>

 </head>
 <body onload="geoloc()">
  <p id = 'mapdiv'></p>
  <button onclick="stopWatch()">
   Stop
  </button>
 </body>
</html>

The output for the above code will be

ZenRays provide the following to make you expert

Fully practical and project based sessions from first class.
Training by Experienced Consultants, not regular Trainers
Friendly and enthusiastic faculty to clear your doubts 24X7
Free Live project after the training to get you industry experience

If you want more details please visit us:

Zenrays.com Reach us at trainings@zenrays.com

ABOUT THE AUTHOR

Hello We are OddThemes, Our name came from the fact that we are UNIQUE. We specialize in designing premium looking fully customizable highly responsive blogger templates. We at OddThemes do carry a philosophy that: Nothing Is Impossible