Address autocomplete for CRM 2013

Google is providing free services for address lookup using Google Places.

We can implement address lookup using google places into CRM 2013.

NOTE: THIS IS UNSUPPORTED CRM 2013 CUSTOMIZATION.

For Code check https://addressautolookup.codeplex.com

To implement address lookup in CRM 2013, we need to add two JavaScript files into CRM.

And need to call “PopulateAddresses” function on load event.

Here are step by step details

•  Create First JavaScript web resource with name “GoogleJsapi.js”

You will find this script by browsing http://www.google.com/jsapi

Copy script to our GoogleJsapi.js file.

• Create another JavaScript web resource with name “GoogleAddressAutocomplete.js”

This is custom script we have to create. To add autocomplete functionality for CRM attributes.

function PopulateAddresses() {

    //If google library not loaded then settime

    if (google == null) {

        google.load("maps", "3", { other_params: "libraries=places&sensor=false", "callback": PopulateAddresses });

        setTimeout(PopulateAddresses, 2000);

        return;

    }

    //If google library loaded but google maps libray not loaded then add those and settime to recall same function again

    if (google != null && google.maps == null) {

        google.load("maps", "3", { other_params: "libraries=places&sensor=false", "callback": PopulateAddresses });

        setTimeout(PopulateAddresses, 2000);

        return;

    }

    //if google map places is undefined then recall function after some time..

    if (google.maps.places == null) {

        setTimeout(PopulateAddresses, 2000);

        return;

    }

    //Get input control for Google places  

    var autocomplete;         

    var control = Xrm.Page.getAttribute('address1_composite').controls.get(0);

    if (control != null) {

        control.setFocus();

        //var input = $("#" + attributeName + "_i")

        var input = $("#address1_composite_compositionLinkControl_address1_line1_i");

        /*Sometimes google places list is not showing thats why need to add this style*/

        var pacContainerInitialized = false;

        input.keypress(function () {

            if (!pacContainerInitialized) {

                $('.pac-container').css('z-index', '9999');

                pacContainerInitialized = true;

            }

        });

        //add input to google autocomplete

        autocomplete = new google.maps.places.Autocomplete(document.getElementById('address1_composite_compositionLinkControl_address1_line1_i'));

    }

   

    /* Set up event listener for place selection */

    google.maps.event.addListener(autocomplete, 'place_changed', function () {

        /* Get place details */

        var place = autocomplete.getPlace();

        if (!place.geometry) {

            return;

        }

        /* Loop through the address components for the selected place and fill

         the corresponding input fields in CRM */

        var houseNumber, StreetName, city, state, Zip, Country;

        for (i = 0; i < place.address_components.length; i++) {

            var type = place.address_components[i].types[0];

            if (type == 'street_number') {

                houseNumber = place.address_components[i].long_name + "";

            }

            if (type == 'route') {

                StreetName = place.address_components[i].long_name;

            }

            if (type == 'locality' || type == 'administrative_area_level_3') {

                city = place.address_components[i].long_name;

            }

            if (type == 'postal_code') {

                Zip = place.address_components[i].long_name;

            }

            if (type == 'administrative_area_level_1') {

                state = place.address_components[i].short_name;

            }

            if (type == 'country') {

                Country = place.address_components[i].long_name;

            }

        }

            Xrm.Page.getAttribute('address1_line1').setValue(houseNumber);

            Xrm.Page.getAttribute('address1_line2').setValue(StreetName);

            Xrm.Page.getAttribute('address1_city').setValue(city);

            Xrm.Page.getAttribute('address1_postalcode').setValue(Zip);

            Xrm.Page.getAttribute('address1_stateorprovince').setValue(state);

            Xrm.Page.getAttribute('address1_country').setValue(Country);

    });

}

•        Add both Scripts to CRM address ( Account/contact/ lead) entity.
•  Add onload event
• Call PopulateAddresses function. 

• For google autocomplete HTMLInput type element is required.

But in CRM 2013 we will not get directly HTMLInput element for any attribute directly.

CRM 2013 is uing inline input element, so when we click on any attribute on form then dynamically input field is generated and displayed on Form.

For this we can us control.setFocus();  CRM function. When focus is set on field then we will get input element as “attributename_i”

var control = Xrm.Page.getAttribute('address1_composite').controls.get(0);

    if (control != null) {

        control.setFocus();

        //var input = $("#" + attributeName + "_i")

        var input = $("#address1_composite_compositionLinkControl_address1_line1_i");

 and then call google autocomplete

autocomplete = new google.maps.places.Autocomplete(document.getElementById('address1_composite_compositionLinkControl_address1_line1_i'));

• Save Customization
• Publish your customization.
•  Now open any account/ contact or lead form
• Click on Address Composite control

I

• Start typing in Street1 field, because we added google place autocomplete on this field

address1_composite_compositionLinkControl_address1_line1_i

I

• Select required address
• The selected address will be populated in address fields

For more information on GOOGLE places

https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

For Code check https://addressautolookup.codeplex.com