Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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]<input type="hidden" id="tracking-select-business-country-code" value=""/>[/HTML]

    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.

  • #2
    New Coder
    Join Date
    Aug 2009
    Location
    public_html/cgi-bin/
    Posts
    89
    Thanks
    14
    Thanked 1 Time in 1 Post
    Do you have a live example of this for me to check out by any chance? Maybe you could PM it.

    Inside the if statement of the <script> tags in the doc.ready, should you be calling 'getCountryCode();' with a value being passed through instead, as it takes 'targetaddress'?

    In console log, can you paste the entire sequence of text that is displayed to you, or is it just this uncaught error?

  • Users who have thanked Owener94 for this post:

    web.dev.2k14 (04-18-2014)

  • #3
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Owener94 View Post
    Do you have a live example of this for me to check out by any chance? Maybe you could PM it.

    Inside the if statement of the <script> tags in the doc.ready, should you be calling 'getCountryCode();' with a value being passed through instead, as it takes 'targetaddress'?

    In console log, can you paste the entire sequence of text that is displayed to you, or is it just this uncaught error?
    The error occurred at the line [code=java]console.log(autocomplete);[/code] but never mind. I found a better way to solve this problem. I'm using google.maps.Geocoder, easier than maps.places.
    Thanks anyway.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •