Jump to content

Google Places Autocomplete address form

Recommended Posts


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 : 


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"],
  // 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}`;

      case "route": {
        address1 = `${component.short_name} ${address1}`;
        case "postal_code": {
        postcode = `${component.long_name}${postcode}`;

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
      case "locality":
        document.getElementById("InsertRecordCity").value = component.long_name;
      case "administrative_area_level_1": {
        document.getElementById("InsertRecordGPSLatitude").value = component.long_name;
      case "country":
        document.getElementById("InsertRecordCountry").value = component.short_name;

  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.

window.initAutocomplete = initAutocomplete;



Thanks in advance for any help.


Link to comment
Share on other sites

Hi again. So I'm not giving up that easy. After some further testing I found out this behaviour :

- if I load the Google Maps API in the HTML file, it does not work at all

- if I load the API in the header of the datapage, it actually works, BUT only AFTER I click on the submit button once and the datapage is reloaded ( destination is Same Form )

Here's a link to the datapage, it's for testing purposes - https://c0ach287.caspio.com/dp/dfe06000e3abc0f66e72412d8197

Maybe I have to add a listener of some kind ? AJAX loading is enabled, responsive also.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...