How to get submit button to enable after Google address autofill with (#22 & #48) Memberscript? Answered

• 

  A J

  • September 13, 2025 21:58

  Hey Nick Osborn, the following seems to be the base code for the newly updated Places API

  async function initMap() {
      // Request needed libraries.
      await google.maps.importLibrary("places");
      // Create the input HTML element, and append it.
      //@ts-ignore
      const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
      //@ts-ignore
      document.body.appendChild(placeAutocomplete);
      // Inject HTML UI.
      const selectedPlaceTitle = document.createElement('p');
      selectedPlaceTitle.textContent = '';
      document.body.appendChild(selectedPlaceTitle);
      const selectedPlaceInfo = document.createElement('pre');
      selectedPlaceInfo.textContent = '';
      document.body.appendChild(selectedPlaceInfo);
      // Add the gmp-placeselect listener, and display the results.
      //@ts-ignore
      placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
          const place = placePrediction.toPlace();
          await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
          selectedPlaceTitle.textContent = 'Selected Place:';
          selectedPlaceInfo.textContent = JSON.stringify(place.toJSON(), /* replacer */ null, /* space */ 2);
      });
  }
  initMap();
  

  I personally haven't tested this out since I can't pay for this api for testing purpose.

  But did you have any luck exploring this sample code and modifying the memberscript to accommodate the changes accordingly?

  0
• 

  Raquel Lopez

  • September 13, 2025 22:00

  Let me help out a little. Apparently Google created a component library to simplify communication with the API. It would require a small adaptation from the original code. Keep the form component you copied from the Webflow Memberscript the same. We'll only need to update the library and how it interacts with it.

  First you need to install the library in the pages where you want the autocomplete component to be. Make sure you remove the old one so it doesn't bloat the page with unused code

  <!-- See https://github.com/googlemaps/extended-component-library for docs and updates. -->
  <script type="module" src="https://ajax.googleapis.com/ajax/libs/@googlemaps/extended-component-library/0.6.11/index.min.js"></script>
  

  Then we'll include the loader and the places picker component in a Embed Code element. Make sure to replace the key attribute using your own API key. This part will render the autocomplete component, so make sure to place it where you want your users to interact with it

  <gmpx-api-loader key="YOUR API KEY" solution-channel="GMP_GCC_placepicker_v1"></gmpx-api-loader>
  <gmpx-place-picker placeholder="Enter a place to see its address"></gmpx-place-picker> <!-- autocomplete -->
  

  And, just above the </body> tag (in the page settings custom code) you can replace the original Memberscript custom code with this. (It looks similar, but there are some variations. Please replace all the referenced code with this)

   

  <script>
   const picker = document.querySelector('gmpx-place-picker');
   picker.addEventListener('gmpx-placechange', (e) => { 
  const place = e.target.value
  
   if (place) { 
  const addressInput = document.querySelector('input[ms-code-input="address"]'); 
  const cityInput = document.querySelector('input[ms-code-input="city"]'); 
  const regionInput = document.querySelector('input[ms-code-input="region"]'); 
  const countryInput = document.querySelector('input[ms-code-input="country"]'); 
  const postalCodeInput = document.querySelector('input[ms-code-input="postal-code"]'); 
  
  addressInput.value = extractAddress(place); 
  cityInput.value = extractCity(place); 
  regionInput.value = extractRegion(place); 
  countryInput.value = extractCountry(place); 
  postalCodeInput.value = extractPostalCode(place); 
  } 
  }); 
  
  
  function extractAddress(place) { 
  let address = ''; 
  const streetNumber = extractComponent(place, 'street_number'); 
  const route = extractComponent(place, 'route'); 
  
  if (streetNumber) { 
  address += streetNumber + ' ';
   }
  if (route) { 
  address += route;
   } 
  
  return address.trim(); 
  } 
  
  function extractComponent(place, componentType) { 
  for (const component of place.addressComponents) { 
  if (component.types.includes(componentType)) { 
  return component.longText; 
  } 
  } 
  return '';
   } 
  
  function extractCity(place) { 
  for (const component of place.addressComponents) { 
  if (component.types.includes('locality')) { 
  return component.longText; 
  } 
  } 
  return ''; 
  } 
  
  function extractRegion(place) { 
  for (const component of place.addressComponents) { 
  if (component.types.includes('administrative_area_level_1')) { 
  return component.longText; 
  } 
  } 
  return ''; 
  } 
  
  function extractCountry(place) { 
  for (const component of place.addressComponents) { 
  if (component.types.includes('country')) { 
  return component.longText; 
  } 
  } 
  return ''; 
  } 
  
  function extractPostalCode(place) { 
  for (const component of place.addressComponents) { 
  if (component.types.includes('postal_code')) { 
  return component.longText; 
  } 
  } 
  return ''; 
  } 
  </script>

   

  Et voila! You can use the Google maps api with the components library in Webflow.

  https://memberstack.slack.com/archives/C033F0SLTLK/p1750201535560519?thread_ts=1750169469.883769&cid=C033F0SLTLK

  0
• 

  Nick Osborn

  • September 13, 2025 22:19

  Awesome! Thanks Raquel Lopez that works a treat. I had to make sure I had the following APIs added to my GCC project, then all good. Maps JavaScript API, Places API (New), Places API. I've just started using Memberstack and the support is amazing, really pleased i made the choice 🙂 Thank you!

  0
• 

  Nick Osborn

  • September 13, 2025 22:20

  For anyone else using this: if you're also using Memberscript #22 to have the submit button disabled until all fields filled, I found that when all address fields are populated by the Google address lookup script, the listener for form input never fires. Add the following just after postalCodeInput.value = extractPostalCode(place);

  //Nudge form to trigger field filled script
  const form = document.querySelector('form[ms-code-submit-form]');
  form.dispatchEvent(new Event('input', { bubbles: true }));

  and it should nudge the button to be activated if all fields are filled.

  0

Please sign in to leave a comment.