Geolocation with PhoneGap, Android and Eclipse

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.


<link href="https://developers.google.com/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />


<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.


<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.


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.


<!--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.

Author Description

Angular 6 tutorials - Learn basics of Angular

The world of Angular

Basics of Angular 6 - ng6