I'm trying to geocode a user submitted address and store it into a database. The form calls a php file where javascript retrieves the address and geocodes it. Then the lat and lng values are passed to php and stored in a database, however the only values in the database are zeros.
The HTML file:
<html>
<body>
<form action="registerEvent.php" id="form" method="post">
<input id="address" name="address" placeholder="Adrese" type="text">
<button type="submit" id="submit">Send</button>
</form>
</body>
</html>
registerEvent.php:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var geocoder;
var inputLat;
var inputLng;
function codeAddress() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var inputLat = event.latLng.lat();
var inputLng = event.latLng.lng();
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function passvariable() {
window.location.href = "registerEvent.php?lat=" + inputLat;
window.location.href = "registerEvent.php?lng=" + inputLng;
}
codeAddress();
passvariable();
</script>
<?php
require("dbinfo.php");
$connection=mysqli_connect ('localhost', $username, $password);
if (!$connection) {
die('Not connected : ' . mysql_error());
}
$db_selected = mysqli_select_db($connection, $database);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}
$lat =$_GET['inputLat'];
$lng =$_GET['inputLng'];
$sql = "INSERT INTO sometable (lat, lng)
VALUES ('$lat', '$lng')";
if (!mysqli_query($connection,$sql)) {
die('Error: ' . mysqli_error($connection));
};
mysqli_close($connection);
?>
You are calling window.location.href twice and the variables seem incorrect in the PHP part ($_GET['inputLat'] instead of lat, and $_GET['inputLong'] instead of lon)
If the HTML file is a separate file, then you need to get the address in a different way: replace
var address = document.getElementById('address').value;
with
var address = "<?php echo $_POST['address']; ?>"
The JS functions should look more like this
<script src="https://maps.googleapis.com/maps/api/jsv=3.exp&signed_in=true">
</script>
<script>
var geocoder;
var inputLat;
var inputLng;
function codeAddress() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var inputLat = event.latLng.lat();
var inputLng = event.latLng.lng();
window.location.href = "registerEvent.php?lat=" + inputLat + "&lng=" + inputLng;
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
codeAddress();
</script>
And the PHP part:
// ...
$lat =$_GET['lat'];
$lng =$_GET['lng'];
if (!empty($lat) && !empty($lng)) {
$sql = "INSERT INTO sometable (lat, lng) VALUES ('$lat', '$lng')";
if (!mysqli_query($connection,$sql)) {
die('Error: ' . mysqli_error($connection));
};
}
mysqli_close($connection);
If everything is in the same file, the form button should be changed to something like this:
<button type="button" id="submit" onclick="codeAddress()">Send</button>
Once, a used this snippet to get lat/lng from an address, all in PHP (old API):
$address = "......";
$json = file_get_contents("http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address=".urlencode($address));
$json = json_decode($json);
if ($json->status == "OK")
return $json->results[0]->geometry->location;
the javascript is looking for a value
var address = document.getElementById('address').value;
in the html input and there is no value:
<input id="address" name="address" placeholder="Adrese" type="text">
In your code the form do a POST to the PHP page but you post only the address field without getting any coord from google api.
Plus the API you are calling gives a complex return type, you should inspect it... to get lat and lng you have to choose one element from array and check what's in geometry.location... (You may check: https://developers.google.com/maps/documentation/javascript/reference#GeocoderResult)
So, first, do an ajax call to get coords before posting the form.
Just add onsubmit="return codeAddress();" then add in your codeAddress function a return false; to prevent default action (prevent submit of form itself) and send data to registerEvent.php by GET with a function like this.
In your HTML:
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script type="text/javascript">
function codeAddress() {
var geocoder = new google.maps.Geocoder();
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var inputLat = results[0].geometry.location.lat();
var inputLng = results[0].geometry.location.lng();
window.location.href = "registerEvent.php?inputLat=" + inputLat + "&inputLng=" + inputLng;
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
return false;
}
</script>
</head>
<body>
<form action="registerEvent.php" id="form" method="post" onsubmit="return codeAddress()">
<input id="address" name="address" placeholder="Adrese" type="text">
<button type="submit" id="submit">Send</button>
</form>
</body>
</html>
In your PHP:
<?php
require("dbinfo.php");
$connection=mysqli_connect ('localhost', $username, $password);
if (!$connection) {
die('Not connected : ' . mysql_error());
}
$db_selected = mysqli_select_db($connection, $database);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}
$lat =$_GET['inputLat'];
$lng =$_GET['inputLng'];
$sql = "INSERT INTO sometable (lat, lng) VALUES ('$lat', '$lng')";
if (!mysqli_query($connection,$sql)) {
die('Error: ' . mysqli_error($connection));
};
mysqli_close($connection);
?>