INGREDIENTS:
PURPOSE:
In the two previous projects, we've seen how to store our coordinates into a file. Now we'll see how to display them on a map using Google Maps API.
This is not a realtime tracker, use it only if you already have a "yyyy-mm-dd.txt" file and you want to display it.
This project is intended for those who hasn't a SIM or an internet acces from the Linkit ONE, and want to store their positions and then display them after on a map.
Put map.php on a server, in the the same directory as your yyyy-mm-dd.txt. file and type www.yourserver.com/map.php?file=yyyy-mm-dd.txt. You'll see a map with the path you made with Linkit ONE.
SOFTWARE:
This function is used to get the file name sent through the POST request you made by puting ?file=yyyy-mm-dd.txt at the end of the url.
<?php
function getParameter($par, $default = null)
{
if (isset($_POST[$par]) && strlen($_POST[$par])) return $_POST[$par];
if (isset($_GET[$par]) && strlen($_GET[$par])) return $_GET[$par];
else return $default;
}
?>
we'll use jQuery to read the file containing our positions, so we need to download jquery and put it in the same directory.
<script language="JavaScript" type="text/javascript" src="jquery-2.1.4.min.js"></script>
In order to use Google Maps API we need an API key.
NOTE: I Created an API key for this project so you can test it. Aftert testing it, please get your own key on Google developers console and replace it in the code.
Replace
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDvq-I0pKous0qH6jiNviSpKcZIFyaQ150"></script>
with
<script src="http://maps.googleapis.com/maps/api/js?key=PutYourKeyHere"></script>
The rest of the code is quite simple.
We define polyOptions and mapProp in order to customize the map and the polyline.
Then we split the file content into lines and get latitude and longitute from each of them, and put it in the polyline.
The rest of information in each line is also available, and you can use it as you want.
I uploaded "2015-7-29.txt" which you can use to test the code.
type www.yourserver.com/map.php?file=2015-7-29.txt in your browser, and this should be the result:
Comments