+ Start a Discussion
Somya TiwariSomya Tiwari 

Help Needed to Integrate Google Maps API with VisualForce Page

I want to integrate Google Maps API with a VisualForce Page to generate Autofill Suggesstions for Address. When i use <Apex:InputText> tag Google Maps API gives following error:   
InvalidValueError: not an instance of HTMLInputElement
Hence i am using HTML tags for taking the Input, now can anyone help me to get this input into the controller?

Apex Controller
public class location {
    //public location(ApexPages.StandardController controller){}
    public void receiveInput() {
        System.debug('Google');
        string search0 = Apexpages.currentPage().getParameters().get('search0');
        string search1 = Apexpages.currentPage().getParameters().get('search1');
        System.debug('Search 0' + search0);
        System.debug('Search 1' + search1);
    }
}
VisualForce Page
<apex:page controller="location">
<apex:form id="form1">
    <apex:pageBlock title="Submit Location" id="loc">
        <label>Location 1</label>
            <input id="search0" name="search0" type="text" size="50"/>
        <label>Location 2</label>
            <input id="search1" name="search1" type="text" size="50"/>
        <apex:commandButton onClick="callActionFunction(search0, search1);" value="Click Here!"/>
        <apex:actionFunction name="SearchLocation" action="{!receiveInput}">
                <apex:param name="search0" assignTo="{!search0}" value=""/>
                <apex:param name="search1" assignTo="{!search1}" value=""/>
        </apex:actionFunction>
    </apex:pageBlock>
</apex:form>
<script src="https://maps.googleapis.com/maps/api/js?key=**INSERT_YOUR_GOOGLE_API_HERE**&libraries=places"></script>
<script type="text/javascript">
        //for first searchbox
        function initialize() {
            var input = document.getElementById('search0'); //Element ID of 2nd = search0
            new google.maps.places.Autocomplete(input);
        }
        //for second SearchBox
        function initialize2() {
            var input2 = document.getElementById('search1'); //Element ID of 2nd = search1
            new google.maps.places.Autocomplete(input2);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
        google.maps.event.addDomListener(window, 'load', initialize2);

        function callActionFunction(v1, v2) {
            var val1, val2;
            val1 = document.getElementById(v1);
            val2 = document.getElementById(v2);
            alert(val1);
            alert(val2);
            alert(document.getElementsByName(search0));
            SearchLocation(val1, val2);
        }
</script>
</apex:page>
Result What i need !!
User-added image