I'm trying to pass a Javascript variable to PHP within the same file (Google Maps API)

Question

I'm trying to build a small site that tracks the location of a car, and stores the data in a database. At the moment, I have it all set up with a .php file, with the Javascript smooshed in - I'm really not sure if this is advisable, I'm pretty new to programming for the web.

I need the "lati" variable, within the big script, to be sent to the PHP script (bottom of the code).

The code all works, it tracks the user and submits data to the database, but the field that it populates in the database is blank :( See my code -

<!DOCTYPE html>
<?php



$username = "ishuttle";
$password = "m7elH07yO2";
$hostname = "localhost"; 
$dbname = "ishuttle_taxi-location";

//connection to the database
$conn = mysqli_connect($hostname, $username, $password, $dbname) 
  or die("Unable to connect to MySQL");
echo "Connected to MySQL<br>";


 
?>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
 height: 100%;
 margin: 0;
 padding: 100;
}
#map {
 height: 70%;
 width: 100%;
}
</style>
</head>
<body>
<center>
  <h1>DANKCATT DRIVER SIDE APP</h1>
</center>
<div id="map"></div>
<div id="capture"></div>
<script>
      // Note: This example requires that you consent to location sharing when
      // prompted by your browser. If you see the error "The Geolocation service
      // failed.", it means you probably did not give permission for the browser to
      // locate you.

 var Lati;
 var Longi;    
 Lati = 3;
 Longi = 3;
  function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
       zoom: 15
        });
 var timerID = setInterval(function() {   
        var infoWindow = new google.maps.InfoWindow({map: map});
 
        // Try HTML5 geolocation.
        if (navigator.geolocation) {
   
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
   var lati = {
              lat: position.coords.latitude
            };
   var longi = {
              lng: position.coords.longitude
            };
   console.log(lati, "Lol");
            infoWindow.setPosition(pos);
            infoWindow.setContent('lati');
            map.setCenter(pos);
          }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
  
          });
        } else {
          // Browser doesn't support Geolocation
          handleLocationError(false, infoWindow, map.getCenter());
        }
    
      function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
                              'Error: The Geolocation service failed.' :
                              'Error: Your browser doesn\'t support geolocation.');
      }
  
   //in a loop (setInterval) get coords and apply them to database

   
   }, 10 * 1000); 
   
   }
   //reverse this for the home page - drag the coords out of the db and display them on a loop
  google.maps.event.addDomListener(window, 'load', getLocation); 
   
    </script> 
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDONVV6mCAgATiPAanIbdfY55_felLGHHk&callback=initMap">
    </script>
<?php 
 
    
    $lati = $_GET['Lati'];
 $sql = "UPDATE driver_location SET Latitude = '$lati' WHERE ID_No = 1111;";
 echo "$lati";
  if ($conn->query($sql) === TRUE) {
    echo "Table MyGuests created successfully";
} else {
    echo "Error creating table: " . $conn->error;
}



?>
</body>
</html>

before inserting to database, check whether your variable get the data or not? — Muhammad Sumon Molla Selim, Jul 20 '16 at 16:06
Sorted! I used the cookies document method. Thank you very much for marking it as a dupe... would never of found that. — samgarbett, Jul 20 '16 at 16:17

score 0 · Accepted Answer · answered Jul 20 '16 at 16:02

You may want to separate your php database code into another file so that you can do an ajax post from your javascript file to the php file.

Here is an example of an ajax post using jquery. This is the javascript that would allow you to post from javascript into a php page:

 $.ajax({
        method: 'POST',
        url: 'likeComment.php',
        data: {'commentId': commentId},
        success: afterLikeComment,
        dataType: 'json'});

Learn Jquery is a site for learning jquery and here is the jquery site itself Jquery site. jQuery is a Javascript wrapper that makes doing things like selecting dom elements and posting to php much easier.

I ended up inserting the data into the cookies document, and then I'm grabbing them from the cookies with PHP :) I didn't describe that well, but hell, you know it better than me anyway. I'll look in to Jquery, for sure, I'll just have to add it to the list of web junk I'm trya learn haha — samgarbett, Jul 20 '16 at 16:19

I'm trying to pass a Javascript variable to PHP within the same file (Google Maps API)

1 Answers1