<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Complex Polylines</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
// This example creates an interactive map which constructs a
// polyline based on user clicks. Note that the polyline only appears
// once its path property contains two LatLng coordinates.
var arr = [
{
"lat": "28.6274276",
"long": "77.2792303",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": null,
"email": "manojtarkar@aol.com",
"login_status": "1",
"login_status1": "1",
"battery_status": "52",
"speed": "0",
"datess": "2014-09-29 09:29:16"
},
{
"lat": "28.6274767",
"long": "77.2791958",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "2",
"login_status1": "2",
"battery_status": "52",
"speed": "0",
"datess": "2014-09-29 09:29:36"
},
{
"lat": "28.6247675",
"long": "77.2820804",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "3",
"login_status1": "3",
"battery_status": "52",
"speed": "7",
"datess": "2014-09-29 09:31:16"
},
{
"lat": "28.6074854",
"long": "77.3138666",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "5",
"login_status1": "5",
"battery_status": "48",
"speed": "0",
"datess": "2014-09-29 09:53:01"
},
{
"lat": "28.60745493",
"long": "77.31395079",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "6",
"login_status1": "6",
"battery_status": "48",
"speed": "0",
"datess": "2014-09-29 09:53:26"
},
{
"lat": "28.6075085",
"long": "77.3137811",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "7",
"login_status1": "7",
"battery_status": "48",
"speed": "1",
"datess": "2014-09-29 09:53:45"
},
{
"lat": "28.6074187",
"long": "77.3133066",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "8",
"login_status1": "8",
"battery_status": "48",
"speed": "2",
"datess": "2014-09-29 09:53:51"
},
{
"lat": "28.6072949",
"long": "77.3133519",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "9",
"login_status1": "9",
"battery_status": "47",
"speed": "1",
"datess": "2014-09-29 09:54:06"
},
{
"lat": "28.6073035",
"long": "77.313432",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "10",
"login_status1": "10",
"battery_status": "47",
"speed": "0",
"datess": "2014-09-29 09:54:23"
},
{
"lat": "28.6053107",
"long": "77.3114165",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "11",
"login_status1": "11",
"battery_status": "47",
"speed": "0",
"datess": "2014-09-29 09:58:21"
},
{
"lat": "28.60521386",
"long": "77.31149047",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "12",
"login_status1": "12",
"battery_status": "47",
"speed": "0",
"datess": "2014-09-29 09:58:46"
},
{
"lat": "28.6051019",
"long": "77.311489",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "13",
"login_status1": "13",
"battery_status": "46",
"speed": "0",
"datess": "2014-09-29 10:00:16"
},
{
"lat": "28.6037425",
"long": "77.3113435",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "14",
"login_status1": "14",
"battery_status": "45",
"speed": "0",
"datess": "2014-09-29 10:08:05"
},
{
"lat": "28.6036925",
"long": "77.3114114",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "15",
"login_status1": "15",
"battery_status": "45",
"speed": "0",
"datess": "2014-09-29 10:09:51"
},
{
"lat": "28.6035993",
"long": "77.3115742",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "16",
"login_status1": "16",
"battery_status": "45",
"speed": "0",
"datess": "2014-09-29 10:11:48"
},
{
"lat": "28.6027843",
"long": "77.3133857",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "17",
"login_status1": "17",
"battery_status": "44",
"speed": "3",
"datess": "2014-09-29 10:13:51"
},
{
"lat": "28.5982403",
"long": "77.3195591",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "18",
"login_status1": "18",
"battery_status": "44",
"speed": "0",
"datess": "2014-09-29 10:15:46"
},
{
"lat": "28.6009844",
"long": "77.3237629",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "19",
"login_status1": "19",
"battery_status": "44",
"speed": "7",
"datess": "2014-09-29 10:17:00"
},
{
"lat": "28.6013177",
"long": "77.3267025",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "20",
"login_status1": "20",
"battery_status": "44",
"speed": "1",
"datess": "2014-09-29 10:18:26"
},
{
"lat": "28.5994629",
"long": "77.3278835",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "21",
"login_status1": "21",
"battery_status": "43",
"speed": "5",
"datess": "2014-09-29 10:19:41"
},
{
"lat": "28.5997022",
"long": "77.3282974",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "22",
"login_status1": "22",
"battery_status": "43",
"speed": "6",
"datess": "2014-09-29 10:19:48"
},
{
"lat": "28.5992721",
"long": "77.3283573",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "23",
"login_status1": "23",
"battery_status": "43",
"speed": "3",
"datess": "2014-09-29 10:20:05"
},
{
"lat": "28.5985492",
"long": "77.3287521",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "24",
"login_status1": "24",
"battery_status": "43",
"speed": "4",
"datess": "2014-09-29 10:20:16"
},
{
"lat": "28.5984969",
"long": "77.3288114",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "25",
"login_status1": "25",
"battery_status": "43",
"speed": "5",
"datess": "2014-09-29 10:20:27"
},
{
"lat": "28.5980673",
"long": "77.3293317",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "26",
"login_status1": "26",
"battery_status": "43",
"speed": "3",
"datess": "2014-09-29 10:20:31"
},
{
"lat": "28.5973854",
"long": "77.3289053",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "27",
"login_status1": "27",
"battery_status": "43",
"speed": "3",
"datess": "2014-09-29 10:21:01"
},
{
"lat": "28.5974063",
"long": "77.3279682",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "28",
"login_status1": "28",
"battery_status": "43",
"speed": "0",
"datess": "2014-09-29 10:21:32"
},
{
"lat": "28.5972676",
"long": "77.3278768",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "0",
"login_status1": "0",
"battery_status": "41",
"speed": "0",
"datess": "2014-09-29 10:42:39"
},
{
"lat": "28.5974638",
"long": "77.3279617",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "1",
"login_status1": "1",
"battery_status": "42",
"speed": "0",
"datess": "2014-09-29 10:46:00"
},
{
"lat": "28.5976756",
"long": "77.327965",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "2",
"login_status1": "2",
"battery_status": "42",
"speed": "1",
"datess": "2014-09-29 10:49:35"
},
{
"lat": "28.5974776",
"long": "77.3278948",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "3",
"login_status1": "3",
"battery_status": "42",
"speed": "0",
"datess": "2014-09-29 10:49:50"
},
{
"lat": "28.5974118",
"long": "77.3279261",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "4",
"login_status1": "4",
"battery_status": "42",
"speed": "0",
"datess": "2014-09-29 10:50:12"
},
{
"lat": "28.597432",
"long": "77.3279158",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "1",
"login_status1": "1",
"battery_status": "41",
"speed": "0",
"datess": "2014-09-29 10:55:33"
},
{
"lat": "28.596974",
"long": "77.3282866",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "2",
"login_status1": "2",
"battery_status": "34",
"speed": "0",
"datess": "2014-09-29 12:06:48"
},
{
"lat": "28.5970376",
"long": "77.328316",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "3",
"login_status1": "3",
"battery_status": "33",
"speed": "0",
"datess": "2014-09-29 12:16:43"
},
{
"lat": "28.597351",
"long": "77.3279847",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "4",
"login_status1": "4",
"battery_status": "28",
"speed": "0",
"datess": "2014-09-29 12:46:59"
},
{
"lat": "28.5974284",
"long": "77.3279426",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "5",
"login_status1": "5",
"battery_status": "28",
"speed": "0",
"datess": "2014-09-29 12:47:18"
},
{
"lat": "28.5974839",
"long": "77.32792357",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "6",
"login_status1": "6",
"battery_status": "28",
"speed": "0",
"datess": "2014-09-29 12:47:46"
},
{
"lat": "28.5974161",
"long": "77.3278876",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "7",
"login_status1": "7",
"battery_status": "26",
"speed": "0",
"datess": "2014-09-29 13:08:05"
},
{
"lat": "28.5974127",
"long": "77.3279797",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "8",
"login_status1": "8",
"battery_status": "20",
"speed": "0",
"datess": "2014-09-29 13:46:53"
},
{
"lat": "28.5975108",
"long": "77.3280922",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "9",
"login_status1": "9",
"battery_status": "20",
"speed": "0",
"datess": "2014-09-29 13:46:58"
},
{
"lat": "28.5974343",
"long": "77.3280851",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "10",
"login_status1": "10",
"battery_status": "19",
"speed": "0",
"datess": "2014-09-29 13:47:28"
},
{
"lat": "28.5974184",
"long": "77.3279352",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "11",
"login_status1": "11",
"battery_status": "19",
"speed": "0",
"datess": "2014-09-29 13:47:58"
},
{
"lat": "28.5975836",
"long": "77.3280147",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "12",
"login_status1": "12",
"battery_status": "19",
"speed": "0",
"datess": "2014-09-29 13:48:28"
},
{
"lat": "28.5975957",
"long": "77.3278841",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "13",
"login_status1": "13",
"battery_status": "18",
"speed": "0",
"datess": "2014-09-29 14:03:03"
},
{
"lat": "28.5975255",
"long": "77.3278471",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "14",
"login_status1": "14",
"battery_status": "15",
"speed": "0",
"datess": "2014-09-29 14:13:18"
},
{
"lat": "28.5974144",
"long": "77.3278695",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "15",
"login_status1": "15",
"battery_status": "13",
"speed": "0",
"datess": "2014-09-29 14:36:48"
},
{
"lat": "28.5975173",
"long": "77.3279869",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "16",
"login_status1": "16",
"battery_status": "12",
"speed": "0",
"datess": "2014-09-29 14:56:08"
},
{
"lat": "28.5973166",
"long": "77.3279748",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "1",
"login_status1": "1",
"battery_status": "11",
"speed": "1",
"datess": "2014-09-29 15:08:52"
},
{
"lat": "28.5974919",
"long": "77.3280974",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "2",
"login_status1": "2",
"battery_status": "11",
"speed": "2",
"datess": "2014-09-29 15:09:12"
},
{
"lat": "28.5976078",
"long": "77.3281418",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "3",
"login_status1": "3",
"battery_status": "11",
"speed": "1",
"datess": "2014-09-29 15:09:19"
},
{
"lat": "28.5977325",
"long": "77.3280447",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "4",
"login_status1": "4",
"battery_status": "9",
"speed": "1",
"datess": "2014-09-29 15:09:42"
},
{
"lat": "28.5979169",
"long": "77.3276796",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "5",
"login_status1": "5",
"battery_status": "9",
"speed": "1",
"datess": "2014-09-29 15:09:52"
},
{
"lat": "28.5979943",
"long": "77.3275655",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "6",
"login_status1": "6",
"battery_status": "9",
"speed": "0",
"datess": "2014-09-29 15:10:12"
},
{
"lat": "28.5981094",
"long": "77.3275088",
"name": "abc_usermanoj",
"mobile": "9999065896",
"address": "Address",
"email": "manojtarkar@aol.com",
"login_status": "7",
"login_status1": "7",
"battery_status": "8",
"speed": "1",
"datess": "2014-09-29 15:10:27"
}
];
var poly;
var map;
var marker = [];
var mard = [];
function initialize() {
var mapOptions = {
zoom: 14,
// Center the map on Chicago, USA.
center: new google.maps.LatLng(arr[0]['lat'],arr[0]['long'])
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
};
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
var interval, i = 0;
function dostuff() {
/* ... logic ... */
if(i < arr.length){
deleteMarkers();
latlongdata = new google.maps.LatLng(arr[i]['lat'],arr[i]['long']);
addLatLng(latlongdata);
}else{
clearInterval(interval);
}
i++;
}
interval = setInterval(dostuff, 1000);
// Add a listener for the click event
google.maps.event.addListener(map, 'click', addLatLng);
}
/**
* Handles click events on a map, and adds a new point to the Polyline.
* @param {google.maps.MouseEvent} event
*/
function addLatLng(latlong) {
//alert("dffd");
//alert(latlong);
var path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear.
path.push(latlong);
marker = new google.maps.Marker({
position:latlong,
map: map
});
mard.push(marker);
// Add a new marker at the new plotted point on the polyline.
}
function deleteMarkers() {
clearMarkers();
mard = [];
}
// Sets the map on all markers in the array.
function setAllMap(map) {
for (var i = 0; i < mard.length; i++) {
mard[i].setMap(map);
}
}
// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setAllMap(null);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
