What are Power Apps portals?

Power Apps makers can now create a powerful new type of experience: external-facing websites that allow users outside their organizations to sign in with a wide variety of identities, create and view data in Microsoft Dataverse, or even browse content anonymously. The full capabilities of Dynamics 365 Portals, previously offered only as an add-on to customer engagement apps are now available standalone in Power Apps.

After the launch of Power Apps portals on October 1, 2019, all Dynamics 365 Portals are now referred to as Power Apps portals.

Requirement:

When the user starts typing in the address text box then it should display related suggestions from Google Maps API.

Solution:

So as we know that we have to show address suggestions on the basis of user input in the textbox. So now, we’ll follow the below steps to achieve the same.

Step 1: First we have to add an address field on the web page(Basic form or web template) of Power Apps Portal. 

Step 2: After that, we have to write javascript code for calling the Google map API.

// Include the libraries=places parameter when you first load the API.

<!– Async script executes immediately and must be after any DOM elements used in callback. –>

  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initAutocomplete&libraries=places&v=weekly"
      async>
  </script>

Note: Replace your callback function name with “initAutocomplete”.

Step 3: In the JS code we’ll call a callback function for getting address suggestions from google API.

Output:

References:

https://docs.microsoft.com/en-us/powerapps/maker/portals/overview

https://developers.google.com/maps/documentation/places/web-service/autocomplete