A simple solution to add google autocomplete to form in Dynamics 365 Portal (Power Pages)

Have you ever encountered a situation where filling out a form that required a complete address was challenging because you could only recall the street number or postal code? It is not uncommon to find oneself in such situations, and the experience can be frustrating, leading to a search for the address elsewhere, either on a phone or in a notebook. But what if there was a way to search for addresses within the form without leaving the page? This would save time and make the process more convenient.

As a software developer, implementing this functional improvement can significantly enhance the user experience and protect your organization's data integrity. By ensuring that the correct information is inputted, the feature guarantees that your business operations run smoothly. Furthermore, the feature provides valuable details such as business status, geometry, accessibility, phone number, website, rating, and more, making it a valuable addition to your Dynamics 365 form or Power Pages Portal.

Required components:

Google API key -> This link will tell you how to create one.

Dynamics 365 admin and Portal -> This link will explain in detail about roles

A form embedded in Dynamics 365 Portal from DataVerse -> Refer to Microsoft documentation

An example of an address form:

#D365 Portal form

Implementation steps:

First, open Portal Management

#D365 Portal Management

Then, go to the form which you want to add the autocomplete and open Additional Settings.

#D365 Portal Form Additional Settings

After that, scroll down to the Custom JavaScript section and add this code inside. 

REMEMBER: Don’t forget to replace your field IDs and google API key, also this code is only applied to search Australia addresses. 
Please change country restrictions to your own settings with componentRestrictions. 

(function ($) {
    $(document).ready(function () {
        //#Google Address Search 
 function initMap () {
            var options = {
                //Australia restriction
                componentRestrictions: {country: ["au"]},
                fields: ["name", "address_component", "formatted_address", "geometry.location"]
            };
            var autocomplete = new google.maps.places.Autocomplete($("#googleInput")[0], options);
                google.maps.event.addListener(autocomplete, 'place_changed',function () {
                var place = autocomplete.getPlace();
                var addressLine = "";
                //get field type and fill in columns
                for (var i = 0; i < place.address_components.length; i++) {
                    var addressType = place.address_components[i].types[0];
                    var addressName = place.address_components[i];
                    switch (addressType){
                        case "subpremise":
                        $("#street2").attr("value", addressName.long_name);
                        break;
                        case "street_number":
                        addressLine += addressName.long_name + " ";
                        break;
                        case "route":
                        addressLine += addressName.long_name + " ";
                        $("#street1:input").val(addressLine);
                        break;
                        case "locality": 
                        $("#googlesuburb:input").val(addressName.long_name);
                        break;
                        case "administrative_area_level_1": 
                        $("#googlestate:input").val(addressName.long_name);
                        break;
                        case "postal_code": 
                        $("#googlepostcode:input").val(addressName.long_name);
                        break;
                    }
                }    
            })
        }
        function LoadAPI(){
            var script = document.createElement('script')
            script.src = "https://maps.googleapis.com/maps/api/js?key=GoogleAPIKey&libraries=places&callback=initMap"
            script.type = 'module'
            script.defer = true
            document.body.appendChild(script)
        }
        LoadAPI();
        //# End of Google Address Search 

})

Now, clear your cache and test the newly added add-on.

The add-on will appear as the image below.

#GoogleAddress Autocomplete add

Note these instructions are written as simply and generically as possible; therefore, configure your form to suit your own style.

Happy customising! 😊

References:
Use API Keys  |  Maps Embed API  |  Google for Developers
Use service admin roles to manage your tenant - Power Platform | Microsoft Learn
About basic forms | Microsoft Learn