I am creating a place address input form, that takes an input and autocompletes it. When an invalid address is entered, it should display an alert when the submission is clicked. I would also like for the correct input to be geocoded, otherwise if it is not valid or is incomplete, it should throw an alert that it is invalid upon submission. So far, as with my code below, it doesn't give the expected results.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCZhP_mwsdzM5X-tgmkplUj5e&libraries=places">
function initMap() {
const input = document.getElementById("location-input");
const autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener("place_changed", () => {
const place = autocomplete.getPlace();
if (!place.geometry) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
//window.alert("No details available for input: '" + place.name + "'");
swal("You have provided an Invalid address","Enter a valid Address", "warning");
return;
}
});
//Check before submit
document.getElementById('myform').addEventListener('submit', function(e){
e.preventDefault(); //prevent form submit
const place = autocomplete.getPlace(); //get place from autocomplete
if (!place || !place.geometry) { //check if valid location
swal("You have provided an Invalid address","Enter a valid Address", "warning");
return;
}
else {
// Listen for form submit
document.getElementById('myForm').addEventListener('submit', geocode);
function geocode(e){
// Prevent actual submit
e.preventDefault();
var location = document.getElementById('location-input').value;
axios.get('https://maps.googleapis.com/maps/api/geocode/json', {
params:{
address: location,
key: 'AIzaSyCZhP_mwsdzM5X-tgmkplUj5e'
}
})
.then(function(response){
// Log full response
console.log(response);
// Formatted Address
var formattedAddress = response.data.results[0].formatted_address;
// Address Components
var addressComponents = response.data.results[0].address_components;
// Get values from the input fields
var veg_planted = getInputVal('veg_planted');
// Get geometry
var lat = response.data.results[0].geometry.location.lat;
var lng = response.data.results[0].geometry.location.lng;
var coords= (formattedAddress + ": " + lat + "," + lng);
console.log(coords);
// Save messages
saveMessage(veg_planted, coords);
})
.catch(function(error){
console.log(error);
});
}
}
});
}
// Listen for Form Submit
document.getElementById('myForm').addEventListener('submit', submitForm);
// Submit Form
function submitForm(e){
e.preventDefault();
}
// Function to get form values
function getInputVal(id){
return document.getElementById(id).value;
}
// Save message to firebase
function saveMessage(veg_planted, coords){
var newMessageRef = messagesRef.push();
newMessageRef.set({
Coordinates: coords,
Veg_planted: veg_planted,
});
}<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCZhP_mwsdzM5X-tgmkplUj5&callback=initMap&libraries=places&v=weekly" defer></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<form id="myform">
<!--Address Section-->
<div class="form_item col-md-6 mg-b">
<label for="address" class="form_label">Location<span>*</span></label>
<input type="address" class="form_input" name="address" id="location-input" placeholder="Enter Address of Area where Crop was Planted" required>
</div>
<!--End of Address Section-->
</form>
<!--Link to Sweet Alert js CDN-->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="form.js"></script>
</body>
</html>
