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 javascript file in index.html file.
<![CDATA[
<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
]]>
<![CDATA[
<script charset="utf-8" type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
]]>
And also you need to embed the jQuery plugin.
<![CDATA[
<script charset="utf-8" type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
]]>
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.
<![CDATA[
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 occurred please try again.');
}
function getDetails(latitude, longitude) {
var url = "https://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" onclick="drawMap(' + latitude + ', ' + longitude + ');" 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');
}
<pre><code language="javascript"></code></pre>
<br/>
Now add the following tags in the body part of your index.html file.
<xmp style="display:none;">
<body>
<div align="center">
<a href="#" class="btn" onclick="findMyLocation();">Find My Location</a>
<p id="location"></p>
</div>
<div id="map_canvas"></div>
</body>
]]>
And finally your index.html will look like following.
<![CDATA[
<!--DOCTYPE html-->
<html xml:lang="en" lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">
<title>My Location</title>
<link rel="stylesheet" href="https://developers.google.com/maps/documentation/javascript/examples/default.css" type="text/css">
</link>
<script type="text/javascript" charset="utf-8" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.7.0.js"></script>
<style>
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;
}
</style>
<script type="text/javascript" charset="utf-8">
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 = "https://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" onclick="drawMap(' + latitude + ', ' + longitude + ');">' + 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');
}
</script>
</head>
<body>
<div align="center">
<a href="#" class="btn" onclick="findMyLocation();">Find My Location</a>
<p id="location"></p>
</div>
<div id="map_canvas"></div>
</body>
</html>
]]>
Now run the project and you will get following output.
No comments:
Post a Comment