I’ve been struggling with this problem for 3 long days and have reached the end of my troubleshooting abilities. I need to get the Walk Score for a specific address from the Walk Score API. The API takes 3 parameters: address, latitude, and longitude.
When I use the sample code from Walk Score, I get the result that is expected. Sample code here: walkscore.com/professional/api-sample-code.php. Here it is working on my server: http://bigdevelopment.com/walkscore/ (straight PHP, not on WordPress)
When I take the same code (only adding “data” and “dataType”) and dump into WordPress, I can not display the Walk Score JSON I receive from the API. Here is my code:
get_score.js
function injectWalkScore(address,lat,lon){
address = encodeURIComponent(address);
var url="http://suitesearch.bigdevelopment.com/wp-admin/admin-ajax.php?address=" + address + "&lat=" + lat + "&lon=" + lon;
jQuery.ajax( {
url: url,
data: {
action: 'getwalkscore'
},
dataType: 'JSON',
type:'GET',
success: function(data) { displayWalkScores(data); },
error: function(){ displayWalkScores(""); }
}
);
}
//to demonstrate all of our formatting options, we'll pass the json on to a series of display functions.
//in practice, you'll only need one of these, and the ajax call could call it directly as it's onSuccess callback
function displayWalkScores(jsonStr) {
displayWalkScore(jsonStr);
}
//show the walk score -- inserts walkscore html into the page. Also needs CSS from top of file
function displayWalkScore(jsonStr) {
var json=(jsonStr) ? eval('(' + jsonStr + ')') : ""; //if no response, bypass the eval
//if we got a score
if (json && json.status == 1) {
var htmlStr = '<a target="_blank" href="' + json.ws_link + '"><img src="' + json.logo_url + '" /><span class="walkscore-scoretext">' + json.walkscore + '</span></a>';
}
//if no score was available
else if (json && json.status == 2) {
var htmlStr = '<a target="_blank" href="' + json.ws_link + '"><img src="' + json.logo_url + '" /> <span class="walkscore-noscoretext">Get Score</span></a>';
}
//if didn't even get a json response
else {
var htmlStr = '<a target="_blank" href="walkscore.com"><img src="http://cdn.walk.sc/images/api-logo.gif" /> <span class="walkscore-noscoretext">Get Score</span></a> ';
}
var infoIconHtml = '<span id="ws_info"><a href="walkscore.com/live-more" target="_blank"><img src="http://cdn2.walk.sc/2/images/api-more-info.gif" width="13" height="13"" /></a></span>';
//if you want to wrap extra tags around the html, can do that here before inserting into page element
htmlStr = '<p>' + htmlStr + infoIconHtml + '</p>';
//insert our new content into the container div:
jQuery("#walkscore-div").html(htmlStr);
}
this is my functions snippet:
add_action('wp_ajax_nopriv_getwalkscore_function', 'getwalkscore');
add_action('wp_ajax_getwalkscore_function', 'getwalkscore');
function getwalkscore($lat, $lon, $address) {
$address=urlencode($address);
$url = "http://api.walkscore.com/score?format=json&address=$address";
$url .= "&lat=$lat&lon=$lon&wsapikey=93cc71faa070aa6d13dc3d84c1316671";
$str = @file_get_contents($url);
echo $str;
}
$lat = $_GET['lat'];
$lon = $_GET['lon'];
$address = stripslashes($_GET['address']);
$json = getwalkscore($lat,$lon,$address);
echo $json;
In my template page, I have this:
<body onload="injectWalkScore('17901 Von Karman Avenue Irvine, CA 92614', '33.6832054', '-117.8497199')" <?php body_class(); ?>>
and on the test page itself, I just have this:
<div id="walkscore-div"></div>
The resulting page does not give me a walkscore but responds as if there was an error:
suitesearch.bigdevelopment.com/testing-page/
As you can see, I do get the correct response from the API but I can not display the JSON response on the template page.
any help would be greatly, greatly appreciated.
