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;
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
#mapdiv {
margin: 0;
padding: 0;
width: 500px;
height: 500px;
}
"https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true">
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;
}
}
onload="geoloc()">
id = 'mapdiv'>
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 [email protected]
This post first appeared on Best Software Training Institute In Bangalore, please read the originial post: here
