Jump to content

web.dev.2k14

Members
  • Posts

    1
  • Joined

  • Last visited

web.dev.2k14's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. 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.
×
×
  • Create New...