{"id":966,"date":"2022-08-30T15:10:09","date_gmt":"2022-08-30T15:10:09","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/09\/how-do-i-return-a-variable-from-google-maps-javascript-geocoder-callback-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:10:09","modified_gmt":"2022-08-30T15:10:09","slug":"how-do-i-return-a-variable-from-google-maps-javascript-geocoder-callback-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/how-do-i-return-a-variable-from-google-maps-javascript-geocoder-callback-collection-of-common-programming-errors\/","title":{"rendered":"How do I return a variable from Google Maps JavaScript geocoder callback?-Collection of common programming errors"},"content":{"rendered":"

I am working with the google maps API and whenever I return the variable to the initialize function from the codeLatLng function it claims undefined. If I print the variable from the codeLatLng it shows up fine.<\/p>\n

  var geocoder;\n  function initialize() {\n    geocoder = new google.maps.Geocoder();\n    var latlng = new google.maps.LatLng(40.730885,-73.997383);\n    var addr = codeLatLng();\n    document.write(addr);\n\n  }\n\n  function codeLatLng() {\n    var latlng = new google.maps.LatLng(40.730885,-73.997383);\n    if (geocoder) {\n      geocoder.geocode({'latLng': latlng}, function(results, status) {\n        if (status == google.maps.GeocoderStatus.OK) {\n          if (results[1]) {\n                return results[1].formatted_address;\n          } else {\n            alert(\"No results found\");\n          }\n        } else {\n          alert(\"Geocoder failed due to: \" + status);\n        }\n      });\n    }\n  }\n<\/code><\/pre>\n
prints out undefined<\/p>\n
If I do:<\/p>\n
  var geocoder;\n  function initialize() {\n    geocoder = new google.maps.Geocoder();\n    var latlng = new google.maps.LatLng(40.730885,-73.997383);\n    codeLatLng();\n\n\n  }\n\n  function codeLatLng() {\n    var latlng = new google.maps.LatLng(40.730885,-73.997383);\n    if (geocoder) {\n      geocoder.geocode({'latLng': latlng}, function(results, status) {\n        if (status == google.maps.GeocoderStatus.OK) {\n          if (results[1]) {\n                document.write(results[1].formatted_address);\n          } else {\n            alert(\"No results found\");\n          }\n        } else {\n          alert(\"Geocoder failed due to: \" + status);\n        }\n      });\n    }\n  }\n<\/code><\/pre>\n
prints out New York, NY 10012, USA<\/p>\n
    \n
  1. \n
    You can’t return the value from the function, the value doesn’t exist yet when the function returns.<\/p>\n
    The geocode<\/code> method makes an asynchonous call and uses a callback to handle the result, so you have to do the same in the codeLatLng<\/code> function:<\/p>\n
    var geocoder;\nfunction initialize() {\n  geocoder = new google.maps.Geocoder();\n  var latlng = new google.maps.LatLng(40.730885,-73.997383);\n  codeLatLng(function(addr){\n    alert(addr);\n  });\n}\n\nfunction codeLatLng(callback) {\n  var latlng = new google.maps.LatLng(40.730885,-73.997383);\n  if (geocoder) {\n    geocoder.geocode({'latLng': latlng}, function(results, status) {\n      if (status == google.maps.GeocoderStatus.OK) {\n        if (results[1]) {\n          callback(results[1].formatted_address);\n        } else {\n          alert(\"No results found\");\n        }\n      } else {\n        alert(\"Geocoder failed due to: \" + status);\n      }\n    });\n  }\n}\n<\/code><\/pre>\n<\/li>\n
  2. \n
    You’re making an asynchronous request, your codeLatLng()<\/code> function has finished and returned long before the geocoder is done.<\/p>\n
    If you need the geocoder data to continue, you’ll have to chain your functions together:<\/p>\n
    function initialize() {\n    geocoder = new google.maps.Geocoder();\n    codeLatLng();\n}\nfunction codeLatLng() {\n    var latlng = new google.maps.LatLng(40.730885,-73.997383);\n    if (geocoder) {\n        geocoder.geocode({'latLng': latlng}, function(results, status) {\n            if (status == google.maps.GeocoderStatus.OK) {\n                    if (results[1]) {\n                        initContinued(results[1].formatted_address);\n                    } else {\n                        alert(\"No results found\");\n                    }\n                } else {\n                    alert(\"Geocoder failed due to: \" + status);\n                }\n        });\n      }\n\n}\nfunction initContinued(addr) {\n    alert(addr);\n}\n<\/code><\/pre>\n<\/li>\n
  3. \n
    The geocode function uses a callback (function(results, status) { … }) which is being called when the geocode function finishes its work. So, when you return a value from this callback, it only returns it to geocode function, not out of the codeLatLng.<\/p>\n
    With this you have several options: define a variable in codeLatLng and set it in the callback function, for example<\/p>\n
    function codeLatLng()\n{\n   var returnValue;\n\n   geocoder.geocode({'latLng': latlng}, function(results, status) { returnValue = results[1].formatted_address });\n\n   return returnValue;\n}\n<\/pre>\n
    Or do the stuff you need with the result directly in the callback function. Or put the result in a global variable. (Also, if the geocode function is asynchronous – if it returns immediately and the callback is called afterwards, you need to do one of the last two, you can’t return the value from codeLatLng in that case.)<\/p>\n<\/li>\n
  4. \n
    pass geocoder as a parameter to the codeLatLng() function.<\/p>\n
    function codeLatLng(geocoder) {\n<\/code><\/pre>\n
    call it like so in your initialize function:<\/p>\n
    var addr = codeLatLng(geocoder);\n<\/code><\/pre>\n<\/li>\n
  5. \n
    That return is not returning from codeLatLng<\/code>; it’s returning from the anonymous function being passed to geocoder.geocode<\/code>.<\/p>\n
    I think you’ll need to pass the data using another mechanism e.g. a global variable<\/p>\n<\/li>\n<\/ol>\n
    Originally posted 2013-11-09 23:08:18. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
    I am working with the google maps API and whenever I return the variable to the initialize function from the codeLatLng function it claims undefined. If I print the variable from the codeLatLng it shows up fine. var geocoder; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(40.730885,-73.997383); var addr = codeLatLng(); […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-966","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/966","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=966"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/966\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=966"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}