PDA

View Full Version : 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


<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, 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.

jscheuer1
04-30-2014, 07:45 AM
Please include a link to the page on your site that contains the problematic code so we can check it out.