Jump to content

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

Recommended Posts

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.
Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...