Created
October 19, 2017 09:37
-
-
Save geritol/7c36f68eba67c5ab827385d99c772345 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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; %> | |
<% ClipboardPage primaryPage = tools.getPrimaryPage(); %> | |
<script> | |
var unneededElement = document.getElementById('speciality_<%= componentID %>') | |
unneededElement.parentNode.removeChild(unneededElement) | |
</script> | |
<div id="<%= containerID %>"> | |
<div id="locationField"> | |
<input class="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 class="full_street_address" disabled="true" type="text" name="<%= primaryPage.getEntryHandle("pyStreet") %>" value="<%= primaryPage.get("pyStreet")%>"></input> | |
</td> | |
</tr> | |
<tr> | |
<td class="label">City</td> | |
<td class="wideField" colspan="3"> | |
<input type="text" class="locality" disabled="true" name="<%= primaryPage.getEntryHandle("pyCity") %>" value="<%= primaryPage.get("pyCity")%>"></input> | |
</td> | |
</tr> | |
<tr> | |
<td class="label">State</td> | |
<td class="slimField"> | |
<input type="text" class="administrative_area_level_1" disabled="true" name="<%= primaryPage.getEntryHandle("pyState") %>" value="<%= primaryPage.get("pyState")%>"> | |
</td> | |
<td class="label">Zip code</td> | |
<td class="wideField"><input type="text" class="postal_code" disabled="true" name="<%= primaryPage.getEntryHandle("pyPostalCode") %>" value="<%= primaryPage.get("pyPostalCode")%>"></input> | |
</td> | |
</tr> | |
<tr> | |
<td class="label">Country</td> | |
<td class="wideField" colspan="3"><input type="text" class="country" disabled="true" name="<%= primaryPage.getEntryHandle("pyCountry") %>" value="<%= primaryPage.get("pyCountry")%>"></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 findComponent(componentName){ | |
return document.querySelector('#<%= containerID %> .' + componentName) | |
} | |
function initAutocomplete() { | |
// Create the autocomplete object, restricting the search to geographical | |
// location types. | |
autocomplete = new google.maps.places.Autocomplete( | |
/** @type {!HTMLInputElement} */ | |
(findComponent('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) { | |
findComponent(component).value = ''; | |
findComponent(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{ | |
findComponent(addressType).value = val | |
} | |
} | |
} | |
findComponent('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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment