moneeb777/AndroidLocation-map.html

## AndroidLocation-map.html
<html>

<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
	#map {
		height: 100%;
		width: 100%;
	}
</style>
</head>

<body>
	<div id="map"></div>
	<p>This is a paragraph</p>
	<script type="text/javascript">
	var map;
	var markers = [];


	function initMap() {
			var latitude;
			var longitude;

			$.ajax({
				cache: false, // To make sure the updated file is used everytime from the url
				url: "http://localhost/resources/myCurrentLocation.json",
				dataType: "json",
				success: function(data){
					latitude = data["lat"];
					longitude = data["lng"];
					latLng = new google.maps.LatLng(latitude, longitude);
					map = new google.maps.Map(document.getElementById("map"), {
						zoom: 13,
						center: latLng
					});
					//add marker to the center of the map
					addMarker(latLng);

					//show marker on map
					showMarkers();
				}
			});

			window.setInterval(function(){
					$.ajax({
						cache: false, // To make sure the updated file is used everytime from the url
						url: "http://localhost/resources/myCurrentLocation.json",
						dataType: "json",
						success: function(data){
							console.log(data);
							var updatedLatLng = new google.maps.LatLng(data["lat"], data["lng"]);

							// clear previous markers
							deleteMarkers();

							// add updated marker and show on map
							addMarker(updatedLatLng);
							showMarkers();
						}
					});

					//$.getJSON("http://localhost/resources/myCurrentLocation.json", function(data){
					//	console.log(data);
					//	var updatedLatLng = new google.maps.LatLng(data["lat"], data["lng"]);
					//
					//	// clear previous markers
					//	deleteMarkers();
					//
					//	// add updated marker and show on map
					//	addMarker(updatedLatLng);
					//	showMarkers();
					//});
			}, 5000);
		}

	function addMarker(location) {
		var marker = new google.maps.Marker({
			position: location,
			map: map
		});
		// push marker to the array
		markers.push(marker);
	}

	// Sets the map on all markers in the array
	function setMapOnAll(map) {
		for (var i = 0; i < markers.length; i++) {
			markers[i].setMap(map);
		}
	}

	// removes the markers from the map, but keeps them in the array
	function clearMarkers() {
		setMapOnAll(null);
	}

	// Deletes all markers in the array by removing references to them
	function deleteMarkers() {
		clearMarkers();
		markers = [];
	}

	// shows any markers currently in the array
	function showMarkers() {
		setMapOnAll(map);
	}


	</script>
	<script src="https://maps.googleapis.com/maps/api/js?key=<ENTER YOUR KEY HERE>&callback=initMap" async defer></script>

</body>

</html>
	<html>

	<head>
	<meta charset="UTF-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<style type="text/css">
	#map {
	height: 100%;
	width: 100%;
	}
	</style>
	</head>

	<body>
	<div id="map"></div>
	<p>This is a paragraph</p>
	<script type="text/javascript">
	var map;
	var markers = [];


	function initMap() {
	var latitude;
	var longitude;

	$.ajax({
	cache: false, // To make sure the updated file is used everytime from the url
	url: "http://localhost/resources/myCurrentLocation.json",
	dataType: "json",
	success: function(data){
	latitude = data["lat"];
	longitude = data["lng"];
	latLng = new google.maps.LatLng(latitude, longitude);
	map = new google.maps.Map(document.getElementById("map"), {
	zoom: 13,
	center: latLng
	});
	//add marker to the center of the map
	addMarker(latLng);

	//show marker on map
	showMarkers();
	}
	});

	window.setInterval(function(){
	$.ajax({
	cache: false, // To make sure the updated file is used everytime from the url
	url: "http://localhost/resources/myCurrentLocation.json",
	dataType: "json",
	success: function(data){
	console.log(data);
	var updatedLatLng = new google.maps.LatLng(data["lat"], data["lng"]);

	// clear previous markers
	deleteMarkers();

	// add updated marker and show on map
	addMarker(updatedLatLng);
	showMarkers();
	}
	});

	//$.getJSON("http://localhost/resources/myCurrentLocation.json", function(data){
	// console.log(data);
	// var updatedLatLng = new google.maps.LatLng(data["lat"], data["lng"]);
	//
	// // clear previous markers
	// deleteMarkers();
	//
	// // add updated marker and show on map
	// addMarker(updatedLatLng);
	// showMarkers();
	//});
	}, 5000);
	}

	function addMarker(location) {
	var marker = new google.maps.Marker({
	position: location,
	map: map
	});
	// push marker to the array
	markers.push(marker);
	}

	// Sets the map on all markers in the array
	function setMapOnAll(map) {
	for (var i = 0; i < markers.length; i++) {
	markers[i].setMap(map);
	}
	}

	// removes the markers from the map, but keeps them in the array
	function clearMarkers() {
	setMapOnAll(null);
	}

	// Deletes all markers in the array by removing references to them
	function deleteMarkers() {
	clearMarkers();
	markers = [];
	}

	// shows any markers currently in the array
	function showMarkers() {
	setMapOnAll(map);
	}


	</script>
	<script src="https://maps.googleapis.com/maps/api/js?key=<ENTER YOUR KEY HERE>&callback=initMap" async defer></script>

	</body>

	</html>