google places library without map

Question

I am trying to use the google places library for a nearby search request: https://developers.google.com/maps/documentation/javascript/places#place_search_requests

i just want to pull the json response and put it in a html list, i do now want to show results on a map or something else. I do not want to use map at all. But in documentation it states that there has to be a map

service = new google.maps.places.PlacesService(**map**);

in order to pass it as an argument in the PlacesService function. What i do now is adding a map with height:0 but it still consumes much amount of memory (i develop a sencha touch 2 app and memory is important). Is there any workaround of using nearby search requests without a map? I do not want to use the Google Places API as it does not support JSONP requests.

Solution 1

As documented the PlacesService accepts as argument either a map or an node where to render the attributions for the results.

So you only have to use the node (a node being an html element) instead of the map.

Please note: hiding the attributions violates the places-policies(also hiding the map when used as argument, because the map will show the attributions)

This also may be interesting to you: Google places API does this violate the TOC?

---

Example: in a nutshell

If you're using jQuery:

var service = new google.maps.places.PlacesService($('#tag-id').get(0));

If plain Javascript:

var service = new google.maps.places.PlacesService(document.createElement('div'));

Then carry on as usual with the rest of the example code:

  service.nearbySearch(request, callback);

---

Example: using details returned

Live demo of this example on jsFiddle.

Note: This example uses jQuery.

<ul class="reviews__content" id="reviews__content">
</ul>
<div id="service-helper"></div>

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY_HERE&libraries=places&callback=getRelevantGoogleReviews">
</script>
<script type="text/javascript">
   window.getRelevantGoogleReviews = function(){
     var service = new google.maps.places.PlacesService($('#service-helper').get(0)); // note that it removes the content inside div with tag '#service-helper'

     service.getDetails({
         placeId: 'ChIJAwEf5VFQqEcRollj8j_kqnE'  // get a placeId using https://developers.google.com/places/web-service/place-id
        }, function(place, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
              var resultcontent = '';
              for (i=0; i<place.reviews.length; ++i) {
                //window.alert('Name:' + place.name + '. ID: ' + place.place_id + '. address: ' + place.formatted_address);
                resultcontent += '<li class="reviews__item">'
                resultcontent += '<div class="reviews__review-er">' + place.reviews[i].author_name + '</div>';
                var reviewDate = new Date(place.reviews[i].time * 1000);
                var reviewDateMM = reviewDate.getMonth() + 1;
                var reviewDateFormatted = reviewDate.getDate() + '/' + reviewDateMM + '/' + reviewDate.getFullYear(); 
                resultcontent += '<div class="reviews__review-date">' + reviewDateFormatted + '</div>';
                resultcontent += '<div class="reviews__review-rating reviews__review-rating--' + place.reviews[i].rating +'"></div>';
                if (!!place.reviews[i].text){
                  resultcontent += '<div class="reviews__review-comment">' + place.reviews[i].text + '</div>';
                }
                resultcontent += '</li>'
              }
              $('#reviews__content').append(resultcontent);
            }
        });
    }
</script>

Solution 2

If you want to get location data from a place_id you can do it using the Geocoder class:Here the documentation. With this class you can pass a place_id to the method geocode() and get coordinates and other location data.

Solution 3

Was making a custom address autocomplete for a sign up form.

import {useState, useRef, useEffect } from 'React'

function AutoCompleteInput(){

const [predictions, setPredictions] = useState([]);
const [input, setInput] = useState('');
const [selectedPlaceDetail, addSelectedPlaceDetail] = useState({})
const predictionsRef = useRef();


useEffect(
()=>{
      try {
        autocompleteService.current.getPlacePredictions({ input }, predictions => {
          setPredictions(predictions);
        });
      } catch (err) {
       // do something
      }
    }
}, [input])

const handleAutoCompletePlaceSelected = placeId=>{
 if (window.google) {
      const PlacesService = new window.google.maps.places.PlacesService(predictionsRef.current);
      try {
        PlacesService.getDetails(
          {
            placeId,
            fields: ['address_components'],
          },
         place => addSelectedPlaceDetail(place)
        );
      } catch (e) {
        console.error(e);
      }
    }
}

return (
  <>
   <input onChange={(e)=>setInput(e.currentTarget.value)}
    <div ref={predictionsRef}
     { predictions.map(prediction => <div onClick={ ()=>handleAutoCompletePlaceSelected(suggestion.place_id)}> prediction.description </div> )
   }
   </div>
  <>
 )
}

So basically, you setup the autocomplete call, and get back the predictions results in your local state.

from there, map and show the results with a click handler that will do the follow up request to the places services with access to the getDetails method for the full address object or whatever fields you want.

you then save that response to your local state and off you go.

Solution 4

Just seen Man asking in a comment above How to initialise the places service without initialising a map? so I thought I would add it here.

placesService = new google.maps.places.PlacesService($('#predicted-places').get(0));

You will need to create an html element with that id first though.

View more solutions

Comments

[dirtydexter]

What does a node mean here, does it mean an html element?

[JamesGold]

Should the node be a div? Does the div need any special properties? How do you actually render the attributions for the results? Is rendering the attributions the same as putting them the places in an HTML list?

[Mike Szyndel]

Hey, Dr.Molle would you be able to expand your answer? (I know it was almost two years ago, but putting a node as argument fails for me despite docs)

[Dr.Molle]

please define "fails"!

[kirley]

Here is exactly what you need to do if you're using jquery: places = new google.maps.places.PlacesService($('#myDiv').get(0));

[Iest]

aka var map = new google.maps.Map(document.createElement('div'))

[Adrien Be]

@supersaiyan the code mentioned does NOT show a map (as required).

[TacticalMin]

As of 1/12/2017 according to the documentation "If your application displays Google Places API Web Service 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" . However I cannot find anywhere in the documentaion how to initialize the places service without specifying a map??

[Larzan]

The OP specifically wants to use the PlacesService, which you are not doing in your example. So this answer does not relate to the question!

[yooloobooy]

thank you very much. just quick fix: it's the "Geocoder" class

[kajkal]

and it is under Geolocation API

[asus]

what is autocompleteService ?

[Denis S Dujota]

@asus it is a reference to new window.google.maps.places.AutocompleteService()

[Richard Scarrott]

So instead of a google.maps.Map you just need to pass any old DOM element to the google.maps.places.PlacesService constructor...seems a bit strange?