0

I have created visual force pages it's working fine. I need to spilt the selected address such as city, street, country and so on. Please find the VF page attachment of images.

<apex:page id="page" standardController="account" >
 <script src="https://maps.googleapis.com/maps/api/js?language=en&sensor=false&libraries=places" type="text/javascript"></script>  
    <script type="text/javascript"> 

        function initializeField() {        
            var input = document.getElementById('page:form:field');           
            var autocomplete = new google.maps.places.Autocomplete(input); 


            var myLatlng = new google.maps.LatLng(latitude,longitude);
        map = new google.maps.Map(map_canvas, map_options);
        marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        draggable:true,
        title: address


        });

        }

        google.maps.event.addDomListener(window, 'load', initializeField);  

    </script> 
<apex:form id="form" ><b> <apex:outputLabel value="Global Address Search" for="field" /></b>&nbsp;
<apex:inputTextarea id="field" cols="25" rows="5" />
 </apex:form>   
</apex:page>

Images:

enter image description here

  • 1
    Can you please clarify what exactly you're trying to achieve? – Boris Bachovski Aug 5 '15 at 3:34
  • Inside the address in Global Address Search it split in separate related text box.I am not able to send images. I exactly trying to this URL output. Please check :developers.google.com/maps/documentation/javascript/examples/… – Nikitha Aug 5 '15 at 4:06
  • @Nikitha If my solution answers your question, can you please mark it as answer. Thanks. – Saroj Bera Aug 7 '15 at 8:08
3

I have tried to replicate your example URL in visual force. It is working as shown in the screenshots. You can update further as per your requirement.

Screen 1

enter image description here

Screen 2

enter image description here

VF page

<apex:page standardController="Account" >    
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script> 
    <apex:form id="searchform" >
        <apex:pageBlock id="searchblock">
            <apex:pageBlockSection id="searchblocksection" columns="3" title="Address Search" >
                <apex:outputLabel  value="Global Address Search" for="field" style="font-weight:bold;"/>
                <apex:inputtextarea label="" cols="50" rows="5" id="addressfield" onfocus="geolocate()"/>
            </apex:pageBlockSection>
            <apex:pageBlockSection id="addressblocksection" title="Address details" columns="2">
                <apex:inputText label="Street No" id="street_number"/>
                <apex:inputText label="Street Address" id="route"/>
                <apex:inputText label="City" id="locality"/>
                <apex:inputText label="State" id="administrative_area_level_1"/>
                <apex:inputText label="Zip code" id="postal_code"/>
                <apex:inputText label="Country" id="country"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
    <script>  
        // 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 = {
            street_number: 'short_name',
            route: 'long_name',
            locality: 'long_name',
            administrative_area_level_1: 'short_name',
            country: 'long_name',
            postal_code: 'short_name'
        };

        function initialize() {
            // Create the autocomplete object, restricting the search
            // to geographical location types.
            autocomplete = new google.maps.places.Autocomplete(
                /** @type {HTMLInputElement} */
                (document.getElementById('{!$Component.searchform.searchblock.searchblocksection.addressfield}')), {
                    types: ['geocode']
                });
            // When the user selects an address from the dropdown,
            // populate the address fields in the form.
            google.maps.event.addListener(autocomplete, 'place_changed', function() {
                fillInAddress();
            });
        }

        // [START region_fillform]
        function fillInAddress() {
            // Get the place details from the autocomplete object.
            var place = autocomplete.getPlace();

            for (var component in componentForm) {
                //document.getElementById(component).value = '';
                //document.getElementById(component).disabled = false;
            }

            // Get each component of the address from the place details
            // and fill the corresponding field on the form.
            for (var i = 0; i < place.address_components.length; i++) {
                var addressType = place.address_components[i].types[0];
                if (componentForm[addressType]) {
                    var val = place.address_components[i][componentForm[addressType]];
                    var elem_id = '{!$Component.searchform.searchblock.addressblocksection.}'+":"+addressType;
                    document.getElementById(elem_id).value = val;
                }
            }
        }
        // [END region_fillform]

        // [START region_geolocation]
        // Bias the autocomplete object to the user's geographical location,
        // as supplied by the browser's 'navigator.geolocation' object.
        function geolocate() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var geolocation = new google.maps.LatLng(
                        position.coords.latitude, position.coords.longitude);
                    var circle = new google.maps.Circle({
                        center: geolocation,
                        radius: position.coords.accuracy
                    });
                    autocomplete.setBounds(circle.getBounds());
                });
            }
        }
        // [END region_geolocation]
    </script>
    <script type="text/javascript">
        window.onload=function(){ 
            initialize();
        };
    </script>    
</apex:page>
  • @Nikitha If it was the answer can you please mark it as answer. Thanks. – Saroj Bera Aug 7 '15 at 8:06
  • Man! this is such a cool solution. Very well done. – JannieT Aug 26 '15 at 6:04

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.