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

**web.dev.2k14** · 04-17-2014, 03:24 AM

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

Code:

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

Code:

    <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

Code:

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 change do I need to make in the code? Please help!!!! Thanks everyone.