Hi everyone,

I am facing a crisis here. I have a textbox, named businessInfo_businessAddress, which contains client's address loaded from the database when the page is loaded. I have a hidden field, named tracking-select-business-country-code

HTML Code:
<input type="hidden" id="tracking-select-business-country-code" value=""/>

which is supposed to store the country code after the google map api is called.

In the included javascript file, where the google map api is called, I have piece of code like this

function getCountryCode(targetAddress)
    console.log("in function getCountryCode");
    var input = document.getElementById(targetAddress);
    var autocomplete = new google.maps.places.Autocomplete(input);  
    console.log("autocomplete: ");
    var lat = "37.09024";
    var lng = "-95.71289100000001";                
    console.log("before calling google map api");
    google.maps.event.addListener(document, 'load', function () {
        console.log("after calling google map api");
        var place = autocomplete.getPlace();
        if (!place.geometry) {                        
        lat = place.geometry.location.lat();
        lng = place.geometry.location.lng();                    

        var address_components = place.address_components;                    
        console.log("address components: ");
        var country_code;

        for(var i=0; i< address_components.length; i++)
            var address_component = address_components[i];
            if((typeof address_component !== "undefined") && (typeof address_component.types !== "undefined")){
                if(address_component.types[0] == "country") {
                    country_code = address_component.short_name;
        country_code = $.trim(country_code);
        console.log("country code:'" + country_code + "'");
function _webGetCountryCode(){
    console.log("in function _webGetCountryCode");

And in document.ready I have a piece of code that trying to call that function like this

        $(document).ready(function () {
            var oldAddress = $("#businessInfo_businessAddress").val();
            var country_code = $("#tracking-select-business-country-code").val();
            if(country_code == "" || country_code == null)
                console.log("country code is empty");
                google.maps.event.addDomListener($("#businessInfo_businessAddress"), 'focus', _webGetCountryCode); 
            var country_code = $("#tracking-select-business-country-code").val();
            console.log("country code (when loaded): " + country_code);


I got this error in console.log

Uncaught TypeError: Cannot read property 'value' of null

I guess it must have something to do with variable autocomplete, but I don't know how to handle this problem. Anyway, what I need is that after the form finishes loading (ie. $(document).ready is called), google map api must be called with the value contained in the textbox businessInfo_businessAddress (for example: "Atlanta, GA, United States") and return the country code for hidden field tracking-select-business-country-code. I wonder how can I do that? What do I need to change in my code? Please help!!!! Thanks everyone.