Untitled

<!DOCTYPE html >
  <head>
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>TrackMe by BrK 2016</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBYSMqIzNgDh7oY-HnMSGxEr2ow6S-K9rE&libraries=geometry"
            type="text/javascript"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

	<style type="text/css">
        html, body, #map_canvas {
            height: 100%;
            width: 100%;
            margin: 0px;
        }

        #map_canvas {
            position: relative;
        }

        .angular-google-map-container {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
        }
	</style>


	<script type="text/javascript">
    //<![CDATA[
	<?php
	// get the date from the url parameter
	$filename = "data/" . $_GET['date'] . ".txt";

	//setInterval(processData(data), 10000);
	?>

	// blue and red marker icons
    var customIcons = {
      bluePoint: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
      },
      redPoint: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
      }
    };

	// global google map object
	var map;
	var path;

	$(document).ready(function()
	{
		// initialise the map
		map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 48.251034, lng: 14.289567},
          zoom: 11
        });


		// create a path to show when the car has been
		path = new google.maps.Polyline({
          map: map,
          strokeColor: "#3333FF",
          strokeOpacity: 0.5,
          strokeWeight: 6
        });

		// retrieve the data and set callback function
		$.ajax(
		{
			type: "GET",
			url: "<?php echo $filename ?>",
			dataType: "text",
			success: function(data) {processData(data);}
		});

		setInterval(function() {
			$.ajax(
			{
				type: "GET",
				url: "<?php echo $filename ?>",
				dataType: "text",
				cache: false,
				success: function(data) {processData(data);}
			});

		}, 5000);
	});


	function processData(allText)
	{
		// split into the lines of data
		var allTextLines = allText.split(/\r\n|\n/);
		var lines = [];
		var coords = [];

		for (var i=0; i<allTextLines.length; i++)
		{
			// split the comma seperated values
			var data = allTextLines[i].split(',');

			if (data.length >= 3)
			{
				// create the point object
				var infoWindow = new google.maps.InfoWindow;

				// set the position from the data
				var point = new google.maps.LatLng(
					parseFloat(data[2]),
					parseFloat(data[1]));

				coords.push(point);

				var distance = google.maps.geometry.spherical.computeLength(coords);

				//convert to miles
				var miles = Math.round(distance/1609 * 100) / 100;
				//var km = (miles / 0.62137) / 1000;
				var html = "<b>Time: " + data[0] + "<br/>Distance: " + miles + " Miles"; // this is the timestamp
				//"<b>" + name + "</b> <br/>" + address;
				var icon = {};

				if ( i == ( allTextLines.length - 2 ) )  // this is 2 because the last line is empty
				{
					// make the last entry a red marker
					icon = customIcons["redPoint"] || {};
				}
				else
				{
					icon = customIcons["bluePoint"] || {};
				}

				// create the marker
				var marker = new google.maps.Marker(
				{
					map: map,
					position: point,
					icon: icon.icon,
				});

				// create the info window that displays the timestamp
				bindInfoWindow(marker, map, infoWindow, html);
			}
		}

		// add the coords to the path
		path.setPath(coords);
	}

    function bindInfoWindow(marker, map, infoWindow, html)
	{
		google.maps.event.addListener(marker, 'click', function() {
			infoWindow.setContent(html);
			infoWindow.open(map, marker);
		});
    }


    //]]>
  </script>

  </head>
  <body>
    <div id="map" style="width: 100%; height: 100%"></div>
  </body>

</html>