I am writing an application for finding near by resturants & other attractions using the Google Maps & Places API. I was using google places search function to help obtain information
var service = new google.maps.places.PlacesService(map);
service.search(request, callback);
but I then realised that it would not return values I needed like formatted address for the markers that I created using my search. Now what I am confused by is to get this extra information I need to use the getDetails() function. Should this replace the search function that I used above or should it be placed some time after that? When google describes it on their website it looks like it should just replace the search function because in the example it takes the same exact parameters and runs just the same as the search function yet if I do that, then it simply doesn't return any places at all.
Here is a bit of my code to help explain what I am trying to accomplish.
//Function for finding destination types. Receives destination type as a string.
function findDestinationType(where)
{
request = null;
var request =
{
location: point,
radius: 2500,
types: [where]
};
var service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);
}
//Call Back to fill array with markers & locations
function callback(results, status)
{
if (status == google.maps.places.PlacesServiceStatus.OK)
{
initialize();
iterator = 0;
markerArr = [];
for (var i = 0; i < results.length; i++)
{
markerArr.push(results[i].geometry.location);
result = results[i];
createMarker(results[i]);
}
}
else
{
alert("Sorry, there are no locations in your area");
}
}
//Function to create marker
function createMarker(place)
{
var marker = new google.maps.Marker(
{
position: markerArr[iterator],
map: map,
draggable: false,
animation: google.maps.Animation.DROP
})
//alert(markerArr[iterator]);
markersA.push(marker);
iterator++;
google.maps.event.addListener(marker, 'click', function()
{
console.log('clicked');
infowindow.setContent(place.name);
infowindow.open(map, this);
//directionsDisplay.setMap(map);
});
}
Your assumption is wrong, getDetails() expects not the same parameters, it expects a reference to a place.
The reference you will get as a result for a places-search, it's a token.
So the workflow is when you search for a place:
use places.search() for basic informations about the place
when you need more informations use places.getDetails() with the reference from step 1. as argument
Related
I am trying to make a program that can call the Google Places Api and randomly return one of the responses. Currently, my code will take in 14 different keywords one by one and make a NearbySearch all for each. Then, when it is on it's last call, it needs to select one of those options to create a marker for. The problem is, when I run my code, it returns multiple markers in stead of 1... I don't know why this is.
Any thoughts as to what is causing the problem? (see relevant code below for reference)
function callback(results, status)
{
if (status == google.maps.places.PlacesServiceStatus.OK)
{
for(var i=0; i < ratings[i][2]; i++)
{
var rand = Math.floor(Math.random() * results.length);
recommendedFood.push(results[rand])
}
}
if (last == true)
{
numlengths.push(recommendedFood.length)
var final = Math.floor((Math.random() * recommendedFood.length));
var obj = JSON.stringify(recommendedFood[final]);
createMarker(recommendedFood[final])
}
}
function createMarker(place)
{
if (place != null)
{
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({map: map, position: place.geometry.location});
map.panTo(marker.getPosition());
google.maps.event.addListener(marker, 'click', function()
{
infoWind.setContent(place.name);
infoWind.open(map, this);
});
}
}
Thanks for any input/advice you can give!
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.
in my Asp.net Web Application where i am using the setTimeout to Get rid of
geocoder OVER_QUERY_LIMIT, the shorter time out is 10ms which is too longer for me, I have 800 above addresses coming from SQL SERVER which would be increased because of this setTimeout will take about 5 to 7 mints to take places of all the markers on map and that`s frustrating. I researched and saw this link setTimeout: how to get the shortest delay
but cant figure out what he want to do actually. please someone guide me....
function InitializeMap() {
// Here am calling the webService by PageMethods in which CityNames, Countries Name will take their places
PageMethods.GetCitiesbyUser_Extender(onSucess);
var myOptions =
{
zoom: 0,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
// Creating latlngbound to bound the markers on map
var bounds = new google.maps.LatLngBounds();
//// Creating an array that will contain the addresses
var places = [];
// Creating a variable that will hold the InfoWindow object
var infowindow;
// create this to add the marker Cluster on map
mc = new MarkerClusterer(map);
var popup_content = [];
var geocoder = new google.maps.Geocoder();
// image for ballon i want to change default ballon to this
var iconimage = "http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png";
var markers = [];
// Create this function for passing the values which was taken by webservice cntName is the return in webservice
function onSucess(cntName){
// loop through the cntName to pass the individual City one by one from geocode
for (i = 0; i < cntName.length; ++i) {
//for fixing the issue use closure to localize the cntName[i] variable before passing into geocode and callback function within it.
(function CreateMarkAndInfo(address) {
geocoder.geocode({ 'address': address },
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
places[i] = results[0].geometry.location;
var marker = new google.maps.Marker({
position: places[i],
title: results[0].formatted_address,
map: map,
icon: iconimage
});
markers.push(marker);
mc.addMarker(marker);
google.maps.event.addListener(marker, 'click', function () {
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
// Setting the content of the InfoWindow afterward
infowindow.setContent(popup_content[i]);
// Tying the InfoWindow to the marker afterward
infowindow.open(map, marker);
});
// Extending the bounds object with each LatLng
bounds.extend(places[i]);
// Adjusting the map to new bounding box
map.fitBounds(bounds);
// Zoom out after fitBound
var listener = google.maps.event.addListenerOnce(map, "idle", function () {
if (map.getZoom() < 10) map.setZoom(2);
});
}
else {
// if geocode will end the limit then make delay by timer in order to avoid the OVER_QUERY_LIMIT
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
setTimeout(function () { CreateMarkAndInfo(address); }, (15)); // here i think i should use better approch but for now it`s ok.
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
}
});
})(cntName[i]);// End closure trick
}
}
}
google.maps.event.addDomListener(window, 'load', InitializeMap);
Edit:
#just.another.programmer i cant because there is no latitute and longitude in DB, client will add cities and countries by him self thats why i had to convet city and country names by geocode and geocode doing it`s job accuretly here
How i am calling the City and country Names by web service
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod()]
public static string[] GetCitiesbyUser_Extender()
{
System.Data.DataSet dtst = new System.Data.DataSet();
string ses = HttpContext.Current.Session["UserName"].ToString();
USTER.Dal.clsSearch clssearch = new USTER.Dal.clsSearch();
// Assinging the Stroed Procedure Method to DataSet
dtst = clssearch.GetAllCitiesByUser(ses);
string[] cntName = new string[dtst.Tables[0].Rows.Count];
int i = 0;
try
{
foreach (System.Data.DataRow rdr in dtst.Tables[0].Rows)
{
// Columns Name in SQL Server Table "CityName" and "CountryName"
cntName.SetValue(rdr["CityName"].ToString() +","+ rdr["CountryName"].ToString() , i);
i++;
}
}
catch { }
finally
{
}
return cntName;
}
Geocode your addresses one time when you first get them, then store the lat/long in your db so you don't have to geocode again. This will dramatically reduce your geocode requests and remove the need for setTimeout.
As per this link: http://code.google.com/apis/maps/documentation/javascript/places.html#place_search_requests
The method can take either
-a point and a radius or
-a rectangle boundary
using the point + radius gives me correct results, however the max radius is only 50 km and I need my search to be up to 1000 km, so I tried using bounds.
When my bounds are small I get the same correct results as the point + radius, however when I increase the bounds I get no results at all.
The code below will give correct results, however if you replace the var sw and var ne with the commented out coordinates, it no longer works.
ie. kitchener is found within the boundary between ayr and guelph, but not in the boundary between detroit and ottawa. Which doesn't make any sense if you look at the map.
<script type="text/javascript">
var map;
var infowindow;
function initialize() {
var Cambridge = new google.maps.LatLng(43.346528, -80.417962);
var sw = new google.maps.LatLng(43.292501,-80.543175); // 41.914541,-83.282318
var ne = new google.maps.LatLng(43.605057,-80.156250); // 45.580391,-76.283051
var zoneBounds = new google.maps.LatLngBounds(sw,ne);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: Cambridge,
zoom: 10
});
var request = {
bounds: zoneBounds,
//location: Cambridge, //using location and
//radius: 500000, //radius works
name: ['Kitchener, ON']
};
infowindow = new google.maps.InfoWindow();
var 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++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I'm supposed to be able to use PlacesServiceStatus to find the status of the request, i assume this would give me insight into the problem but I have no idea how to retrieve the status codes
Any help with this would be much appreciated
Thanks!
edit: ok, I added alert(status); and the status says it's "ZERO_RESULTS"
In the callback method you could do something like
function callback(results, status) {
window.alert(results.length);
that will tell you how many results you have, you could loop round them something like this...
for (var i = 0; i < results.length; i++) {
window.alert(results[i].formatted_address);
}
I've tried this myself and yes, if the bounds are greater than 50km then the results are pretty useless. I could guess at an answer; if the bounds are very large then it may involve too much of a hit on the Google servers. However, I don't like that answer so if someone knows better; help us out!
Another alternative is to use the Places Autocomplete -
https://developers.google.com/maps/documentation/javascript/places#places_autocomplete
You could use the geolocation but I doubt that will provide the responses you're looking for, for example if you geocode 'enfield' it will show you all the enfields in the world, if you geocode 'enf' it will show you a finish airport!
When calling search service api
var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);
var request = { location: pyrmont, radius: '500', types: ['store'] };
service = new google.maps.places.PlacesService(map);
service.search(request, callback);
is it necessary to give the location/radius of the search area?
What about if i want to search a location in total world not in specified area like google does at http://maps.google.com/.
--- UPDATE ---
This is my updated code as #Trott advised but i am getting status = "ZERO_RESULTS" in my callback function.
var keyword='search placename';
var request = { name : keyword,
bounds : new google.maps.LatLngBounds(
google.maps.LatLng(-89.999999,-179.999999),
google.maps.LatLng(89.999999,179.999999)
)};
service = new google.maps.places.PlacesService(map);
service.search(request, callback);
function callback(results, status)
{
console.log("status="+status);
if ( status == google.maps.places.PlacesServiceStatus.OK)
{
for (var i = 0; i < results.length; i++)
console.log(results[i]);
}
}
What i am doing wrong?
Calls to search() must contain either a location and a radius, or else a bounds (as a LatLngBounds object). This is documented at http://code.google.com/apis/maps/documentation/javascript/places.html#place_search_requests.
You could see what happens if you specify a LatLngBnds that covers the entire world. Haven't tried it, but if it worked, that should have the effect of searching the whole world without necessarily biasing a particular location.
LatLngBounds is documented at http://code.google.com/apis/maps/documentation/javascript/reference.html#LatLngBounds. I think you'd want to do something like this:
var sw = new google.maps.LatLng(-89.999999,-179.999999);
var ne = new google.maps.LatLng(89.999999,179.999999);
var bounds = new google.maps.LatLngBounds(sw,ne);