Hi,
I'm not very familiar with JS. I need a way to add places fast and with validated data into our database. So I came up with the idea to use Google Places Autocomplete for this.
Found this - https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform#maps_places_autocomplete_addressform-javascript
and with some modifications created a nice hmtl form that does the job fine. Next step was to make it work with the embedded Caspio form. As expected, just putting the code in HTML block / footer and referencing the right Caspio fields did not work. So I'm stuck, any ideas ? Here's code I use :
<script>
let autocomplete;
let address1Field;
let address2Field;
let postalField;
function initAutocomplete() {
address1Field = document.getElementById("InsertRecordCompanyName");
address2Field = document.getElementById("InsertRecordAddress");
postalField = document.getElementById("InsertRecordPostcode");
// Create the autocomplete object, restricting the search predictions to
// addresses in the US and Canada.
autocomplete = new google.maps.places.Autocomplete(address1Field, {
componentRestrictions: { country: ["de", "fr"] },
fields: ["address_components", "name", "geometry"],
types: ["establishment"],
});
address1Field.focus();
// When the user selects an address from the drop-down, populate the
// address fields in the form.
autocomplete.addListener("place_changed", fillInAddress);
}
function fillInAddress() {
// Get the place details from the autocomplete object.
const place = autocomplete.getPlace();
var latitude = place.geometry.location.lat();
var longitude = place.geometry.location.lng();
var faddress = place.name ;
let address1 = "";
let postcode = "";
// Get each component of the address from the place details,
// and then fill-in the corresponding field on the form.
// place.address_components are google.maps.GeocoderAddressComponent objects
// which are documented at http://goo.gle/3l5i5Mr
for (const component of place.address_components) {
// @ts-ignore remove once typings fixed
const componentType = component.types[0];
switch (componentType) {
case "street_number": {
address1 = `${component.long_name} ${address1}`;
break;
}
case "route": {
address1 = `${component.short_name} ${address1}`;
break;
}
case "postal_code": {
postcode = `${component.long_name}${postcode}`;
break;
}
case "postal_code_suffix": {
postcode = `${postcode}-${component.long_name}`;
break;
}
case "locality":
document.getElementById("InsertRecordCity").value = component.long_name;
break;
case "administrative_area_level_1": {
document.getElementById("InsertRecordGPSLatitude").value = component.long_name;
break;
}
case "country":
document.getElementById("InsertRecordCountry").value = component.short_name;
break;
}
}
address1Field.value = address1;
address2Field.value = faddress;
postalField.value = postcode;
// After filling the form with address components from the Autocomplete
// prediction, set cursor focus on the second address line to encourage
// entry of subpremise information such as apartment, unit, or floor number.
address2Field.focus();
}
window.initAutocomplete = initAutocomplete;
</script>
Thanks in advance for any help.