Membuat auto reload pada ionic framework, google maps realtime monitoring

ada banyak cara yang digunakan untuk membuat realtime monitoring pada google map, bagi yang terbiasa memakai ionic framework mungkin mudah, tetapi bisa jadi referensi untuk agan yang minat belajar ionic dengan angular 2, est....! kembali ke focus, sesuai dengan judulnya kita akan membuat auto reload pada map,  okey langsung saja berikut scriptnya,

.controller('RealtimeCtrl', function($scope, $stateParams, $interval,$ionicHistory, deviceMobil,ionicMaterialMotion, ionicMaterialInk, $ionicLoading){
$scope.$parent.showHeader();

$ionicHistory.nextViewOptions({
      disableAnimate: true,
      disableBack: false
    });

window.setTimeout(function(){
    var mapOptions = {zoom: 14,mapTypeId: google.maps.MapTypeId.ROADMAP};
    var map = new google.maps.Map(document.getElementById("map"),mapOptions);
var marker; 
var markers = new Array();

$interval(function(){
    deviceMobil.getId($stateParams.id).success(function(data) {
      marker = new google.maps.Marker({
      position: new google.maps.LatLng(data[0]['latitude'], data[0]['longitude']),
      map: map,
 label: {text : data[0]['name'], color :'red'}, 
      icon: {
                      labelOrigin: new google.maps.Point(15, 37),
                      url: 'img/map1.png',
                      size: new google.maps.Size(30, 40),
                      origin: new google.maps.Point(0, 0),
                      anchor: new google.maps.Point(15, 37)
             }
      });  

 
markers.push(marker.getPosition());
var latlng = marker.getPosition();
map.setCenter(latlng);

    deviceMobil.getStatus(data[0]['id']).success(function(status){
var infowindow = new google.maps.InfoWindow({
   content : '<h5 style="color:#00210a;" > Time  : &nbsp; '+status[0]['time'] +' </h5>'+
         '<table style="margin:10px;">'+
 '<tr><td> Name </td><td>&nbsp; : &nbsp; </td><td>'+status[0]['car_name']+'</td></tr>'+
         '<tr><td> Speed </td><td>&nbsp; : &nbsp; </td><td>'+status[0]['speed']+' Km/Jam</td></tr>'+ 
 '<tr><td> Enggine </td><td>&nbsp; : &nbsp; </td><td>'+status[0]['enggine']+'</td></tr>'+
 '<tr><td> Unit ID </td><td>&nbsp; : &nbsp; </td><td>'+status[0]['tracker_id']+'</td></tr>'+
         '<tr><td> Status </td><td>&nbsp; : &nbsp; </td><td>'+status[0]['status_car']+'</td></tr>'+
 '<tr><td> Door </td><td>&nbsp; : &nbsp; </td><td>'+status[0]['door']+'</td></tr>'+
 '<tr><td> Lokasi </td><td>&nbsp; : &nbsp; </td><td>'+status[0]['lokasi']+'</td></tr></table>'
});
   // marker.addListener('load', function() {
          infowindow.open(map, marker);
        // });

    });

   var flightPath = new google.maps.Polyline({
          path: markers,
          geodesic: true,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
          });
        flightPath.setMap(map);
});

if( marker != 'undefined'){ marker.setMap(null);}

}, 5000);

$scope.map = map;
    }, 5000);

})

letakan script di atas pada controller,.


<ion-view view-title="Tracking">
    <ion-content ng-controller="RealtimeCtrl" >
    <div id="map" data-tap-disabled="true" ></div>
    </ion-content>

</ion-view>

letakan script di atas pada file realtime.html

okey sekian dari saya

Komentar

Postingan populer dari blog ini

cara membuat checkbox pada listview vb.net dan dapat di pilih sesuai checkbox yang dipilih

membuat menu jquery bootstrap tanpa reload page

Membuat fungsi koneksi menggunakan mysql pada vb.net menggunakan metode pengambilan data memalui file.txt