Recipe - Autocomplete Address When Adding New Family

Skill level: Intermediate

Organization: The Promise Center

Requires Rock: 17.0

{# strip images & classes from the HTML but otherwise leave structure #}

To provide predictive address autocomplete (street suggestions as you type), you’ll need to:

- Add a custom JavaScript solution to the page (Pages → Page → Advanced → Page HTML or add script to the theme) that calls a geocoding API (Google Places, Mapbox, etc.).
- You need to have the Google API key in Global Attributes. The key in the script uses Rock’s Global Attribute: {{ 'Global' | Attribute:'GoogleAPIKey' }} so you don’t have to hardcode your API key.

Step 1 - Add Your Script to the Page

Go to your Add Family page (or whichever one you want autocomplete on)

One of the ways is to go to CMS → Pages → Internal Homepage → Manage → New Family

Add HTMP block and paste this script:

<script src="https://maps.googleapis.com/maps/api/js?key={{ 'Global' | Attribute:'GoogleAPIKey' }}&libraries=places"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
  // Wait for the address field to load
  var addressInput = document.querySelector("input[id$='_tbStreet1']");
  if (addressInput) {
    var autocomplete = new google.maps.places.Autocomplete(addressInput, {
      types: ['address'],
      componentRestrictions: { country: 'us' }
    });
    autocomplete.addListener('place_changed', function() {
      var place = autocomplete.getPlace();
      // Try to populate City, State, Zip if found
      if (place.address_components) {
        let cityField = document.querySelector("input[id$='_tbCity']");
        let stateField = document.querySelector("input[id$='_ddlState']");
        let zipField = document.querySelector("input[id$='_tbPostalCode']");
        place.address_components.forEach(component => {
          const type = component.types[0];
          if (type === "locality" && cityField) cityField.value = component.long_name;
          if (type === "administrative_area_level_1" && stateField) stateField.value = component.short_name;
          if (type === "postal_code" && zipField) zipField.value = component.long_name;
        });
      }
    });
  }
});
</script>

Save and test it.

Go to your Add Family page

Start typing 123 Main St

Google should start showing address suggestions

Screenshots

/GetImage.ashx?guid=a7f0b043-5755-42fb-926c-b3149d29b4ad