web.dev.2k14 Posted April 17, 2014 Share Posted April 17, 2014 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 comment Share on other sites More sharing options...
thescientist Posted April 17, 2014 Share Posted April 17, 2014 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 comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now