HTML5 Geolocation API allows users to share their location with web applications by capturing the approximate longitude and latitude coordinates of the user with their permission. The Geolocation feature can be used to enrich many types of web applications by adding automatic location information. For example, users can share their locations with their friends in a social network, can be guided to a direction or location based ads can be displayed. The Geolocation API can be paired up with different maps, such as Google Maps, Yahoo Maps, Bing Maps or Nokia Ovi Maps.
As far the use privacy is concerned, the HTML5 specification explicitly requires the user permission to share its location to any application requesting Geolocation information.
Almost all modern browsers Firefox 3.5+, Opera 10.6+, Chrome 5+, Safari 5+ and Internet Explorer 9+ support Geolocation API.
2. Checking Browser support
First we need to check if the user browser supports the Geolocation API. The easiest way to detect the Geolocation support is:
<script type="text/javascript">
if(navigator.geolocation) {
alert("Great..Geolocation API is supported.");
} else {
alert("Geolocation API is not supported in your browser.");
}
</script>
3. Reading users location
Once we have checked that the user browser supports Geolocation API, we can read the user location by following code:
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
}
The above code will obtain the current position of the user and assign to the latitude and longitude variables.
Now we can have got the user latitude and longitude data, we can use it with different map services.
4. Using with Google Maps:
Following code shows how to use the latitude and longitude with Google maps. Please read the comments.
var coords = new google.maps.LatLng(latitude, longitude);
//Add map options
var mapOptions = {
//zoom level, between 0 to 21.
zoom: 15,
//center to the user location
center: coords,
//add map type controls.
mapTypeControl: true,
//navigation control options
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
//default map type
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Create the map, and place it in the mapContainer div
map = new google.maps.Map(
document.getElementById("mapContainer"), mapOptions
);
// Place the initial marker
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Your current location!"
});
Following is the complete code to get the user location and display on Google Maps.
<!DOCTYPE HTML>
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var coords = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 15,
center: coords,
mapTypeControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(
document.getElementById("mapContainer"), mapOptions
);
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Your current location!"
});
});
}else {
alert("Geolocation API is not supported in your browser.");
}
</script>
<style type="text/css">
#mapContainer {
height: 500px;
width: 800px;
border:10px solid #eaeaea;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
</body>
</html>
5. Using with Bing Maps:
We can use the user location latitude and longitude with Bing Maps with following code:
//create a new instance of the VELatLong.
var LA = new VELatLong(latitude, longitude);
//create a new instance of VEMap
map = new VEMap('mapContainer');
//set options and load map.
map.LoadMap(
LA, //VELatLong
15, //zoom 1 through 19. Default is 4.
VEMapStyle.Road, //Road, Shaded, Aerial, Hybrid, Birdseye
false, //map view is displayed as a fixed map
VEMapMode.Mode2D, //VEMapMode.Mode2D. or VEMapMode.Mode3D.
true, //show switch on the map
1 //tile buffer to use when loading map.
);
//create and add pushpin.
pinPoint = map.GetCenter();
pinPixel = map.LatLongToPixel(pinPoint);
map.AddPushpin(pinPoint);
Here is the complete code to get the user location and using with Bing Maps:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3">
</script>
<script type="text/javascript">
var map = null;
var pinPoint = null;
var pinPixel = null;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var LA = new VELatLong(latitude, longitude);
map = new VEMap('mapContainer');
map.LoadMap(
LA,
15,
VEMapStyle.Road,
false,
VEMapMode.Mode2D,
true,
1
);
pinPoint = map.GetCenter();
pinPixel = map.LatLongToPixel(pinPoint);
map.AddPushpin(pinPoint);
});
}else {
alert("Geolocation API is not supported in your browser.");
}
</script>
<style type="text/css">
#mapContainer {
height: 500px !important;
width: 800px !important;
border:10px solid #eaeaea;
position:relative;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
</body>
</html>
6. Using with Nokia Maps
We can use the latitude and longitude with Nokia ovi maps with following code:
map = new ovi.mapsapi.map.Display(
document.getElementById("mapContainer"),
{ components: [
new ovi.mapsapi.map.component.Behavior(),
new ovi.mapsapi.map.component.Overview(),
//add ZoomBar
new ovi.mapsapi.map.component.ZoomBar(),
//add map types eg. Satellite, terrain
new ovi.mapsapi.map.component.TypeSelector(),
//add scalebar
new ovi.mapsapi.map.component.ScaleBar() ],
//zoom level, between 0 to 20.
zoomLevel: 15,
//center the map to the user location.
center: [latitude, longitude]
});
//create a marker
var marker = new ovi.mapsapi.map.StandardMarker(
[latitude, longitude], {
//add label
text: "Hi!",
});
//add marker to the map
map.objects.add(marker);
Here is the complete code to get the user location and display on Nokia maps:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://api.maps.ovi.com/jsl.js"></script>
<script>
if (navigator.geolocation) {
var map;
var marker;
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
map = new ovi.mapsapi.map.Display(
document.getElementById("mapContainer"),
{ components: [
new ovi.mapsapi.map.component.Behavior(),
new ovi.mapsapi.map.component.Overview(),
new ovi.mapsapi.map.component.ZoomBar(),
new ovi.mapsapi.map.component.TypeSelector(),
new ovi.mapsapi.map.component.ScaleBar() ],
zoomLevel: 15,
center: [latitude, longitude]
});
var marker = new ovi.mapsapi.map.StandardMarker(
[latitude, longitude], {
text: "Hi!",
});
map.objects.add(marker);
});
} else {
alert("Geolocation API is not supported in your browser.");
}
</script>
<style type="text/css">
#mapContainer {
height: 500px;
width: 800px;
border:10px solid #eaeaea;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
</body>
</html>
Pingback: Weekly #25 | fitml.com Blog
Pingback: A Showcase of HTML5 Tutorials for Web Designers