Javascript Google Geocode Returning Undefined (Can't figure callback function)

Question

I'm trying to store the values of the latitude and the longitude from the response that I get from the Google Geocoding API. Right now I am using a fixed location in California. My HTTP request keeps returning undefined.

I've been looking around a lot and I see that people have this same problem, but I can't wrap my head around making a callback function which seems to be the solution, could anybody explain to me how to do this? I know that my CORS request is working because I am using it to talk GET from a Heroku server that I set up.

var geocode = new XMLHttpRequest();
geocode = createCORSRequest('GET', 'https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=');

geocode.onload = function() {
    var geoData = JSON.parse(geocode.responseText); // parse the JSON from geocode response
    var results = geoData["results"]; // create variable for results

    var userLong = results["geometry"]["location"]["lng"]; // parse the latitude
    var userLat = results["geometry"]["location"]["lat"]; // parse the longitude
    console.log(userLong);
    console.log(userLat);
}

createCORSRequest()

// Create the XHR object.
function createCORSRequest(method, url) {
if ("withCredentials" in xhr) {
  // XHR for Chrome/Firefox/Opera/Safari.
  xhr.open(method, url, false);
} else if (typeof XDomainRequest != "undefined") {
  // XDomainRequest for IE.
  xhr = new XDomainRequest();
  xhr.open(method, url);
} else {
  // CORS not supported.
  xhr = null;
}
return xhr;
}

@Kushal, it's saying that it cannot reach geometry of undefined. — Ryan, Apr 16 '15 at 05:42

score 0 · Answer 1 · answered Apr 16 '15 at 05:38

Assuming createCORSRequest returns an xhr or xhr-like object (which seems to be the typical boilerplate for createCORSRequest from places like the HTML5 Rocks website), you need to include geocode.send(); at the end of your code. Otherwise the request never fires and therefore the onload handler never gets called.

score 0 · Accepted Answer · answered Apr 16 '15 at 05:41

Look like you're following HTML5Rocks site Using CORS article.

Once you create the xhr request. You must invoke send() method to trigger the ajax call.

var geocode = new XMLHttpRequest();
geocode = createCORSRequest('GET', 'https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=');

geocode.onload = function() {
    var geoData = JSON.parse(geocode.responseText); // parse the JSON from geocode response
    var results = geoData["results"]; // create variable for results

    var userLong = results["geometry"]["location"]["lng"]; // parse the latitude
    var userLat = results["geometry"]["location"]["lat"]; // parse the longitude
    console.log(userLong);
    console.log(userLat);
}

geocode.send();

Unless you call geocode.send(), the value will be undefined as no request has been fired.

This totally makes sense. I can't believe i forgot that! Although I did add it to the end of the code, I still am getting the error that, it's still saying that the response is undefined — Ryan, Apr 16 '15 at 06:02
Thank you. Need to change `var userLong = results["geometry"]["location"]["lng"];` to the following to make it work `var userLong = results[0]["geometry"]["location"]["lng"];`. You need to point to the first element of the "result" array — IgorM, Jul 01 '17 at 11:01

Javascript Google Geocode Returning Undefined (Can't figure callback function)

2 Answers2