Geolocation

[edsanimate_start entry_animation_type= “flipInX” entry_delay= “2” entry_duration= “1” entry_timing= “ease-in” exit_animation_type= “” exit_delay= “” exit_duration= “” exit_timing= “” animation_repeat= “1” keep= “yes” animate_on= “load” scroll_offset= “” custom_css_class= “”]

The Geolocation is used to locate the geographical position of the client side.

The Geolocation is used to find the user`s location by the following methods.

  • GPS (Global Positioning System)
  • Mobile phone tracking
  • Wi-Fi positioning system
  • IP Address

Always set the map height explicitly to define the size of the div element that contains the map.

If the geolocation service is failed, you will not be given permission for the browser to locate.

The various types of getCurrentPosition() methods

  • coords.latitude
  • coords.longitude
  • coords.accuracy
  • coords.altitude
  • coords.altitudeAccuracy
  • coords.heading
  • coords.speed
  • timestamp

Sample code

<!DOCTYPE HTML>

<html>

<body>

<button onclick=”getLocation()”>Click here</button>

<script type=”text/javascript”>

function showLocation(position)

{

var latitude = position.coords.latitude;

var longitude = position.coords.longitude;

alert(“Latitude : ” + latitude + ” Longitude : ” + longitude);

}

function errorHandler(err)

{

alert(“Error: Access is denied”);

}

function getLocation()

{

if(navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showLocation, errorHandler);

}

else{

alert(“your browser does not support geolocation”);

} }

</script>

</body>

</html>

 

 

Example for Google location

 

 

<!DOCTYPE html>

<html>

<head>

<title>Geolocation</title>

<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no”>

<meta charset=”UTF-8″>

<style>

#map {

height: 100%;

}

html, body {

height: 100%;margin: 0;padding: 0; }

</style>

</head>

<body>

<div id=”map”></div>

<script>

var map, infoWindow;

function initMap() {

map = new google.maps.Map(document.getElementById(‘map’), {

center: {lat: 10.7771900, lng: 78.702758878 },

zoom: 6

});

infoWindow = new google.maps.InfoWindow;

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function(position) {

var pos = {

lat: position.coords.latitude,

lng: position.coords.longitude

};

infoWindow.setPosition(pos);

infoWindow.setContent(‘Location found.’);

infoWindow.open(map);

map.setCenter(pos);

}, function() {

handleLocationError(true, infoWindow, map.getCenter());

});

}

else {

handleLocationError(false, infoWindow, map.getCenter());

}}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {

infoWindow.setPosition(pos);

infoWindow.setContent(browserHasGeolocation ?

‘Error: The Geolocation service failed.’ :

‘Error: Your browser doesn’t support geolocation.’);

infoWindow.open(map);

}

</script>

<script async defer

src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap”>

</script>

</body>

</html>

 

For the above code you have to get API key from Google by registration. You have to get Gmail id and sign in Gmail to get your API id for various uses.

[edsanimate_end]