Google Maps API with jQuery and JSONP

by nicolas tenorio

HTML

<button id='ajax'>Make AJAX Call</button>










<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/19793406/1366033'>Issue using jQuery to do a google maps api call</a><br/>
    Google Maps API Documentation <a href='https://developers.google.com/maps/documentation/directions/'>Directions</a><br/>
    jQuery Documentation: <a href='http://api.jquery.com/jQuery.getJSON/'>Get JSON</a><br/>
<div>

JavaScript

var mapsUrl = 'http://maps.googleapis.com/maps/api/directions/json'+
              '?origin=Toronto&destination=Montreal&sensor=false';

$(function(){  
    $("#ajax").click( function() {
        $.ajax({
            url: "http://wsmio.siur.com.co:8083/apiMIO/jaxrs/pevrs",
            dataType: 'jsonp',
            cache: false,
            success: function (data) {
                alert(showTime(data));
            }
        });
    });
});

function proxyUrlJsonp(url) {
    var encodedUrl = encodeURIComponent(url);
    var proxyUrl = 'http://jsonp.guffa.com/Proxy.ashx?url=' + encodedUrl;
    return proxyUrl;
}

function showTime(data) {
    var leg = data.routes[0].legs[0];
    var msg = 'Time from ' +
              leg.start_address + ' to ' +
              leg.end_address + ' is ' +
              leg.duration.text + '!';
    return msg;
}