{"id":36677,"date":"2021-12-12T01:17:37","date_gmt":"2021-12-11T19:47:37","guid":{"rendered":"https:\/\/techmasala.addastudents.com\/dev\/?p=36677"},"modified":"2021-12-12T01:19:16","modified_gmt":"2021-12-11T19:49:16","slug":"how-to-integrate-google-maps-api-with-address-field-in-power-apps-portals","status":"publish","type":"post","link":"https:\/\/techmasala.addastudents.com\/dev\/how-to-integrate-google-maps-api-with-address-field-in-power-apps-portals\/","title":{"rendered":"How to integrate Google Maps API with address field in Power Apps portals?"},"content":{"rendered":"\n

What are Power Apps portals?<\/strong><\/h1>\n\n\n\n

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.<\/p>\n\n\n\n

After the launch of Power Apps portals on October 1, 2019, all Dynamics 365 Portals are now referred to as Power Apps portals.<\/p>\n\n\n\n

Requirement:<\/strong><\/p>\n\n\n\n

When the user starts typing in the address text box then it should display related suggestions from Google Maps API.<\/p>\n\n\n\n

Solution:<\/strong><\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Step 1:<\/strong> First we have to add an address field on the web page(Basic form or web template) of Power Apps Portal. <\/p>\n\n\n\n

Step 2:<\/strong> After that, we have to write javascript code for calling the Google map API.<\/p>\n\n\n\n

\/\/ Include the libraries=places parameter when you first load the API.<\/p>\n\n\n\n

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

  <script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY&callback=initAutocomplete&libraries=places&v=weekly\"\n      async>\n  <\/script>\n<\/code><\/pre>\n\n\n\n
Note: <\/strong>Replace your callback function name with \u201cinitAutocomplete\u201d.<\/p>\n\n\n\n
Step 3:<\/strong> In the JS code we’ll call a callback function for getting address suggestions from google API.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
References:<\/strong><\/p>\n\n\n\n
https:\/\/docs.microsoft.com\/en-us\/powerapps\/maker\/portals\/overview<\/a><\/p>\n\n\n\n
https:\/\/developers.google.com\/maps\/documentation\/places\/web-service\/autocomplete<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":36678,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,70],"tags":[60,771,772,47,45,770,769,98],"class_list":["post-36677","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-learn-microsoft-powerapps","category-learn-technology-free","tag-apps","tag-google-map-api","tag-integration","tag-javascript","tag-js","tag-power-platform","tag-powerapps-portal","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/posts\/36677","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/comments?post=36677"}],"version-history":[{"count":3,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/posts\/36677\/revisions"}],"predecessor-version":[{"id":36681,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/posts\/36677\/revisions\/36681"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/media\/36678"}],"wp:attachment":[{"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/media?parent=36677"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/categories?post=36677"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techmasala.addastudents.com\/dev\/wp-json\/wp\/v2\/tags?post=36677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}