pega-custom-ui-component-step-3.html

<!-- replace "YOUR_API_KEY" with the API key you obtained from Google -->
<% String googleAPIKey = "YOUR_API_KEY"; %>
  
<pega:save name="componentID" ref="Param.pzComponentId" />
<% String componentID = tools.getSaveValue("componentID"); %>
<% String containerID = "address-autocomplete_" + componentID; %>

  
<script>
  var unneededElement = document.getElementById('speciality_<%= componentID %>')
  unneededElement.parentNode.removeChild(unneededElement)
</script>

<div id="<%= containerID %>">

<div id="locationField">
  <input id="autocomplete" placeholder="Enter your address" type="text"></input>
</div>

<table id="address">
  <tr>
    <td class="label">Street address</td>
    <td class="wideField" colspan="3"><input id="full_street_address" disabled="true" type="text"></input>
    </td>
  </tr>

  <tr>
    <td class="label">City</td>
      <td class="wideField" colspan="3">
        <input type="text" id="locality" disabled="true"></input>
      </td>
  </tr>
  <tr>

    <td class="label">State</td>
      <td class="slimField">
        <input type="text" id="administrative_area_level_1" disabled="true">
      </td>
      <td class="label">Zip code</td>
      <td class="wideField"><input type="text" id="postal_code" disabled="true"></input>
      </td>
  </tr>

    <tr>
      <td class="label">Country</td>
      <td class="wideField" colspan="3"><input type="text" id="country" disabled="true"></input>
      </td>
    </tr>
</table>
</div>


<style>
  #address td {
    padding: 15px 0px 5px 10px
  }

  #address, #<%= containerID %> input {
    width: 100%
  }
</style>

<script>
  // This example displays an address form, using the autocomplete feature
  // of the Google Places API to help users fill in the information.

  // This example requires the Places library. Include the libraries=places
  // parameter when you first load the API. For example:

  var placeSearch, autocomplete;
  var componentForm = {
    full_street_address: 'short_name',
    locality: 'long_name',
    administrative_area_level_1: 'short_name',
    country: 'long_name',
    postal_code: 'short_name'
  };

  var components = {
    street_number: 'short_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'short_name',
    country: 'long_name',
    postal_code: 'short_name'
  };

  function initAutocomplete() {
    // Create the autocomplete object, restricting the search to geographical
    // location types.
    autocomplete = new google.maps.places.Autocomplete(
      /** @type {!HTMLInputElement} */
      (document.getElementById('autocomplete')), {
        types: ['geocode']
      });

    // When the user selects an address from the dropdown, populate the address
    // fields in the form.
    autocomplete.addListener('place_changed', fillInAddress);
  }

  function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();
    // street_number + route
    var fullStreetAddress = ""

    for (var component in componentForm) {
      document.getElementById(component).value = '';
      document.getElementById(component).disabled = false;
    }

    // Get each component of the address from the place details
    // and fill the corresponding field on the form.
    for (var i = 0; i < place.address_components.length; i++) {
      var addressType = place.address_components[i].types[0];
      if (components[addressType]) {
        var val = place.address_components[i][components[addressType]];

        if(addressType === 'street_number'){
          fullStreetAddress = val + ', ' + fullStreetAddress
        }else if (addressType === 'route'){
          fullStreetAddress += val
        }else{
          document.getElementById(addressType).value = val
        }
      }
    }
    document.getElementById('full_street_address').value = fullStreetAddress
  }

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<%= googleAPIKey %>&libraries=places"></script>

<script>
/* SpecialtyComponent requires div having id speciality_<pega:reference name="param.pzComponentId"/> in order to work properly */
if(document.getElementById('<%= containerID %>')) {
		pega.u.d.registerAsHarnessElement({
			 /* onLoad function will be run on load of the page and can be use to initialize the special control with default values from clipboard properties */
			 onLoad : initAutocomplete
		},pega.u.d.getContainerSectionElement('<%= containerID %>'));
}
</script>