mashtullah/mapnew.php Secret

## mapnew.php
<?php

    include('config.inc.php');
    spl_autoload_register(function ($class_name) {
        include 'classes/class.' . $class_name . '.php';
    });
    $strmarkers = Vehicles::Get_Coordinates();

 /*

	//Every minute the array (database in actual system) will have the new coordinates where the vehicle is
	$strmarkers = array (
			array('RedCar', -1.27529204, 36.81207275, 1),
			array('BlueCar', -1.28639204, 36.83317275, 2),
			array('GreenCar', -1.29749204, 36.85427275, 3)
		);
*/
	/*
	The array will be converted to Javascript array below
	*/
	 if(isset($_POST['apikey'])) {
		 header('Content-Type: application/json');
        echo json_encode(Vehicles::Get_Coordinates(), JSON_NUMERIC_CHECK);
    }
	else
	{
?>
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta http-equiv='refresh' content='360'>
    <meta charset="utf-8">
    <title>Marker Clustering</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map" style="width:800px; height: 500px"></div>
    <script>
		var map;
		var markers = [];
      function initMap() {

        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 14,
          center: {lat: -1.286790, lng: 36.822415}
        });

        setMarkers(map);
      }

      var locations = <?php echo json_encode($strmarkers, JSON_NUMERIC_CHECK); ?>;

      function setMarkers(map) {
        var image = {
          url: 'images/Truck_font_awesome.svg.png',
          size: new google.maps.Size(24, 24),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(0, 96)
        };

        for (var i = 0; i < locations.length; i++) {
          var carsarray = locations[i];
          var marker = new google.maps.Marker({
            position: {lat: carsarray[1], lng: carsarray[2]},
            map: map,
            icon: image,
            title: carsarray[0],
            zIndex: carsarray[3]
          });
          markers.push(marker);
        }
      }
     setInterval(function () {getNewLocations()}, 5000);

	function getNewLocations(){
	  var xhttp;

	  xhttp = new XMLHttpRequest();

	  xhttp.open("POST",'',true);
      xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	  xhttp.send("apikey=ANYTHING");
	  xhttp.onreadystatechange=function(){
		if (xhttp.readyState==4 && xhttp.status==200){
		  var nlocations=JSON.parse(xhttp.responseText);
		 if(nlocations!=locations)
		{
			 for (var i = 0; i < markers.length; i++) {
					markers[i].setMap(null);
				}
			locations=nlocations;
			markers = [];
			setMarkers(map);
		}
		}
	  }
	}
    </script>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBCM7-mNNkKXJRNK6arPrgB4cTfTWhZE1s&callback=initMap">
    </script>
  </body>
</html>
<?php } ?>
	<?php

	include('config.inc.php');
	spl_autoload_register(function ($class_name) {
	include 'classes/class.' . $class_name . '.php';
	});
	$strmarkers = Vehicles::Get_Coordinates();

	/*

	//Every minute the array (database in actual system) will have the new coordinates where the vehicle is
	$strmarkers = array (
	array('RedCar', -1.27529204, 36.81207275, 1),
	array('BlueCar', -1.28639204, 36.83317275, 2),
	array('GreenCar', -1.29749204, 36.85427275, 3)
	);
	*/
	/*
	The array will be converted to Javascript array below
	*/
	if(isset($_POST['apikey'])) {
	header('Content-Type: application/json');
	echo json_encode(Vehicles::Get_Coordinates(), JSON_NUMERIC_CHECK);
	}
	else
	{
	?>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta http-equiv='refresh' content='360'>
	<meta charset="utf-8">
	<title>Marker Clustering</title>
	<style>
	/* Always set the map height explicitly to define the size of the div
	* element that contains the map. */
	#map {
	height: 100%;
	}
	/* Optional: Makes the sample page fill the window. */
	html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	}
	</style>
	</head>
	<body>
	<div id="map" style="width:800px; height: 500px"></div>
	<script>
	var map;
	var markers = [];
	function initMap() {

	map = new google.maps.Map(document.getElementById('map'), {
	zoom: 14,
	center: {lat: -1.286790, lng: 36.822415}
	});

	setMarkers(map);
	}

	var locations = <?php echo json_encode($strmarkers, JSON_NUMERIC_CHECK); ?>;

	function setMarkers(map) {
	var image = {
	url: 'images/Truck_font_awesome.svg.png',
	size: new google.maps.Size(24, 24),
	origin: new google.maps.Point(0, 0),
	anchor: new google.maps.Point(0, 96)
	};

	for (var i = 0; i < locations.length; i++) {
	var carsarray = locations[i];
	var marker = new google.maps.Marker({
	position: {lat: carsarray[1], lng: carsarray[2]},
	map: map,
	icon: image,
	title: carsarray[0],
	zIndex: carsarray[3]
	});
	markers.push(marker);
	}
	}
	setInterval(function () {getNewLocations()}, 5000);

	function getNewLocations(){
	var xhttp;

	xhttp = new XMLHttpRequest();

	xhttp.open("POST",'',true);
	xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	xhttp.send("apikey=ANYTHING");
	xhttp.onreadystatechange=function(){
	if (xhttp.readyState==4 && xhttp.status==200){
	var nlocations=JSON.parse(xhttp.responseText);
	if(nlocations!=locations)
	{
	for (var i = 0; i < markers.length; i++) {
	markers[i].setMap(null);
	}
	locations=nlocations;
	markers = [];
	setMarkers(map);
	}
	}
	}
	}
	</script>
	<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
	</script>
	<script async defer
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBCM7-mNNkKXJRNK6arPrgB4cTfTWhZE1s&callback=initMap">
	</script>
	</body>
	</html>
	<?php } ?>