I am trying to display real-time tracking of order on google maps. On first API hit, I am getting all data of tracking and successfully plotted on google maps.
Now I want to call API periodically (10 sec) and get new data for lat-long and add the only newly received lat-long in google maps.
It's like every 10 sec map will update and show the latest status of location - like real-time tracking.
<!DOCTYPE html>
<html>
<head>
<title>Order Tracking</title>
<meta charset="utf-8" />
<script async defer src="https://maps.googleapis.com/maps/api/js?key=DummyKEY" type="text/javascript"></script>
<script src="Scripts/jquery-2.2.3.js"></script>
<script type="text/javascript">
var latlongs = [];
var orderID = "ASDF1234";
$(document).ready(function () {
$.ajax({
url: 'http://api.xyz.com/api/Order/PostOrderDetails',
dataType: "json",
method: 'post',
data: JSON.stringify({ order_id: orderID }),
contentType: "application/json; charset=utf-8",
success: function (data) {
$(data.data.latLong).each(function (index, orderData) {
var mylatlongs = new google.maps.LatLng(orderData.latitude, orderData.longitude);
latlongs.push(mylatlongs);
});
newlatlongsLength = latlongs.length;
oldlatlongsLength = latlongs.length;
var mapProp = {
zoom: 20,
center: latlongs[latlongs.length - 1],
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('google-map-div'), mapProp);
var trackPath = new google.maps.Polyline({
path: latlongs,
icons: [{
icon: {
path: google.maps.SymbolPath.FORWARD_OPEN_ARROW
},
repeat: '175px'
}],
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
trackPath.setMap(map);
},
error: function (err) {
alert(err);
}
});
});
</script>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div id="google-map-div" style="height: 480px;">
</div>
</div>
</div>
</body>
</html>
SO how can i call API in every 10 sec and plot update lat-long on google maps?
