I'm having hard time with this simple ajax call
function sendreq()
{
$.ajax({
dataType: 'jsonp',
url: 'http://maps.googleapis.com/maps/api/distancematrix/json?origins=Seattle&destinations=San+Francisco&mode=driving&sensor=false',
success: function (jsonp)
{
alert('success');
}
});
}
I'm able to see the api result in json format when i hit the url from browser and seems like jQuery sees the result too but is unable to parse.
it throws an error
invalid label "destination_addresses" : [ "San Francisco, CA, USA" ],
im using jQuery 1.7.1. from ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
any help would be appreciated
thanks.
You can't get Distance Matrix's data by Ajax, because of Same Origin Policy. If you are using Google Distance Matrix API , the only way you can retrieve that data, is from your server-side script. The other method is, you can use Distance Matrix Service. For both methods(API and Service) you have to notice Usage Limits and Requirements:
Use of the Distance Matrix service must relate to the display of
information on a Google Map; for example, to determine
origin-destination pairs that fall within a specific driving time from
one another, before requesting and displaying those destinations on a
map. Use of the service in an application that doesn't display a
Google map is prohibited.
Maybe you need to use the JavaScript API?
http://www.quora.com/Why-doesnt-the-Google-Maps-API-support-JSONP,
http://blog.futtta.be/2010/04/09/no-more-jsonp-for-google-geocoding-webservice
Related
I am very new to javascript .. and my teacher provided us with this piece of code along with html and css file which on any date you enter gives you images of mars taken from ISS..
Would anyone care to explain what is happening inside the data: {} and how to get such API URL'S? I mean from where do we get that?
var input_box=$('#div-date input');
var button=$('#div-button button');
var container2=$('#container2');
button.click(function()
{
$.ajax({
method: "GET",
url: "https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos",
data:
{
earth_date:parseInt(input_box.val().split('/')[2]).toString()+"-
"+parseInt(input_box.val().split('/')[1]).toString()+"-
"+parseInt(input_box.val().split('/')[0]).toString(),
api_key:"zrVafsMHD8r1SC8mHyg91mnNguuzdIoPRXGD1BvS"
},
The ajax method is a call to NASA endpoint where you are doing a GET call to the URL. I thinks this is clear.
Now, what does data?
earth_date is a value with the actual date parsed to a specific format. It get the date from the input_box with format 00/00/0000 and parse to format 0000-00-00
api_key is the key you need to authenticate and get the data.
And data itself is the way to send variables into URL. So, your url looks like this:
https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=YOUR_DATE&api_key=YOUR_API_KEY
Note that is compound by:
url+ ?earth_date + api_key.
Updated to answer the question:
The API key is a way to secure the API.
An API key is a way to identify who is calling the endpoint. So only calls that have the API key will be able to reach the endpoint (or whatever the developer want).
Is an string generated by the owner so the only way to get the API key is NASA to give it to you. I suppose NASA give free API keys, but is not a "general string" or something like that. Every organization will secure their apis in a way, NASA provide api keys to reach his 'free' endpoints.
The code in the data transform the date format '30/12/2019' to '2019-12-30' since only the later format is valid for the request.
I have implemented the Here Places API for autocomplete suggestions. However a lot of places aren't showing up unless you type in the address. For example if I search for "Depannage 2ade" or different variant of that name, I dont get any results. However if I type in the physical address, I can get a result.
I figured this was because there wasn't enough information on the place in the Here app however I went on mapcreator.here.com to add information on the place in hope of adding it but I found that by typing in the address, in the map creator the name is already there. So I was wondering if there was maybe a parameter missing from my request that were preventing some places to show or maybe something that I'm doing wrong.
$.ajax({
url: "https://places.cit.api.here.com/places/v1/autosuggest" +
"?app_id=KEY" +
"&app_code=KEY",
dataType: "json",
data: {
q: val,
at: companyGeo.replace(" ",""),
size: '5',
result_types: 'address,place',
addressFilter: 'countryCode=fra'
},
type: "GET",
});
Basically I used address and places as filter and I search within the country of France. I can only find the place by typing the address and not the name. This isn't the case for ALL places but for many it is, and I find that odd since in the mapcreator they do have a place name entered.
Make sure you are using the new Places base URL:
https://places.ls.hereapi.com which uses the latest authentication method (apiKey). So retry your query with this new API URL.
Note also that the cit environment is only for testing and should not be used in production.
https://developer.here.com/documentation/places/dev_guide/common/request-cit-environment-rest.html
https://developer.here.com/documentation/places/dev_guide/topics/request-constructing.html
I'm trying to make a client-side jquery request on an HTML page (in my Spring project) to the Google Places API so I can determine the ratings of a particular business type within a radius of x,y. At the moment I'm trying to do it like so:
function getCafe(){
$(document).ready(function(){
$('.search_latitude').val(marker.getPosition().lat());
$('.search_longitude').val(marker.getPosition().lng());
// These are lat long values calculated by the user's searched location on a google map on the client side
var Lat = marker.getPosition().lat();
console.log(Lat);
var Long = marker.getPosition().lng();
console.log(Long);
var cafeRatings = [];
// Ive disclosed my API Key
var url = "https://maps.googleapis.com/maps/api/place/nearbysearch/xml?location=" + Lat + "," + Long + "&radius=500&type=restaurant&keyword=cruise&key=MY_API_KEY";
$.ajax({
type: "GET",
dataType: "xml",
url: url,
success: function(xml) {
$(xml).find('results').each(function(){
$(this).find("rating").each(function(){
var rating = $(this).text();
cafeRatings.push(rating);
});
});
//This is a simple debug to display the contents of the rating array to ensure the parse worked correctly
alert(cafeRatings.join("\n"));
}
});
});
}
However Michael Geary's answer to this question Google's Places API and JQuery request - Origin http://localhost is not allowed by Access-Control-Allow-Origin has lead me to believe I cannot use an Ajax jquery to access the API this way and I have to "use the Places Library from the Maps API V3. (As I) can't just hit a URL directly from JavaScript or jQuery code."
With that being said I've found the documentation to do this to be quite broad and resources online seem to be quite limited. Has anyone any experience on how to simply get the rating elements from the API stored into an array in JS so I can calculate the average and display it in a text box?
In case it's needed this how the XML formatted API looks
<PlaceSearchResponse>
<status>OK</status>
<result>
<name>Sydney Showboats</name>
<vicinity>32 The Promenade, Sydney</vicinity>
<type>travel_agency</type>
<type>restaurant</type>
<type>food</type>
<type>point_of_interest</type>
<type>establishment</type>
<geometry>
<location>
<lat>-33.8675570</lat>
<lng>151.2015270</lng>
</location>
<viewport>
<southwest>
<lat>-33.8689120</lat>
<lng>151.2001126</lng>
</southwest>
<northeast>
<lat>-33.8662141</lat>
<lng>151.2028105</lng>
</northeast>
</viewport>
</geometry>
<rating>3.8</rating> <------ This is the element im trying to ad to the array
<icon>
https://maps.gstatic.com/mapfiles/place_api/icons/generic_business-71.png
</icon>
<reference>
CmRSAAAALItuCtuLapozzsjq3dmKqj7NDik149XsgUwHD3ob5AWfHYlZtykuJbQa0cq0GMqX8dRgucTCmitnXgV-ekE3GfV7910rzHhx3ZuadVYNuWMzLDVZDCj2G1yiBw8r_hhgEhCPDXsniaZ2ZrkvYyXFfmQrGhSzdmkAEz4stXNx2qFe-GqAlldzgw
</reference>
<id>ce4ffe228ab7ad49bb050defe68b3d28cc879c4a</id>
<opening_hours>
<open_now>false</open_now>
</opening_hours>
<photo>
<photo_reference>
CmRaAAAAh4dP9hsZ_6515QNxouVnuYFYKemmf8BE01rcaOvkFlILQiwGNe_OAX0ikmobMmWZJvyjsFEsn7j1TFhauHSrek8nY5GsW24_6nwJsqEwHTUC10SL5gQITHhkdam50G1PEhCP-C7Of2mkjqJCTYFeYGWuGhQjVoWASHiGSp3WHm26Bh2sYOglZw
</photo_reference>
<width>2048</width>
<height>1152</height>
<html_attribution>
Sydney Showboats
</html_attribution>
</photo>
<place_id>ChIJjRuIiTiuEmsRCHhYnrWiSok</place_id>
<scope>GOOGLE</scope>
</result>
........
</PlaceSearchResponse>
My previous advice remains the same: you can't use the server-oriented web service version of the Places API. You have to use the JavaScript client library. It is much easier to use than the web service API (even if you were allowed to use that), because you don't have to parse any XML, just access the object properties that the client library provides.
There are several examples in the Places Library documentation. The Place Search example is fairly close to what you are doing. It looks like you want to access the rating for a place, and that is easy with the JavaScript library; simply use the rating property of your place object (or whatever name you give that variable).
I took the Place Search example and updated the fiddle to illustrate accessing the rating property. Try it out and see if it helps answer your question.
In any case, the bottom line is unchanged: you can't use the web service API, you need to use the JavaScript client library, but that is a Good Thing, as the client library does most of the work for you.
If the question is how to compute the average rating for the places you receive back from the API, that is simple: write a loop and do the arithmetic. If you look at the fiddle you will see where it has a loop that iterates over the results variable that the API callback receives. The loop in the fiddle creates a marker for each element of results, but you can do whatever you want there. Just add up all the rating values and divide the total by results.length and you have your average. Of course check that the length is nonzero, so you don't divide by zero.
For example, if you have a results variable with the array of places results, you could do:
var totalRating = 0;
results.forEach( function( place ) {
totalRating += place.rating;
});
var averageRating = results.length == 0 ? 0 : totalRating / results.length;
So I am sure that there is a simple solution to my problem but I just can't seem to find an answer. I have an application that has two users place map markers onto a google maps map (and they can see eachothers markers). I want to find the average latitude and longitude and then use the Places API to get JSON that contains nearby locations from that average so the users can decide on a middle ground.
My problem is occurring with getting getting the JSON. Because it is cross domain I can't just use an AJAX call (and the API does not support jsonp). So I was hoping to do this client side in javascript. There are numerous tutorials out there for how to use the Places API when an actual map is on the screen, so how could I do this without the map and just the JSON data?
My application is using JavaScript, JQuery, and Java (a Jersey REST service). I read that there are ways to set up cross domain calls but those all seemed to apply to PHP.
If your application displays Places API data on a map, that map must be provided by Google.
If your application displays Places API data on a page or view that does not also display a Google Map, you must show a "Powered by Google" logo with that data. For example, if your application displays a list of places on one tab, and a Google Map with those places on another tab, the first tab must show the "Powered by Google" logo.
The following ZIP file contains the "Powered by Google" logo in the correct sizes for desktop, Android and iOS applications. You may not resize or modify these logos in any way.
Download: powered-by-google.zip
Read here: https://developers.google.com/maps/documentation/javascript/places#LogoRequirements
To use the Places library, just include the library in the API call and give the Places Service an HTML element instead of a map object:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
Code:
var request = {
location: new google.maps.LatLng(52.48,-1.89),
radius: '500',
types: ['store']
};
var container = document.getElementById('results');
var service = new google.maps.places.PlacesService(container);
service.nearbySearch(request, callback);
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
container.innerHTML += results[i].name + '<br />';
}
}
}
JSFiddle demo
I want to make a call to OpenWeatherMap API with javascript (and maybe jQuery?) to this URL
http://api.openweathermap.org/data/2.5/weather?lat=(here comes the lat for a variable)&lon=(lon from variable)
Then parse the API output(It's JSON I think) to get the
"main":"Clear" and "temp":271.997
And set the "main" and "temp" variables to js variables, and send them to innerHTML.
Can somebody make a script example, please?
Thanks for the help and sorry the bad english.
Because you are parsing a json file that is on another server (not local) you will need to use JSONP. Essentially you use ajax to pass a callback parameter to open weather map. This enables you to use the data in your script.
The following jquery will use coordinate variables to generate a link to the json file, parse the data using jsonp and display the information in a web element with id "weather".
You will most likely want to add error handling and create a local cache of the data for visitors, and then load the cache if it is recent. I hope this helps you out.
var lat=00.00 //latitude variable
var long=00.00 //longitude variable
var data_url="http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"";
//function to pull information out of the json file and stick it into an HTML element
getWeather(function (data) {
var weather_html = data.weather[0].description + "nbsp;" + data.main.temp;
document.getElementById('weather').innerHTML = weather_html;
});
// function to use jsonp to get weather information
function getWeather(callback) {
$.ajax({
dataType: "jsonp",
url: data_url,
success: callback
});
};