App sends location data to website

Explaining the idea and first steps

Today, I had the idea to do a website which displays my current position. I searched in the App Store for an App and found one named SendLocation. This App provides an interface for sending GET requests to an server with some geometrical data. This is how the data gets send:

http://yourserver.com/yourscript.php?lat=***&lon=***&speed=***&heading=***&vacc=***&hacc=***&altitude=***&deviceid=**&battery=***&ts=***&quick=***&background=*** 

File Structure

./location.php ./data.json ./index.html 

Writing the server side script

After setting the app up and achieving the connection, I wrote an php script to get the data and store it into an JSON file to use it for example on a website. I don’t want to set up a database for this and want to have this in an accessible file, so storing it in a .json file was totally easy and fast.

<?php    if (file_exists('data.json')) {       $  current_data = file_get_contents('data.json');       $  array_data = json_decode($  current_data, true);       $  formdata = array(             'lat' => $  _GET['lat'],             'lon' => $  _GET['lon'],             'speed' => $  _GET['speed'],             'heading' => $  _GET['heading'],       );       $  array_data[] = $  formdata;       $  final_data = json_encode($  array_data);       if (file_put_contents('data.json', $  final_data)) {           echo 'Data saved successfully';       }   } else {       echo 'JSON File not exits';   }  

Access the data from the frontend

I am going on with parsing the .json file and get the data of the last entry which is my current likely position. After, with the lat and lon, I do a Google Maps API call and get my real name position and log it to the console (yet).

<!DOCTYPE html> <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->  <head>   <meta charset="utf-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <title>This is my location</title>   <meta name="description" content="">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href=""> </head>  <body>   <!--[if lt IE 7]>       <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>     <![endif]-->    <script src="https://code.jquery.com/jquery-latest.min.js"></script>   <script>     $  (document).ready(function () {        $  .ajaxSetup({         cache: false       });       $  .getJSON("data.json").then(function (json) {         // get latest position         var lastElement = json[json.length - 1];          // extract coordinates from position         var lat = lastElement.lat;         var lon = lastElement.lon;         console.log(lat);          // get name of coordinates         getAddress(lat, lon);          // get adress from google         function getAddress(latitude, longitude) {           var key = "api-key-goes-here";           $  .getJSON("https://maps.googleapis.com/maps/api/geocode/json?latlng=" + latitude + "," +             longitude + "&key=" + key,             function (json) {               console.log(json);               console.log(json.results[9].formatted_address);             });         }       });      });   </script> </body>  </html> 

Screenshots of console output

screenshot of console

My questions

  1. How can I hide the API key of the Google Map service to make it more secure?
  2. Which improvements can be made to make the GET writing the .json more safe? I though about limit the writing to 3 a day or similar.
  3. How can I hide the data.json from Google or normal visitors of my page, that only my code can access the file, is this even possible?
  4. What can I do to make the JS faster and maybe more secure?
  5. What else can be done?

Any feedback really appreciated.