How to call Google Map API in $(document).ready to get the country code? Please HELP!

[web.dev.2k14]

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

<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: ");    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) {                                    return;        }                            lat = place.geometry.location.lat();        lng = place.geometry.location.lng();                             var address_components = place.address_components;                            console.log("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 + "'");        $('#tracking-select-business-country-code').val(country_code);    });    }function _webGetCountryCode(){    console.log("in function _webGetCountryCode");    getCountryCode("businessInfo_businessAddress");}

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

    <script>        $(document).ready(function () {            var oldAddress = $("#businessInfo_businessAddress").val();            $('#tracking-select-address').val(oldAddress);                        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);                 $("#businessInfo_businessAddress").focus();                getCountryCode();            }            var country_code = $("#tracking-select-business-country-code").val();                        console.log("country code (when loaded): " + country_code);                    ...............     </script>

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 (just guessing). 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? Any idea? What change do I need to make in the code? Please help!!!! Thanks everyone.

[thescientist]

what line number is the error on? it should be right so you know where the issue is. It sounds like you aren't getting a reference to an element. check your IDs in the markup.