Geolocation with PhoneGap, Android and Eclipse

Hi,

Thanks for visiting.

This content has been moved to new domain.
http://developerswing.blogspot.com

Pease use the below URL to view the content:
Geolocation with PhoneGap, Android and Eclipse

Thanks

Hope all of you have gone through my fist post i.e Hello World! with PhoneGap, Android and Eclipse. Now in this tutorial I’m going to show you how to use PhoneGap to find your current Location using Android and  Eclipse. This app will show you your current latitude, longitude and location.

In the previous application I have not used the cordova.js, Now i’ll use that to find the current location and also I will use Google Maps API  to draw the current location on Google Maps.

Create a new android project in Eclipse or  you can modify the index.html file of your Hello World! android project.

To use Google Map you need to embed the following external style sheet and js file in index.html file.

And also you need to embed the jQuery plugin.


Next I have used the following internal style sheet.
body {
 background:#000000;
 font-family:Helvetica;
 font-size:75%;
 margin:0;
 padding:0;
 }

.btn{
 border: 2px solid #222222;
 -webkit-border-radius: 9px;
 border-radius: 9px;
 text-align:center;
 display:block;
 background:#eeeeee;
 width:280px;
 color:#222;
 text-decoration:none;
 padding:10px;
 margin:12px;
 }

 
Now add the following script.
function findMyLocation() {
 //Check the network connection
 var networkConnection = navigator.network.connection.type;
 if (networkConnection != null) {
 //Find your location
 navigator.geolocation.getCurrentPosition(success, error);
 }
 else{
 alert('Please check your network connection and try again.');
 }
 }

function success(position) {
 var latitude = position.coords.latitude;
 var longitude = position.coords.longitude;
 getDetails(latitude, longitude);
 }

function error(error) {
 alert('Some error occured please try again.');
 }

 function getDetails(latitude, longitude) {
 var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng="+latitude+","+longitude+"&sensor=false";
 $.getJSON(url, function(data) {
 var formatted_address = data['results'][0]['formatted_address'];
 htmlData = 'Latitude : ' + latitude + '
';
 htmlData += 'Longitude : ' + longitude + '
';
 htmlData += 'Location : ' + formatted_address;
 $("#location").html('<a class="btn" href="#">'+htmlData+'</a>');
 });
 }

function drawMap(latitude, longitude) {
 var centerLocation = new google.maps.LatLng(latitude, longitude);

var myOptions = {
 center: centerLocation,
 zoom: 16,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };

map_element = document.getElementById("map_canvas");
 map = new google.maps.Map(map_element, myOptions);

var marker = new google.maps.Marker({
 position: centerLocation,
 title: "My Current Location!"
 });
 marker.setMap(map);

var mapwidth = $(window).width();
 var mapheight = $(window).height();
 $("#map_canvas").height(mapheight);
 $("#map_canvas").width(mapwidth);
 google.maps.event.trigger(map, 'resize');
 }

Now add the following tags in the body part of your index.html file.

		<div align="center">
			<a href="#" class="btn">Find My Location</a>
			<p id="location"></p>
		</div>
		<div id="map_canvas"></div>


And finally your index.html will look like following.

		My Location

		body {
			background:#000000;
			font-family:Helvetica;
			font-size:75%;
			margin:0;
			padding:0;
		}

		.btn{
			border: 2px solid #222222;
			-webkit-border-radius: 9px;
			border-radius: 9px;
			text-align:center;
			display:block;
			background:#eeeeee;
			width:280px;
			color:#222;
			text-decoration:none;
			padding:10px;
			margin:12px;
		}

		function findMyLocation() {
			//Check the network connection
			var networkConnection = navigator.network.connection.type;
			if (networkConnection != null) {
				//Find your location
				navigator.geolocation.getCurrentPosition(success, error);
			}
			else{
				alert('Please check your network connection and try again.');
			}
		}

		function success(position) {
			var latitude = position.coords.latitude;
			var longitude = position.coords.longitude;
		}

		function error(error) {
			alert('Some error occured please try again.');
		}

		function getDetails(latitude, longitude) {
			var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng="+latitude+","+longitude+"&sensor=false";
			$.getJSON(url, function(data) {
				var formatted_address = data['results'][0]['formatted_address'];
				htmlData =  'Latitude : ' + latitude + '<br />';
				htmlData += 'Longitude : ' + longitude + '<br />';
				htmlData += 'Location : ' + formatted_address;
				$("#location").html('<a href="#" class="btn">'+htmlData+'</a>');
			});
		}

		function drawMap(latitude, longitude) {
			var centerLocation = new google.maps.LatLng(latitude, longitude);

			var myOptions = {
				center: centerLocation,
				zoom: 16,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};

			map_element = document.getElementById("map_canvas");
			map = new google.maps.Map(map_element, myOptions);

			var marker = new google.maps.Marker({
				position: centerLocation,
				title: "My Current Location!"
			});
			marker.setMap(map);

			var mapwidth = $(window).width();
			var mapheight = $(window).height();
			$("#map_canvas").height(mapheight);
			$("#map_canvas").width(mapwidth);
			google.maps.event.trigger(map, 'resize');
		}

		<div align="center">
			<a href="#" class="btn">Find My Location</a>
			<p id="location"></p>
		</div>
		<div id="map_canvas"></div>


Now run the project and you will get following output.