0

I am trying to enable Address Autcomplete on Standard Salesforce via Visualforce page. I am using this code:

<apex:page standardController="Account" extensions="AccountDedupeController" tabstyle="Account" showHeader="true">
    <style type="text/css">input[type="text"]:disabled {display: none;}</style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBrRb6IVhS3CMgxll5fZiauduGdxzpG1cAsigned_in=true&libraries=places"></script> 
     <apex:form id="searchform">
      <apex:sectionheader title="Account Google Places Sample" subtitle="{!if(Account.Id==null,'New Account',Account.Name)}">
      </apex:sectionheader>   
      <apex:pageblock mode="edit" id="AccountPB" title="Account Edit">
         <apex:pageBlockSection id="searchblocksection" columns="3" title="Address Search" >
             <apex:outputLabel value="Global Address Search" for="field" style="font-weight:bold;"/>
             <apex:inputText label="" size="60" id="addressfield">
                <apex:actionSupport event="onchange" oncomplete="SetStateCode()" rerender="Billing_StateCode"/>
             </apex:inputText>
         </apex:pageBlockSection>
         <apex:pageblocksection id="AddressInformationPBS" title="Address Information" columns="2" collapsible="true">    
             <apex:inputfield taborderhint="1" value="{!Account.Name}" id="name"></apex:inputfield>
             <apex:outputtext value=""></apex:outputtext>
             <apex:inputfield taborderhint="2" value="{!Account.BillingStreet}" id="street"></apex:inputfield>
             <apex:outputtext value=""></apex:outputtext>
             <apex:inputfield taborderhint="3" value="{!Account.BillingPostalCode}" id="postal_code"></apex:inputfield>
             <apex:outputtext value=""></apex:outputtext>
             <apex:inputfield taborderhint="4" value="{!Account.BillingCity}" id="locality"></apex:inputfield>
             <apex:outputtext value=""></apex:outputtext>
             <apex:inputfield taborderhint="5" value="{!Account.BillingCountryCode}" id="country"/>
             <apex:outputtext value=""></apex:outputtext>
             <apex:inputfield taborderhint="6" value="{!Account.BillingStateCode}" id="Billing_StateCode"/>
             <apex:outputtext value=""></apex:outputtext>
             <apex:inputField taborderhint="10" value="{!Account.Phone}" required="True" id="international_phone_number"></apex:inputfield>

             <apex:inputText label=" " id="street_number" disabled="True"/>
             <apex:inputText label=" " id="route" disabled="True"/>
             <apex:inputText label=" " id="statecode" disabled="True"/>
             <apex:inputText label=" " id="administrative_area_level_1" disabled="True"/>
             <apex:inputText label=" " id="administrative_area_level_2" disabled="True"/>
         </apex:pageblocksection>
        </apex:pageblock>
    </apex:form>

        <script>  
        // initialize the google places components
        initialize();
        // This example displays an address form, using the autocomplete feature
        // of the Google Places API to help users fill in the information.
        //var autocomplete;
        var componentForm = {
            name: 'long_name',
            international_phone_number: 'long_name',
            locality: 'long_name',
            postal_town: 'long_name',
            administrative_area_level_1: 'short_name',
            administrative_area_level_2: 'short_name',
            country: 'short_name',
            postal_code: 'short_name',
            route: 'long_name',
            street_number: 'long_name',
            street: 'long_name',
            website: 'long_name',
        };

        function initialize() {
            // Create the autocomplete object, restricting the search
            // to geographical location types.
            var input = document.getElementById('{!$Component.searchform.AccountPB.searchblocksection.addressfield}');
            var options = {types: []};
            autocomplete = new google.maps.places.Autocomplete(input, options);
            // When the user selects an address from the dropdown,
            // populate the address fields in the form.
            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                // call back function after user clicks on a location
                fillInAddress();
            });
        }

        function fillInAddress() {
            // Get the place details from the autocomplete object.
            var place = autocomplete.getPlace();
            // Get each component of the address from the place details
            // and fill the corresponding field on the form.
            var route = '', street_number = '', administrative_area_level_1 = '';
            var administrative_area_level_2 = '', country = '';
            for (var i = 0; i < place.address_components.length; i++) {
                var addressType = place.address_components[i].types[0];
                // set the country
                if (addressType === 'country') {
                    country = place.address_components[i][componentForm[addressType]];
                }
                // set the street name
                if (addressType === 'route') {
                    route = place.address_components[i][componentForm[addressType]];
                }
                // set the street number
                if (addressType === 'street_number') {
                    street_number = place.address_components[i][componentForm[addressType]];
                }
                // set the state
                if (addressType === 'administrative_area_level_1') {
                    administrative_area_level_1 = place.address_components[i][componentForm[addressType]];
                }
                if (componentForm[addressType]) {
                    var elem_id = '{!$Component.searchform.AccountPB.AddressInformationPBS.}'+":"+addressType;
                    document.getElementById(elem_id).value = place.address_components[i][componentForm[addressType]];
                }
            }

            // set the name of the address
            var elem_id = '{!$Component.searchform.AccountPB.AddressInformationPBS.}'+":"+'name';
            document.getElementById(elem_id).value = place['name'];

            var elem_id = '{!$Component.searchform.AccountPB.AddressInformationPBS.}'+":"+'street';
            document.getElementById(elem_id).value = (country === 'FR') ? street_number + ' ' + route : route + ' ' + street_number;

            // set the phone number
            var elem_id = '{!$Component.searchform.AccountPB.AddressInformationPBS.}'+":"+'international_phone_number';
            document.getElementById(elem_id).value = place['international_phone_number'];

            var elem_id = '{!$Component.searchform.AccountPB.AddressInformationPBS.}'+":"+'Billing_StateCode';
            document.getElementById(elem_id).value = administrative_area_level_1;
        }

    $('html').bind('keypress', function(e){
        if(e.keyCode == 13){return false;}
    });
    </script>
</apex:page>

But the following error appears:

Could not resolve field 'BillingCountryCode' from value binding '{!Account.BillingCountryCode}' in page Address_Autocomplete

Do you have any idea why?

Alternatively, is there any other way of doing this?

Thanks, Anna

  • Try using 'BillingCountry' instead of 'BillingCountryCode'.... – Shailesh Patil Feb 27 '18 at 11:35
0

The field BillingCountryCode will only be available in your org if you have State and Country Picklists turned on. If your org uses plain-text fields for the State and Country fields, you'll just have BillingCountry (and BillingState rather than BillingStateCode) available.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.