How to Use the Google Address API using an Auto Complete in Pega
Using google developers console, once we get the API Key, and the HTML code, how can we leverage this code to show it as Auto complete .
I got below HTML code from google.
When i try below code in W3Schools , HTML - it works.. But i need a way to leverage this in Pega.
I have created a Control using this HTML code and tried, but its not working. Any Suggessions?
<!DOCTYPE html> <html> <head> <title>Address Selection</title> <style> .sb-title { position: relative; top: -12px; font-family: Roboto, sans-serif; font-weight: 500; }
.sb-title-icon { position: relative; top: -5px; }
.card-container { display: flex; height: 500px; width: 300px; }
Using google developers console, once we get the API Key, and the HTML code, how can we leverage this code to show it as Auto complete .
I got below HTML code from google.
When i try below code in W3Schools , HTML - it works.. But i need a way to leverage this in Pega.
I have created a Control using this HTML code and tried, but its not working. Any Suggessions?
<!DOCTYPE html> <html> <head> <title>Address Selection</title> <style> .sb-title { position: relative; top: -12px; font-family: Roboto, sans-serif; font-weight: 500; }
.sb-title-icon { position: relative; top: -5px; }
.card-container { display: flex; height: 500px; width: 300px; }
.panel { background: white; width: 300px; padding: 20px; display: flex; flex-direction: column; justify-content: space-around; }
.half-input-container { display: flex; justify-content: space-between; }
.half-input { max-width: 120px; }
h2 { margin: 0; font-family: Roboto, sans-serif; }
input { height: 30px; }
input { border: 0; border-bottom: 1px solid black; font-size: 14px; font-family: Roboto, sans-serif; font-style: normal; font-weight: normal; }
input:focus::placeholder { color: white; } </style> <script> "use strict";
function initMap() { const componentForm = [ 'location', 'locality', 'administrative_area_level_1', 'country', 'postal_code', ]; const autocompleteInput = document.getElementById('location'); const autocomplete = new google.maps.places.Autocomplete(autocompleteInput); autocomplete.addListener('place_changed', function () { const place = autocomplete.getPlace(); if (!place.geometry) { // User entered the name of a Place that was not suggested and // pressed the Enter key, or the Place Details request failed. window.alert('No details available for input: \'' + place.name + '\''); return; } fillInAddress(place); });
function fillInAddress(place) { // optional parameter const addressNameFormat = { 'street_number': 'short_name', 'route': 'long_name', 'locality': 'long_name', 'administrative_area_level_1': 'short_name', 'country': 'long_name', 'postal_code': 'short_name', }; const getAddressComp = function (type) { for (const component of place.address_components) { if (component.types[0] === type) { return component[addressNameFormat[type]]; } } return ''; }; document.getElementById('location').value = getAddressComp('street_number') + ' ' + getAddressComp('route'); for (const component of componentForm) { // Location field is handled separately above as it has different logic. if (component !== 'location') { document.getElementById(component).value = getAddressComp(component); } } } } </script> </head> <body> <div class="card-container"> <div class="panel"> <div> <img class="sb-title-icon" src="https://fonts.gstatic.com/s/i/googlematerialicons/location_pin/v5/24px.svg" alt=""> <span class="sb-title">Address Selection</span> </div> <input type="text" placeholder="Address" id="location"/> <input type="text" placeholder="Apt, Suite, etc (optional)"/> <input type="text" placeholder="City" id="locality"/> <div class="half-input-container"> <input type="text" class="half-input" placeholder="State/Province" id="administrative_area_level_1"/> <input type="text" class="half-input" placeholder="Zip/Postal code" id="postal_code"/> </div> <input type="text" placeholder="Country" id="country"/> </div> </div> <script src="https://maps.googleapis.com/maps/api/js?key="******************API KEY*****************************"&libraries=places&callback=initMap&channel=GMPSB_addressselection_v1_cA" async defer></script> </body> </html>
Any Suggession??
Pegasystems Inc.
IN
@ASHOK507 Can you try by creating the HTML fragment. Note: Don't use outer HTML tags put only the content in the fragment then include your HTML fragment in your section.
Updated: 26 Jul 2021 8:07 EDT
TCS
GB
@kbm01Thanks for your reply, but i dont think we have HTML Fragment rules from Pega 8.6, which is our current version. So, i just created a custom section with (unchecking Auto generated ) check box and pasted this HTML code over that section and embedded it on another section. However the Auto complete is still not calling the API as user type some post code. PFA section view.