Get address coordinates of Google Maps API by ajax() request

Question

I'm trying to get lng and lat coordinates of the Google Maps API by the next example http://jsbin.com/inepo3/7/edit. I expect a 'success' popup, but it keeps showing the 'Error' popup. The google maps-request gives the correct json feedback (checked by firebug).

<script type="text/javascript">
    $().ready(function() {

        $.fn.getCoordinates=function(address){

            $.ajax(
            {
                type : "GET",
                url: "http://maps.google.com/maps/api/geocode/json",
                dataType: "jsonp",
                data: {
                    address: address,
                    sensor: "true"
                },
                success: function(data) {
                    set = data;
                    alert(set);
                },
                error : function() {
                    alert("Error.");
                }
            });
        };

        $().getCoordinates("Amsterdam, Netherlands");
    });
</script>

Does anyone know how to fix this issue?

Regards, Guido Lemmens

EDIT

I found a bether solution using the Google Maps Javascript API combined in jQuery:

<script type="text/javascript">
    $().ready(function() {
        var user1Location = "Amsterdam, Netherlands";
        var geocoder = new google.maps.Geocoder();
        //convert location into longitude and latitude
        geocoder.geocode({
            address: user1Location
        }, function(locResult) {
            console.log(locResult);
            var lat1 = locResult[0].geometry.location.lat();
            var lng1 = locResult[0].geometry.location.lng();
            $("#testDiv").html("latitude:" + lat1 + "<p>longitude:" + lng1 + "</p>");
        });
    });
</script>

Solution

Google Map API V3 makes it harder for external libraries to work with JSONP. Here is a blog post about it.

JSONP and Google Maps API Geocoder Plus A Fix w/ jQuery

---

An alternative way of getting Geocoding is to use the Google Map V3 API Geocoder Service. Here is an example that i helped a person that was having a similar issue as you to replace his JSONP to use Google Map V3 Geocoder Service. Take a look at this JSFiddle Demo:

This is basically the core. We basically use twitter to get the tweet's address (IE. London, Madrid or Georgia etc) and convert the actual address into LatLng using Google Map's Geocoder Service:

$.getJSON(
    url1, function(results) { // get the tweets
        var res1 = results.results[0].text;
        var user1name = results.results[0].from_user;
        var user1Location = results.results[0].location;

        // get the first tweet in the response and place it inside the div
        $("#last-tweet1").html(res1 + "<p>from: " + user1name + " (" + user1Location + ")</p><p>");
        //convert location into longitude and latitude
        geocoder.geocode({
            address: user1Location
        }, function(locResult) {
            console.log(locResult);
            var lat1 = locResult[0].geometry.location.lat();
            var lng1 = locResult[0].geometry.location.lng();
            $("#testDiv").html("latitude:" + lat1 + "<p>longitude:" + lng1 + "</p>");
        });
    });

Comments

[Guido Lemmens 2]

Cool, i just worked out your example and add it to my original post. This works perfect!

[KJYe.Name]

@Fincha i answered this question about a year ago, but i suppose you can show me what you've tried so far on a jsfiddle or something.

[KJYe.Name]

@Fincha crossdomain error using Google Map v3 geocoder service?