Electro 1G: Find your current location using your Browser

Since i have posted some WSO2 related posts in my recent past blogs, I thought of writing something in diffident context. As most of you know, HTML 5 supports for the Geo Location finder.

This blog can be answer to servaral question such like,
[1]How To Use HTML5 GeoLocation API With Google Maps
[2] How to locate my location using html5 compatible browser
[3] Locate me using html 5

So lets make use of it and develop small HTML web site to identify where are we ;)

As a prerequisite you have to obtain the key from Google in order to activate Google API.
Please refer Google Maps JavaScript API v3 to obtain more information about it.

Lets step into the code and see what is happening underneath...

	<html>
	<head>

	<style type="text/css">
	#map-canvas {
	height: 300px;
	width: 300px;
	}
	</style>

	<script type="text/javascript"
	src="https://maps.googleapis.com/maps/api/js?key=YOUR_TOKEN&sensor=false">
	</script>
	<script type="text/javascript">
	function getLocation() {
	if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(showPosition);
	}
	}
	function displayLocation(latitude, longitude) {
	var request = new XMLHttpRequest();

	var method = 'GET';
	var url = 'http://maps.googleapis.com/maps/api/geocode/json?latlng=' + latitude + ',' + longitude + '&sensor=true';
	var async = true;

	request.open(method, url, async);
	request.onreadystatechange = function () {
	if (request.readyState == 4 && request.status == 200) {
	var data = JSON.parse(request.responseText);
	var address = data.results[0];
	//document.write(address.formatted_address);
	var city = document.getElementById("city");
	var n = address.formatted_address.split(",");
	city.value = n[n.length - 3];
	}
	};
	request.send();
	}
	;

	function showPosition(position) {
	var latitude = document.getElementById("latitude"), longitude = document.getElementById("longitude");
	latitude.value = position.coords.latitude;
	longitude.value = position.coords.longitude;
	displayLocation(latitude.value, longitude.value);
	var myLatlng = new google.maps.LatLng(latitude.value, longitude.value);

	var myTittle = "Your Current Location! Lat: " + latitude.value + " lng: " + longitude.value;
	var marker = new google.maps.Marker({
	position: myLatlng,
	title: myTittle
	});

	var mapOptions = {
	center: myLatlng,
	zoom: 16,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("map-canvas"),
	mapOptions);
	marker.setMap(map);

	}
	google.maps.event.addDomListener(window, 'load', initialize);
	</script>

	</head>
	<body onload="getLocation()">

	<div class="container">

	<div class="row well">
	<div class="span12">
	<h1>Your Current Location</h1>
	</div>
	<div class="span10">
	<div id="centered">
	<input name="latitude" id="latitude">
	<input name="longitude" id="longitude">
	<input name="city" id="city" type="hidden">
	<input type="submit" name="submit" value="Okay">
	</div>
	<div id="map-canvas"/>
	</div>
	</div>
	</div>
	</body>
	</html>

view raw GeoLocation.html hosted with ❤ by GitHub

In line 12 of the code snippet, I have configured the Google API with key in your case you have to replace with your Toke Key you have obtained with Google.

Immediately after this page is loaded, I am calling "getLocation()" using body onload event. In getLocation method (line 17) I am making use of HTML5 Geolocation API to identify my current location. I have set the google.maps.Marker with detected latitude and longitude to configured the Google map that is displayed bellow.

Electro 1G

Saturday, August 10, 2013

Find your current location using your Browser - HTML 5

No comments:

Post a Comment