Google Map + Ajax + Mysql

Question

I want to take variables location, location1, location2 and put them to my base in mysql. I have problem edit google script. My target is to save 3 variables, when client want to find place.
I was looking for some advices or code in internet. I am a beginner, so sorry for basic code. Link http://mikozniak.nazwa.pl/dzis/lok.php Here is my code:

google.maps.event.addDomListener(window, 'load', intilize);
function intilize() {
    var autocomplete = new google.maps.places.Autocomplete(document.getElementById("txtautocomplete"));

    google.maps.event.addListener(autocomplete, 'place_changed', function () {



    var place = autocomplete.getPlace();

    var location = place.formatted_address;
    var location1 = place.geometry.location.lat();
    var location2 = place.geometry.location.lng();

    document.getElementById('lblresult').innerHTML = location
    document.getElementById('lblresult1').innerHTML = location1
    document.getElementById('lblresult2').innerHTML = location2
    });

};



     function ajaxFunction() {
        var ajaxRequest;  // The variable that makes Ajax possible!

        try {        
           // Opera 8.0+, Firefox, Safari
           ajaxRequest = new XMLHttpRequest();
        } catch (e) {

           // Internet Explorer Browsers
           try {
              ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
           } catch (e) {

              try {
                 ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
              } catch (e) {
                 // Something went wrong
                 alert("Your browser broke!");
                 return false;
              }
           }
        }

        // Create a function that will receive data
        // sent from the server and will update
        // div section in the same page.
        ajaxRequest.onreadystatechange = function() {

           if(ajaxRequest.readyState == 4) {
              var ajaxDisplay = document.getElementById('ajaxDiv');
              ajaxDisplay.innerHTML = ajaxRequest.responseText;
           }
        }

        // Now get the value from user and pass it to
        // server script.
        var location = document.getElementById('lblresult').value;
        var location1 = document.getElementById('lblresult1').value;
        var location2 = document.getElementById('lblresult2').value;


        queryString +=  "&location = " + location + "&location1 = " + location1 + "&location2 = " + location2;
        ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
        ajaxRequest.send(null); 
     }









</script>


<span>Miejsce:</span><input type="text" id="txtautocomplete" style="width:200px" placeholder="wpisz miejsce"/>

<label id="lblresult"></label>
<label id="lblresult1"></label>
<label id="lblresult2"></label>
 <div id = 'ajaxDiv'>Your result will display here</div>

 <?php
$dbhost = "mikozniak.nazwa.pl";
$dbuser ="user";
$dbpass = "password";
$dbname =  "name";

//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);

//Select Database
mysql_select_db($dbname) or die(mysql_error());

// Retrieve data from Query String
$loc = $_GET['location'];
$loc1 = $_GET['location1'];
$loc2 = $_GET['location2'];

// Escape User Input to help prevent SQL Injection
$loc = mysql_real_escape_string($loc);
$loc1 = mysql_real_escape_string($loc1);
$loc2 = mysql_real_escape_string($loc2);

//build query
$query = "INSERT INTO `miejsca`(`idm`, `dl`, `szr`) VALUES (NULL,$loc1,$loc2)";

//if(is_numeric($age))
  // $query .= " AND age <= $age";

//if(is_numeric($wpm))
  // $query .= " AND wpm <= $wpm";

//Execute query
$qry_result = mysql_query($query) or die(mysql_error());
/*
//Build Result String
$display_string = "<table>";
$display_string .= "<tr>";
$display_string .= "<th>Name</th>";
$display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>";
$display_string .= "<th>WPM</th>";
$display_string .= "</tr>";

// Insert a new row in the table for each person returned
while($row = mysql_fetch_array($qry_result)) {
   $display_string .= "<tr>";
   $display_string .= "<td>$row[name]</td>";
   $display_string .= "<td>$row[age]</td>";
   $display_string .= "<td>$row[sex]</td>";
   $display_string .= "<td>$row[wpm]</td>";
   $display_string .= "</tr>";
}

echo "Query: " . $query . "<br />";
$display_string .= "</table>";

echo $display_string;
*/
?>

Answer 1

You should use an Ajax request in your function intilize(). Link your request to your PHP script, pass your vars (location, location1 and location2) into the data parameter of the Ajax request, and handle them into your PHP script to save them in your database.

Something like that:

$.ajax({
   url: '/script.php',  // Your script
   type: 'POST',
   dataType: 'json',
   data: { location: location, location1: location1, location2: location2 }
});

Then, in script.php, you will be able to access location, location1 and location2 by using $_POST["location"].