Jquery – using jquery.getJson with Google’s GeoCoding HTTP Service

geocodinggetjsonjquery

Google offers a wonderful REST interface for geocoding and reverse geocoding an address. My API key is valid, and if I enter the request directly into the browser address it works great. However, the following jquery fails terrible and I'm failing to see why. Hoping you could help me out here.

$.getJSON("http://maps.google.com/maps/geo?q="+ address+"&key="+apiKey+"&sensor=false&output=json",
  function(data, textStatus){
     console.log(data);
  });

Google's REST interface doc for this service: http://code.google.com/apis/maps/documentation/geocoding/index.html

Best Solution

The problem here is that I wasn't specifying the JSONP callback. The correct code is as follows

$.getJSON("http://maps.google.com/maps/geo?q="+ address+"&key="+apiKey+"&sensor=false&output=json&callback=?",
  function(data, textStatus){
     console.log(data);
  });

Related Solutions

Javascript – Google Geocode via HTTP callback function

Here is an example that uses the Google Maps Geocoder. The geocoder function getLocation takes a callback function as the second argument.

function findAddress(street, city, state, zip) {
  var address = [
    street,
    city.toLowerCase(),
    state.toLowerCase(),
    zip
  ].join(', ');

  if (!geocoder) {
    geocoder = new GClientGeocoder();
  }

  if (geocoder) {
    geocoder.getLocations(
      address,
      function(result) {
        var dialog, len, point;
        if (result.Status.code != G_GEO_SUCCESS) {
          alert("Error: "+result.Status.code)
        } else {
          len = result.Placemark.length;
          if (len > 1) {
            alert("Multiple matches were found.  I'll leave it as an exercise to handle this condition");
          } else {
            point = new GLatLng(
              result.Placemark[0].Point.coordinates[1],
              result.Placemark[0].Point.coordinates[0]
            );
          }
        }
      }
    );
  }
}

Javascript – geocoding function works when called in initialized, but not in onclick script

Looks to me right after codeAddress(); is called on the onclick event, your POST is done immediately. Thus it looks to you that the code failed, but in fact it is working.

What you can do is:

1) Remove the form, just a button using the onclick event. Example:

<input type="button" value="Submit" onclick="codeAddress();" />

2) Disable submitting form when event onclick hits by adding return false;. Example:

<form action="" method="POST">
<!-- stuff -->
<input type="Submit" value="Submit" onclick="codeAddress();return false;" />
</form>

Best Solution

Related Solutions

Javascript – Google Geocode via HTTP callback function

Javascript – geocoding function works when called in initialized, but not in onclick script

Related Question