I am having some problems with my current code.
I am not able to receive the results of the longitude and latitude from the address text field. Once I receive that I want to put the longitude and latitude into my database. I am not sure if that is possible because the value that it is checking(address) is in the form tag.
Any input would help... thanks
function initialize() {
var address = (document.getElementById('address'));
var autocomplete = new google.maps.places.Autocomplete(address);
autocomplete.setTypes(['geocode']);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
});
}
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) {
alert("Latitude: " + results[0].geometry.location.lat() + "Longitude: " + results[0].geometry.location.lng());
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<form method="post" action="formconnect.php" ;>
<h2>Add new location</h2>
<p>Please add your company information within this form</p>
Name:
<input type="text" name="name">
<br>Hours:
<input type="text" name="hours">
<br>Baseball:
<select name="baseball">
<option value="" selected="selected"></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="Coming Soon">Coming Soon</option>
</select>
<br>Basketball:
<select name="basketball">
<option value="" selected="selected"></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="Coming Soon">Coming Soon</option>
</select>
<br>Hockey:
<select name="hockey">
<option value="" selected="selected"></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="Coming Soon">Coming Soon</option>
</select>
<br>Golf:
<select name="golf">
<option value="" selected="selected"></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="Coming Soon">Coming Soon</option>
</select>
<br>Soccer:
<select name="soccer">
<option value="" selected="selected"></option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="Coming Soon">Coming Soon</option>
</select>
<br>Address:
<input type="text" name="address">
<br>
<input type='hidden' value='' name='lat' />
<input type='hidden' value='' name='lng' />
</br>
</br>
<input onClick="codeAddress()" type="submit"></input>
</form>Here is the formconnect.php too
$sql="INSERT INTO markers (name, hours, baseball, basketball, hockey, golf, soccer, address, lat, lng)
VALUES
('$_POST[name]','$_POST[hours]','$_POST[baseball]','$_POST[basketball]','$_POST[hockey]','$_POST[golf]','$_POST[soccer]','$_POST[address]','$_POST[lat]','$_POST[lng]')";
if (!mysqli_query($con,$sql))
{
die('Error: ' . mysqli_error($con));
}
echo "one record added";
mysqli_close($con);
</div>
You have some subtle errors in your code
One in your html, give id to each of the fields you want to reference through getElementById(), including the form itself. Like so ( I am leaving out other fields since they are unaffected),
<form method="post" action="formconnect.php" id="form1">
.
.
.
<input type="text" name="address" id="address" />
<input type='hidden' value='' name='lat' id="lat" />
<input type='hidden' value='' name='lng' id="lng" />
Let us also change the submit button to tag this has nothing to do with the problem here. Just forthe sake of html5 like so,
<button onClick="codeAddress()" type="button" name="upload" >SUBMIT</button>
Changing the type of the button to 'button' instead of 'submit' makes sure the form does not get submitted until you do so in the code.
Now the JS,
<script>
var codeAddress = function () {
geocoder = new google.maps.Geocoder();
var address = document.getElementById("address").value;
geocoder.geocode(
{'address': address},
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
document.getElementById("lat").value = results[0].geometry.location.lat();
document.getElementById("lng").value = results[0].geometry.location.lng();
document.getElementById("form1").submit();
}else{
alert("Geocode was not successful for the following reason: " + status );
}
});
};
</script>
Notice that the code that gives values to the latitude and longitude fields have been move to within the callback, specifically when the result is 'OK'. The form submission also is move there to ensure the form only gets submitted when the response from google is 'OK'
Again I guess the other function 'initialize' implements autocomplete. I changed the place where you call it. I just call it immediately it is created like so,
var initialize = function() {
var address = (document.getElementById('address'));
var autocomplete = new google.maps.places.Autocomplete(address);
autocomplete.setTypes(['geocode']);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
var address = '';
if (place.address_components) { address = [
(place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
});
}();
Notice the () operator at the end of the function ? That is what calls it immediately after declaration. Try this and let's see how things go.
Replace submit type input with a button
<button onClick="codeAddress()">submit</button>
Give your form a name
<form method="post" action="formconnect.php" name="form1">
Give your hidden inputs IDs
<input type='hidden' value='' name='lat' id='lat'>
<input type='hidden' value='' name='lng' id='lng'>
Use your function to set the value of the hidden values and submit the form
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 lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
alert("Latitude: " + results[0].geometry.location.lat() + "Longitude: " + results[0].geometry.location.lng());
document.getElementById("lat").value = lat;
document.getElementById("lng").value = lng;
document.getElementById("form1").submit();
}