jQuery and Google Maps json response

问题:

I am having troubles getting geo location info from google maps api

the code is pretty straight forward

$.ajax({
    type: "GET",
    cache: false,
    url: "http://maps.googleapis.com/maps/api/geocode/json",
    dataType: "jsonp",
    data: {
        address: "Ljubljana " + "Slovenia",
        sensor: "false"
    },
    jsonpCallback:'json_response',
    success: function(data) {
        top.console.debug(data);
        $('#location_setter').dialog('close');
    },
    error: function() {
        alert("Error.");
    }
});


function json_response(data){
    alert("works");
}

I always get an error back. I tried directly too (I read somewhere that the callback should be set at the end...

$.ajax({
    type: "GET",
    cache: true,
    url: "http://maps.googleapis.com/maps/api/geocode/json?address=Ljubljana Slovenia&sensor=false",
    dataType: "jsonp",
    jsonpCallback:'json_response',
    success: function(data) {
        top.console.debug(data);
        $('#location_setter').dialog('close');
    },
    error: function() {
        alert("Error.");
    }
});

the request url is correctly formed:

http://maps.googleapis.com/maps/api/geocode/json?address=Ljubljana%20Slovenia&sensor=false&callback=json_response

and it gives me the correct json

please advise!

You can 'play' with it at http://jsfiddle.net/PNad9/

回答1:

if it helps somebody... I gave up and I completely change the logic itself and now it works as expected:

first I appended google maps js into the body

var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = 'http://maps.google.com/maps/api/js?sensor=false&callback=get_longlat';
$("body").append( script );

as you can see I specified the callback function get_longlat...

so I defined this function and used google's geocode object

function get_longlat(address){

    var geocoder = new google.maps.Geocoder();

    if(!address){
        var p = US.get("location_postal");
        var c = US.get("location_city");
        var a = US.get("location_address");
        var address = a + ', ' + p + ' ' + c + ', Slovenia';
    }

    if (geocoder) {
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                US.set("location_lat", results[0].geometry.location.lat(), 60);
                US.set("location_lon", results[0].geometry.location.lng(), 60);

                $('#location_setter').dialog('close');
            } 
            else {
                console.log('No results found: ' + status);
            }
        });
    }
}

The US variables inside is our own namespace for USER SETTINGS

hope it helps somebody

回答2:

Here is a good post on why you were experiencing the behavior from the original question. The URL you are making the request to google at (http://maps.googleapis.com/maps/api/geocode/json) doesn't return a jsonp parseable response, it just returns a raw JSON object. Google refuses to wrap the JSON in the callback supplied.

The fix for this, more or less from what I can tell, is to make your request to this URL: http://maps.google.com/maps/geo and to include a Google Maps API key in your request. Also there seems to be some necessity in ensuring that the callback parameter in the request is the last parameter of the querystring.

Here is a jsfiddle of a parseable response from the service (even though it is returning an error because there is no valid Google Maps API key provided): http://jsfiddle.net/sCa33/

The other option is to do what you have already done, it seems, and use Google's Geocoder object to run the request.

回答3:

I have taken a look at the problem but I cannot figure out what's going on. One thing I did find was that if I add a data parameter to the error and then alert(data.status) it gives code 200. The only place I could find this was to resolve it to the success code for v2?!

error: function(data) {
    alert(data.status);
}

Also I'm not sure you can use that jsonp because reading the documentation it seems to put extra paramaters on the querystring? When I removed it the jsonpcallback and change the datatype to json the response code started saying 0.

Not much help sorry but I've gotta go to work now.

回答4:

function codeAddress(address, title, imageURL) {
            console.log(address);

            geocoder.geocode({'address': address}, function (results, status) {
                console.log(results);
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);

                        var marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location,
                            icon: "",
                            title: title
                        });

                    /* Set onclick popup */
                    var infowindow = new google.maps.InfoWindow({content: title});
                    google.maps.event.addListener(marker, 'click', function () {
                        infowindow.open(marker.get('map'), marker);
                    });
                }
                else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                    setTimeout(function () {
                        codeAddress(address, title, imageURL);
                    }, 250);
                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });