Post
Ask Question

Find Geolocation With Google Map Using Cordova

Introduction
 
In this article we will create a mobile app for finding GPS (geolocation) position and learn how to integrate Google Maps in Cordova (Phone Gap) application. This provides information about the device's location like latitude and longitude with GPS. The API returns the device's approximate location.
 
Step by step to create a Mobile App using Cordova
 
Step 1: To create a Mobile App using Cordova we will open a node.js Command Prompt.
 
Step 2: Now we will go to specific directory where we want to create the Mobile App.
 
Step 3: Now we will create a new Cordova Project using the following command:

"cordova create Geo com.demo.Geo Geolocation"
 
 
Here,
  1. The first argument Geo specifies directory name that is generated for our project.
  2. The second argument com.demo.Geo provides our project with a reverse-style identifier.
  3. The third argument Geolocation provides the application's display name.
Step 4: Now a project folder will be created.
 
 
Step 5: Now we will go to the project directory using the following command:

"cd Geo"
 
 

Step 6: Now before building the project, we need to specify a set of target platforms. To add a different platform we will use the following command:
 
For Android:
  1. cordova platform add android  
For Windows Phone 8: 
  1. cordova platform add wp8  
For BB10: 
  1. cordova platform add blackberry10   
For Windows:
  1. cordova platform add windows  
For Amazon‐FireOS:
  1. cordova platform add amazon‐fireos  
For FireFoxOS: 
  1. cordova platform add firefoxos  
Now here we will add platform for Android.

 

In this project folder Android platform will be added. 
 
 
 
Step 7: Now for finding geolocation we will add Geolocation Plugin using the following command:

"cordova plugin add org.apache.cordova.geolocation"
 
 

In this project folder geolocation plugin will be added.
  
 
There are three methods in geolocation plugin and we will understand these by example.
  1. geolocation.getCurrentPosition :This method returns the device's current GPS position.

    Syntax:
    1. navigator.geolocation.getCurrentPosition(geolocationSuccess,[geolocationError],[geolocationOptions]);  
    Parameters: 

    geolocationSuccess: The callback that is passed the current position.

    geolocationError: (Optional) The callback that executes if an error occurs.

    geolocationOptions: (Optional) The geolocation options.

  2. geolocation.watchPosition: This method continuously watch divice's current GPS position.

    Syntax    :
    1. var watchId = navigator.geolocation.watchPosition(geolocationSuccess,[geolocationError],[geolocationOptions]);    
  3. geolocation.clearWatch: Stop watching for changes to the device's location.

    Syntax:
    1. navigator.geolocation.clearWatch(watchID);    
    Parameters:

    watchID    : The id of the watchPosition interval to clear. 
Step 8: Now we will go to the project directory and to the www folder and for writing the code we will open index.html (C:\Geo\www\index.html) in any editor.

Now we will create Main Page(index.html) of the Cordova Application by writing the following code: 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Geo Location</title>  
  6. </head>  
  7. <body>  
  8.     <h2>Current Location:</h2>  
  9.     <div id="geolocation"></div>  
  10.     <h2>Location Map:</h2>  
  11.     <div id="map-canvas"></div>  
  12. </body>  
  13. </html>  
 Now we will also write some styles for the html document inside the <head></head> section: 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="UTF-8">  
  6.     <title>Geo Location</title>  
  7.     <style type="text/css">  
  8.         html {  
  9.             height: 100%;  
  10.         }  
  11.           
  12.         body {  
  13.             height: 100%;  
  14.             margin: 0;  
  15.             padding-top: 5px;  
  16.             color: #ff0000;  
  17.         }  
  18.           
  19.         body h2 {  
  20.             color: #0026ff;  
  21.         }  
  22.          
  23.         #map-canvas {  
  24.             height: 100%;  
  25.         }  
  26.     </style>  
  27. </head>  
  28.   
  29. <body>  
  30.     <h2>Current Location:</h2>  
  31.     <div id="geolocation"></div>  
  32.     <h2>Location Map:</h2>  
  33.     <div id="map-canvas"></div>  
  34. </body>  
  35.   
  36. </html>  
Now we want to add Google Map in our application so we will add Google Maps API it is a JavaScript library.

We will add the following script inside the <head></head> tag. 
  1. <script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"></script>  
Now we will find current position of device, display latitude and longitude and integrate Google Maps in our Cordova application by writing the following script inside the <head></head> tag:
  1. <script type="text/javascript">  
  2.     // Find current position of divice with GPS(latitude,longitude)    
  3.     navigator.geolocation.getCurrentPosition(onSuccess, onerror);  
  4.   
  5.     function onSuccess(position)  
  6.     {  
  7.         var element = document.getElementById('geolocation');  
  8.         element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' + 'Longitude: ' + position.coords.longitude + '<br />' + '<hr />' + element.innerHTML;  
  9.         var lat = position.coords.latitude;  
  10.         var lang = position.coords.longitude;  
  11.         var myLatlng = new google.maps.LatLng(lat, lang);  
  12.         var mapOptions = {  
  13.                 zoom: 4,  
  14.                 center: myLatlng  
  15.             }  
  16.             //Creates a new map inside the <div> element    
  17.         var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);  
  18.         //A marker identifies a location on a map.    
  19.         var marker = new google.maps.Marker(  
  20.         {  
  21.             position: myLatlng,  
  22.             map: map  
  23.         });  
  24.     }  
  25.   
  26.     function onError(error)  
  27.     {  
  28.         alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');  
  29.     }  
  30.     //Continuously watch divice's current GPS position    
  31.     var watchID = navigator.geolocation.watchPosition(onSuccess, onError,  
  32.     {  
  33.         timeout: 3000  
  34.     });  
  35.     //Simply passes the indicated event to the browser, which handles it according to the browser's DOM event model.    
  36.     google.maps.event.addDomListener(window, 'load', onSuccess);  
  37. </script>  
Step 9: Build Application

Now we will build this application for an Android phone only using the following command in Node.Js command prompt.

C:\Geo>cordova build android 
 
Step 10: To run this application in an emulator we will use the following command. 

C:\Geo>cordova emulate android 
 
Now after building the application we will get .apk file at:

C:\Geo\platforms\android\ant-build\CordovaApp-debug.apk 
 
 
Now we will use this .apk file in Android mobile and see our Geolocation Mobile App output.

Note: We must have internet connection and mobile GPS on.
 
Output:
 
Geolocation App Icon,
 
 
 
Using this App we can see current position of device and find latitude and longitude.
 
 
 
Using this App we can see current position in Google Map
 
 
 Using this App we can watch continuous changes in current GPS location of device.
 
 

Read more articles on Android:


Similar Articles