Membuat history tracking pada google maps Mobile android

salam, selamat beraktivitas berjumpa kembali dengan tema yang hangat tetapi tidak pernah bosan dibahas, kali ini saya akan berbagi cara membuat history tracking pada google maps.,

kali ini saya membuat versi mobile, menggunakan framework yang sedang banyak digunakan yaitu ionic framework, dan menggunakan apache cordova sebagai compiler, pada pembahasan sebelumnya saya sudah terangkan bagaimana install cordova, sekarang kita kembali ke pembahasan selanjutnya,
sesuai dengan judulnya, okey langsung saja,


letakan script berikut pada controller.js

.controller('HistoryCtrl', function($scope, $stateParams, $timeout, ionicMaterialInk, ionicMaterialMotion, deviceMobil, $ionicPopup){
    $scope.$parent.showHeader();
function formatDate(data){
    var date = new Date(data);
    var zp = function (val){return (val <= 9 ? '0' + val : '' + val);}
    var zp2 = function(val){return val <= 99? (val <=9? '00' + val : '0' + val) : ('' + val ) ;}
    var d = date.getDate();
    var m = date.getMonth() + 1;
    var y = date.getFullYear();
    var h = date.getHours();
    var min = date.getMinutes();
    var s = date.getSeconds();
    return '' + y + '-' + zp(m) + '-' + zp(d) + ' ' + zp(h) + ':' + zp(min);
    }
    deviceMobil.getAll().success(function(data){
 $scope.data_menu = [];
 for(var i = 0; i < data.data_menu.length; i++){
    $scope.data_menu.push({"name_car" :data.data_menu[i]['name_car'], 
                           "device_id":data.data_menu[i]['device_id'],
"id_tracker" :data.data_menu[i]['id_tracker']
     });
   }
    }).error(function(){
var alertPopup = $ionicPopup.alert({
         title: 'Pesan ..!',
 template: 'Internet Not Connected !'
});
});

function animateCircle(line) {
                var count = 0;
                window.setInterval(function() {
                    count = (count + 1) % 200;
                    var icons = line.get('icons');
                    icons[0].offset = (count / 2) + '%';
                    line.set('icons', icons);
                    }, 50);
            }

$scope.data_history = function(){
deviceMobil.getHistory($scope.device_id, formatDate($scope.datetimeValue)).success(function(data){
             var mapOptions = {center:new google.maps.LatLng(data[0]['latitude'],data[0]['longitude']), zoom: 10,mapTypeId: google.maps.MapTypeId.ROADMAP};
             var map = new google.maps.Map(document.getElementById("map"), mapOptions);
 
        var marker = new google.maps.Marker({position:new google.maps.LatLng(data[0]['latitude'],data[0]['longitude']),map:map,icon:'img/map1.png'});
    marker = new google.maps.Marker({position:new google.maps.LatLng(data[data.length-1]['latitude'],data[data.length-1]['longitude']), map:map});
var infowindow = new google.maps.InfoWindow({content : data[0]['jam']});
                 infowindow.open(map, marker);
    var lineSymbol = {
                 path: google.maps.SymbolPath.CIRCLE,
                 scale: 6,  
        fillColor: '#393',
                 strokeColor: '#000',
                 fillOpacity: 1
                 };
var coordinat = [];
for(var i = 0; i < data.length; i++){
var point = new google.maps.LatLng(data[i]['latitude'],data[i]['longitude']);
    coordinat.push(point);
   }
        var line = new google.maps.Polyline({
                        path: coordinat,
strokeColor: '#FF0000',
                        icons: [{
                        icon: lineSymbol,
                        offset: '100%'
                        }],
                        map: map
                       });
  
animateCircle(line);

 
                $scope.map = map;
  
}).error(function() {
var alertPopup = $ionicPopup.alert({
title: 'failed!',
template: 'data tidak di temukan'
});
});
}
})

jangan lupa di sesuaikan dengan program agan,. berikutnya letakan script pada file yang akan di panggil oleh controller berinama saja History.html

<ion-view view-title="History">
    <ion-content class="animate-fade-slide-in" ng-controller="HistoryCtrl">
<div class = "list" style="background:darkblue;"><br/>
    <label class = "item-input item-select item-stable" style="margin:20px;background:#fff;">
      <div class = "input-label">
        Name Vehicle
      </div>
      <select ng-model="device_id">
         <option value=""> &nbsp; &nbsp; Options &nbsp; &nbsp; </option>
         <option ng-repeat="data in data_menu | orderBy:'name_car'" value="{{data.device_id}}">{{data.name_car}}</option>
      </select>
    </label>
    <div class = "item-input" ion-datetime-picker ng-model="datetimeValue" style="margin:20px;background:#fff;">
    DateTime : &nbsp; 
<input type="text" value='{{datetimeValue| date: "yyyy-MM-dd H:mm"}}' placeholder='{{datetimeValue| date: "yyyy-MM-dd H:mm"}}'>
    </div>
    <div class="padding">
    <button ng-click="data_history()" class="button button-block" onclick="this.style.background='#000';" onmouseout="this.style.background='#fff';" > play </button>
    </div>
</div>
<div id="map" data-tap-disabled="true" style="height:70%"></div>
    </ion-content>
</ion-view>

okey sekian dari saya,. semoga membantu,..

keterengan lebih lanjut tinggalkan command