Autocomplete API (GooglePlaces API) is losing the binding with the html element, After a JSF AJAX call Submit?

Question

I have binded autocomplete google Places API V3 with a textbox which is actually a JSF Textbox. By the following code, you could see my API binding with the textbox.

  var input =(document.getElementById('address'));

  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);

The above code works fine, When the JSF Page is loaded at first time and also works fine if it is getting refreshed.

But the autocomplete Places API binding with the textbox is getting lost when I have hit a form submit. Following code is the JSF Form submit.

<script
    src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=drawing,geometry,places&amp;sensor=false"></script>
<script>
var map;
var geocoder;
function initialize() {
    // Specifies the google Map properties
    map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom : 4,
        center : new google.maps.LatLng(37.5499, -95.5524),
        mapTypeId : google.maps.MapTypeId.ROADMAP,
        mapTypeControl : false
    });
    // Allowing to change the Address to GeoCode.
    geocoder = new google.maps.Geocoder({});
    var options = {
        types : [ 'geocode' ],
        componentRestrictions : {
            country : "us"
        }
    };
    var input = (document.getElementById('address'));
    var autocomplete = new google.maps.places.Autocomplete(input, options);
    autocomplete.bindTo('bounds', map);
}
// codeAddress()
function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode({
        'address' : address
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            document.getElementById("lat").value = results[0].geometry.location
                    .lat();
            document.getElementById("lng").value = results[0].geometry.location
                    .lng();
        }
    });
}
</script>

    <div id="content-01">
        <h:form prependId="false">
            <div id="panel-Three">
                <h:outputLabel value="ENTER ADDRESS"
                    style="font-size:12px;vertical-align: bottom;" />
                <h:inputText style="margin-left: 2px" type="text" id="address" size="40"
                    onblur="codeAddress()" value="#{GeoCodeRegion.address}"/>
                <h:outputLabel value="LATTITUDE : "
                    style="font-size:12px;vertical-align: bottom;" />
                <h:inputText id="lat" value="#{GeoCodeRegion.lattitude}"
                    style="margin-left: 2px" />
                <h:outputLabel value="LONGTITUDE : "
                    style="font-size:12px;vertical-align: bottom;" />
                <h:inputText id="lng" value="#{GeoCodeRegion.longtitude}"
                    style="margin-left: 2px" />
                <br />
                <h:commandButton type="submit" value="Submit Value">
                    <f:ajax listener="#{GeoCodeRegion.passGeoValues()}" event="click"
                        render="@form" execute="@form"></f:ajax>
                </h:commandButton>
                <h:panelGroup id="checkStatus">
                    <h:outputLabel id="responseCheck"
                        value="#{GeoCodeRegion.responseTextResult}"
                        style="vertical-align: bottom;" />
                </h:panelGroup>
            </div>
        </h:form>
    </div>

Actually It is a Ajax Call. Having no idea Why the Places API binding is getting lost after a form submission. Please help me and explain me why it is happening.

Answer 1

Solved the Issue, By providing JSF inputtext autocomplete option as false.

Code level changes.

<h:inputText style="margin-left: 2px" type="text" autocomplete=false id="address" size="40"
                onblur="codeAddress()" value="#{GeoCodeRegion.address}"/>