Question: How can I get the ~same JSON response that I get when I call Google Places server-side API /textsearch/ in my browser, but using Google Places JS Library instead?
Here is the server-side Google Places API /textsearch/
https://maps.googleapis.com/maps/api/place/textsearch/json?query=restaurants+pyrmont&key=AIzaSyAXPJDWXhzlAY0N8mMUcgFJ6yNSEd0vMg8
Here is the sample code:
I've tried to console.log() the JSON, but I can't get any JSON to log to the console.
var map;
var service;
var infowindow;
function initialize() {
var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);
map = new google.maps.Map(document.getElementById('map'), {
center: pyrmont,
zoom: 15
});
var request = {
location: pyrmont,
radius: '500',
query: 'restaurant'
};
service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
createMarker(results[i]);
}
console.log(place.id)
}
}
Here's the documentation in case it's helpful: https://developers.google.com/maps/documentation/javascript/places#TextSearchRequests
Thank you for any help you can provide!
Related
I followed the code example for the findPlaceFromQuery() method from https://developers.google.com/maps/documentation/javascript/places#find_place_from_query.
I have the exact code for the query part. However, the PlacesServiceStatus returned is always not OK. I tried changing the query value in the request object but the result is always the same.
Any idea why this is happening?
I'm pasting the relevant code snippet below for easy reference. It's mostly the same as the sample code. I just added the else clause at the end:
var map;
var service;
var infowindow;
function initMap() {
var mapCenter = new google.maps.LatLng(-33.8617374,151.2021291);
map = new google.maps.Map(document.getElementById('map'), {
center: mapCenter,
zoom: 15
});
var request = {
query: 'Museum of Contemporary Art Australia',
fields: ['photos', 'formatted_address', 'name', 'rating', 'opening_hours', 'geometry'],
service = new google.maps.places.PlacesService(map);
service.findPlaceFromQuery(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
createMarker(results[i]);
}
}
else{
alert("status bad");
}
}
A couple of prerequests that people need to be aware of for this code to work. For the places API request to work the following action must be performed:
The places library must be added explicity from the calling method like so &libraries=places. This is because the places API doesn't come as standard with the maps API.
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY& libraries=places&callback=YOUR_CALLBACK_METHOD"></script>
The API key used must have the right places credentials from the google console. This link exaplains how this can be done.
Does anyone know why my "nearbySearch" google place search is missing data?
When I do a nearby search using the places API, every weekday_text array returns as empty but when I do a "getDetails" request to one of the locations in the initial search, the weekday_text is returned.
http://codepen.io/anon/pen/RGBVJR
var map;
var service;
// Nearby search
var showPosition = function() {
var geolocation = new google.maps.LatLng(51.5074, -0.1278);
map = new google.maps.Map(document.getElementById('map'), {
center: geolocation,
zoom: 15
});
var request = {
location: geolocation,
radius: '500',
types: ['bar']
};
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
};
showPosition();
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
console.log(results);
}
}
// Direct location check
function altTest() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(51.5074, -0.1278),
zoom: 15
});
var service = new google.maps.places.PlacesService(map);
service.getDetails({
placeId: 'ChIJ78fbAc8EdkgRWG1dhffz9AY'
}, function (place, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
console.log(place.opening_hours.weekday_text);
}
});
}
altTest();
<div id="map">
</div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
Please see the console.logs to see the data discrepancy.
Any ideas why this is the case? I would rather not have to do a second API request to retrieve the weekday requests.
Thanks,
Tom
nearbySearch returns an array of PlaceResult objects.
As you can see here, PlaceResult doesn't have weekday_text property.
Ive been working on a Google Maps application and have hit a hurdle due to a lack of knowledge in js me thinks?!
So... here's my JSON object
{"pickuppoint0":"LE9 8GB","pickuppoint1":"LE2 0QA","pickuppoint2":"LE3 6AF","pickuppoint3":"LE2 8GB","pickuppoint4":"LE8 8TE","pickuppoint5":"LE2 2GB","pickuppoint6":"LE1 6AF"}
And here's a loop through the JSON object...
$.each(alltravelgroups, function(k, v){
for(var i=0; i < boxes.length; i++){
var bounds = boxes[i];
if(bounds.contains(getLatLng(v))){
alert("im here");
}
}
});
And here's my getLatLng() method I've created...
function getLatLng(pickuppoint) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': pickuppoint}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
return results[0].geometry.location
} else {
alert('getLatLng Geocode was not successful for the following reason: ' + status);
}
});
}
Now... what I'm trying to do is simply take the value from each key/value pair and produce a LatLng object that can then be used within the "bounds.contains()" method for searching within the bounds box provided by the RouteBoxer class.
The problem I'm facing is the value returned by the getLatLng method is "undefined" when using alert(getLatLng(v)) and should just be a 'location' containing both latitude and longitde? Anyone able to point what I'm doing wrong?
Please refer the link below.
http://jsfiddle.net/y829C/13/
var mapOptions = {
center: new google.maps.LatLng(-33.8665433, 151.1956316),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
In the above code, semicolon is missing in return results[0].geometry.location.
I have been sifting through documentation unsuccessfully and need help. I need to access the first value in Google places autocomplete or geocode the lat lng coords I have in Google Places. I am auto populating the field with say "Palo Alto" and need Google Places' first suggestion for an auto complete of that city. I have tried using the Google Geocode feature but the results are different than the Places API and therefore useless to me. Example places outputs Palo Alto, CA and the geocode feature outputs Palo Alto, CA USA. I have tried hacking it together by reverse geocoding the lat lng splitting the string above to only say Palo Alto and populating an input field that is hooked into a Places autocomplete, but I can't get it to trigger. I have a script written to pull the output from the autocomplete results; I just need to trigger it. I have tried using $('myCity').trigger('keypress'); once I have inserted Palo Alto into the input field to no avail. All suggestions on what steps to take next are welcome. I have also looked into the following code, but I want to do it without the map and i get a javascript error when i remove it. "TypeError: a is undefined [Break On This Error] (66 out of range 46)"
var lat = -130;
var lng = 37;
var request = {
location: new google.maps.LatLng(lat, lng);
};
var service = new google.maps.places.PlacesService(map);
service.search(request, function (results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
console.log(results[i])
}
}
});
Thanks for your help.
You need to perform a Text Search.
Go to Places Library and go down to Text Search Requests.
Heres an example:
var map;
var service;
var infowindow;
function initialize() {
var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: pyrmont,
zoom: 15
});
var request = {
location: pyrmont,
radius: '500',
query: 'restaurant'
};
service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
createMarker(results[i]);
}
}
}
Note: In your case change the request to this:
var request = {
query: 'Palo Alto'
};
I need the list of locations (areas/subareas) in a particular city.
I thought, google api might be a possible option to fetch this. if i pass city's lat/long and radius then there must be some way to fetch the list of locations.
however i could not find any possible solution?
Can any one help me out?
Yeah, Google Maps JavaScript API V3 can be a good solution for it. If you check this website, there is a similar example of it:
var map;
var service;
var infowindow;
function initialize() {
var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: pyrmont,
zoom: 15
});
var request = {
location: pyrmont,
radius: '500',
types: ['store']
};
service = new google.maps.places.PlacesService(map);
service.search(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
createMarker(results[i]);
}
}
}
There it finds stores in a specific radius from Pyrmont. You can take a look at it documentation, change the type parameter (see this list) for whatever you want and get its result in that callback function. After that, you could use those cities' info for your purpose.