Displaying location on map using javascript

See more:

Javascript

geolocation

Hi,

I have an application which captures the location of a tablet every set interval of time and stores them in a database.
I then wrote a simple javascript script to display those locations on a map and trace the route of the tablet.

However, besides displaying the appropriate route of the tablet it also displays alternate routes and a straight line from start to finish.

Below is my javascript code.

Any help would be most welcome.

What I have tried:

var markers = [<br />
					{<br />
						"title": '16:58',<br />
						"lat": '-20.1672799707871',<br />
						"lng": '57.5069032768888',<br />
						"description": '16:58'<br />
					}<br />
				,<br />
					{<br />
						"title": '17:00',<br />
						"lat": '-20.170670813731',<br />
						"lng": '57.5032840805832',<br />
						"description": '17:00'<br />
					}<br />
				,<br />
					{<br />
						"title": '17:01',<br />
						"lat": '-20.1712602810727',<br />
						"lng": '57.502503950733',<br />
						"description": '17:01'<br />
					}<br />
				,	<br />
					{<br />
						"title": '17:04',<br />
						"lat": '-20.166955925865',<br />
						"lng": '57.4892648490453',<br />
						"description": '17:04'<br />
					}<br />
				,<br />
					{<br />
						"title": '17:07',<br />
						"lat": '-20.1761991610139',<br />
						"lng": '57.4822988090064',<br />
						"description": '17:07'<br />
					}<br />
				,<br />
					{<br />
						"title": '17:10',<br />
						"lat": '-20.1961753165077',<br />
						"lng": '57.4824656045157',<br />
						"description": '17:10'<br />
					}<br />
				,<br />
					{<br />
						"title": '17:13',<br />
						"lat": '-20.220309405427',<br />
						"lng": '57.487469732469',<br />
						"description": '17:13'<br />
					}<br />
				,<br />
					{<br />
						"title": '17:16',<br />
						"lat": '-20.2342861943874',<br />
						"lng": '57.4996038055266',<br />
						"description": '17:16'<br />
					}<br />
				,	<br />
					{<br />
						"title": '17:19',<br />
						"lat": '-20.2419951166671',<br />
						"lng": '57.4924547310887',<br />
						"description": '17:19'<br />
					}<br />
				,<br />
					{<br />
						"title": '17:22',<br />
						"lat": '-20.2418197976697',<br />
						"lng": '57.4838445649936',<br />
						"description": '17:22'<br />
					}<br />
				,<br />
					{<br />
						"title": '17:25',<br />
						"lat": '-20.2417927882899',<br />
						"lng": '57.4821667460937',<br />
						"description": '17:25'<br />
					}<br />
				,<br />
					{<br />
						"title": '17:28',<br />
						"lat": '-20.244868944177',<br />
						"lng": '57.4761929726994',<br />
						"description": '17:28'<br />
					}<br />
				,	<br />
					{<br />
						"title": '17:31',<br />
						"lat": '-20.2494147017248',<br />
						"lng": '57.4751336596163',<br />
						"description": '17:31'<br />
					}<br />
				,<br />
					{<br />
						"title": '17:34',<br />
						"lat": '-20.2529453707358',<br />
						"lng": '57.4698643969492',<br />
						"description": '17:34'<br />
					}<br />
				,<br />
					{<br />
						"title": '17:37',<br />
						"lat": '-20.2515653985995',<br />
						"lng": '57.4694827601669',<br />
						"description": '17:37'<br />
					}<br />
			];<br />
			<br />
			window.onload = function () {<br />
				var mapOptions = {<br />
					center: new google.maps.LatLng(markers[0].lat, markers[0].lng),<br />
					zoom: 10,<br />
					mapTypeId: google.maps.MapTypeId.ROADMAP<br />
				};<br />
				<br />
				var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);<br />
				var infoWindow = new google.maps.InfoWindow();<br />
				var lat_lng = new Array();<br />
				var latlngbounds = new google.maps.LatLngBounds();<br />
				<br />
				for (i = 0; i < markers.length; i++) {<br />
					var data = markers[i]<br />
					var myLatlng = new google.maps.LatLng(data.lat, data.lng);<br />
					<br />
					lat_lng.push(myLatlng);<br />
					<br />
					var marker = new google.maps.Marker({<br />
						position: myLatlng,<br />
						map: map,<br />
						title: data.title<br />
					});<br />
					latlngbounds.extend(marker.position);<br />
					(function (marker, data) {<br />
						google.maps.event.addListener(marker, "click", function (e) {<br />
							infoWindow.setContent(data.description);<br />
							infoWindow.open(map, marker);<br />
						});<br />
					})(marker, data);<br />
				}<br />
				<br />
				map.setCenter(latlngbounds.getCenter());<br />
				map.fitBounds(latlngbounds);<br />
		 <br />
				//***********ROUTING****************//<br />
		 <br />
				//Initialize the Path Array<br />
				var path = new google.maps.MVCArray();<br />
		 <br />
				//Initialize the Direction Service<br />
				var service = new google.maps.DirectionsService();<br />
		 <br />
				//Set the Path Stroke Color<br />
				var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });<br />
		 <br />
				//Loop and Draw Path Route between the Points on MAP<br />
				for (var i = 0; i < lat_lng.length; i++) {<br />
					if ((i + 1) < lat_lng.length) {<br />
						var src = lat_lng[i];<br />
						var des = lat_lng[i + 1];<br />
						<br />
						path.push(src);<br />
						poly.setPath(path);<br />
						<br />
						service.route({<br />
							origin: src,<br />
							destination: des,<br />
							travelMode: google.maps.DirectionsTravelMode.DRIVING<br />
						}, function (result, status) {<br />
							if (status == google.maps.DirectionsStatus.OK) {<br />
								for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {<br />
									path.push(result.routes[0].overview_path[i]);<br />
								}<br />
							}<br />
						});<br />
					}<br />
				}<br />
			}