i searched all the morning how can I retrieve my json data from a google api, but after I saw a lot of questions I still cannot figure out what i've to do. I think I'm confused about this point, so please if you will downvote could you kindly give me at least a comment or something that can really help me ?
Expected behaviour
i expect to console log or to access something like this
[
{
"restaurantName":"Bronco",
"address":"39 Rue des Petites Écuries, 75010 Paris",
"lat":48.8737815,
"long":2.3501649,
"ratings":[
{
"stars":4,
"comment":"Great! But not many veggie options."
},
{
"stars":5,
"comment":"My favorite restaurant!"
}
]
},
{
"restaurantName":"Babalou",
"address":"4 Rue Lamarck, 75018 Paris",
"lat":48.8865035,
"long":2.3442197,
"ratings":[
{
"stars":5,
"comment":"Tiny pizzeria next to Sacre Coeur!"
},
{
"stars":3,
"comment":"Meh, it was fine."
}
]
}
]
Code
this is my javascript about the gmaps, autocomplete and the input search.
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13,
mapTypeId: 'roadmap'
});
initialize();
google.maps.event.addListener(map, 'rightclick', function(event) {
placeMarker(event.latLng);
console.log(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
}
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
//check if the first sectin is already Up
if(!sectionShow){
$(".columnsContainer").fadeIn();
sectionShow=true;
}
//automatic movements of the scroll
document.querySelector('#map').scrollIntoView({
behavior: 'smooth'
});
var places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
review = [];
//this jquery line delete the previous card if you start another research
$(".card-grid").parent().find('.card-wrap').remove();
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds();
places.forEach(function(place) {
//hai aggiunto bounds, ricorda che stai cercando di passare le coordinate posto per posto.
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
containerPlace=places;
var photos = place.photos;
if (!photos) {
return;
}
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// remember to make an object instead of these variables
var photo = photos[0].getUrl({'maxWidth': 800, 'maxHeight': 900})
var title = place.name;
var rating = place.rating;
var address = place.formatted_address;
var idPlace = place.place_id;
console.log(idPlace);
printCard(photo, title, rating, address, idPlace);
initMap(idPlace, map);
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
infoWindow = new google.maps.InfoWindow;
// GeoLocation from Here
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
$(".columnsContainer").fadeIn();
document.querySelector('#map').scrollIntoView({
behavior: 'smooth'
});
infoWindow.setPosition(pos);
infoWindow.setContent('You are here');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
My Try
I tried to add this lines of codes, but it doesn't work
$.getJSON("https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=36.950030,14.537220&radius=500&type=restaurant&key=AIzaSyDWb4mliJPGjwsAhNvdDEveAd0dTe9KXxE&callback=?", function(data){
console.log("Data: " + data);
});
I have this console log with the answer of @markymark :
Access to XMLHttpRequest at from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
Questions that helps me
- Getting JSON of Google Places Nearby Search
- How to capture and parse JSON returned from Google Maps v3 API? ( this is really interesting )
- https://developers.google.com/places/web-service/search
codepen
So i read about the CORS in this question
