Sample Google Maps Geo Location Tracking

This tutorial provides you an example of integration of Google Maps and Dynamic Tracking of the Devices Location with Phonegap. This tutorial should work on Android, Windows & iOS mobile devices. This tutorial will only work on a mobile device from a compiled mobile application. It will not work on a mobile devices browser. The reason being is because it integrates cordova native functions.

Google Maps & Phone Gap

 

The below metagtag helps setup some of the function of the page it self. If you notice the name is set to viewport which means the current page. Where you see content="initial-scale3=1.0" is setting up the page to not load in a zoomed in state. The last parameter in the meta tage is user-scalable="no" which actually stops the user from being able to pinch and pull the page to zoom in and out if being viewed in a mobile webpage, but because this tutorial will must be compiled into an actual Mobile Application Suitable for the Target Device you will not see any Google Map Load when trying to view this tutorial in a web browser even if it's a mobile web browser on a mobile device nothing will happen untill it is actually installed as a mobile application.

 

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />



The below snippet you copy and paste in your Head Tag. This allows you to import the Google Map. The styles layout the size of the map 

    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 50%; width: 50% }
    </style>


 The code below allows you to connect to the Google API V3 to allow the actual import of the map and ensures it is connected to your google account to view and monitor statistics.

  1. Where you see Your_API_KEY you must put the API KEY of the Google Application you want to use from your Google API Console
  2.  Where you see set_to_true_or_false actually put either true or  false  or the script will not work correctly.

 

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=Your_API_KEY&sensor=set_to_true_or_false">
    </script>

Now it's time to load the Phonegap Javascript

  <script src="/phonegap.js"></script>

We now setup the device to fully watch the geo location of the device and report it back to the Application, Display and Display it on the Map. There is also a function that provides an error if the device cannot connect to the Google API for what ever reason.

  <!--PhoneGap Watch Geolocation -->
 <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    var watchID = null;

    // Cordova is ready
    //
    function onDeviceReady() {
        // Throw an error if no update is received every 30 seconds
        var options = { timeout: 30000 };
        watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
    }

    // onSuccess Geolocation
    //
    function onSuccess(position) {
      var mapOptions = {
          center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);  
      var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Hello World!"      
    }

    // onError Callback receives a PositionError object
    //
    function onError(error) {
        alert('code: '    + error.code    + '\n' +
              'message: ' + error.message + '\n');
    }

    </script>


As a paramater of your Body Tag add in the onLoad="onSuccess()"function to make the page load the googleMap when the page is actually opened and the device is ready.

<body onLoad="onSuccess()>

Here is where the Google Map will Actually be displayed!

<div id="map_canvas" style="width:100%; height:100%"></div>

Here is the Full Code all Together

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=Your_API_KEY&sensor=set_to_true_or_false">
    </script>
        <script src="/phonegap.js"></script>
    <!--PhoneGap Watch Geolocation -->
  <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    var watchID = null;

    // Cordova is ready
    //
    function onDeviceReady() {
        // Throw an error if no update is received every 30 seconds
        var options = { timeout: 30000 };
        watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
    }

    // onSuccess Geolocation
    //
    function onSuccess(position) {
                        var mapOptions = {
          center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);        
                        var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Hello World!"                      
    }

    // onError Callback receives a PositionError object
    //
    function onError(error) {
        alert('code: '    + error.code    + '\n' +
              'message: ' + error.message + '\n');
    }

    </script>
    
      

  </head>
  <body onLoad="onSuccess()">
    <div id="map_canvas" style="width:100%; height:100%"></div>

  </body>