Tutorial geolocation cordova plugin and google map API V3 for iOS and android

It is very easy to detect device’s current location (latitude and longitude) with Cordova org.apache.cordova.geolocation plugin. This plugins detect current location based on GPS, IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs. But there is no guarantee that location will be detected precisely enough.

Create project com.revivalx.cordova.geolocation and install geolocation cordova plugin into your cordova project.

cordova plugin add org.apache.cordova.geolocation

Open up your config.xml file and replace with this code.

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.revivalx.cordova.geolocation" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>GeolocationCordova</name>
    <description>
        This source code provides example about the device's location, such as latitude and longitude.
    </description>
    <author email="nurdinnorazanservices@gmail.com" href="http://revivalx.com">
        Mohammad Nurdin bin Norazan
    </author>
    <content src="index.html" />
    <access origin="*" />
</widget>

After that you need to add iOS and android platform into your cordova project using this command. If you using windows, you can’t create iOS platform because you need iOS SDK installed in your machine.

cordova platform add iOS
cordova platform add android
cordova platform add

cordova platform add

Open up index.html file in www folder. Replace with this code.

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Geolocation Cordova Plugin</title>
    </head>
    <body>
        
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

Then open up index.js file in js folder add replace all with this code

var onSuccess = function(position) {
    alert('Latitude: '          + position.coords.latitude          + '\n' +
          'Longitude: '         + position.coords.longitude         + '\n' +
          'Altitude: '          + position.coords.altitude          + '\n' +
          'Accuracy: '          + position.coords.accuracy          + '\n' +
          'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
          'Heading: '           + position.coords.heading           + '\n' +
          'Speed: '             + position.coords.speed             + '\n' +
          'Timestamp: '         + position.timestamp                + '\n');
};

function onError(error) {
    alert('code: '    + error.code    + '\n' +
          'message: ' + error.message + '\n');
}

navigator.geolocation.getCurrentPosition(onSuccess, onError);

Build and run the app. I hope you enjoy this article. You may download the source code here, https://github.com/datomnurdin/com.revivalx.cordova.geolocation .

One thought on “Tutorial geolocation cordova plugin and google map API V3 for iOS and android

Leave a Reply

Your email address will not be published. Required fields are marked *