[解決済み] google プレイス ライブラリ 地図なし

質問

googleプレイスライブラリを近場検索に使おうとしています。 https://developers.google.com/maps/documentation/javascript/places#place_search_requests

私はただjsonの応答を引っ張ってきて、htmlのリストに置きたいだけです。私はマップをまったく使用したくありません。しかし、ドキュメントでは、マップが必要であることが記載されています。

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

のように、PlacesService関数の引数として渡せるようにするためです。今やっているのはheight:0の地図を追加することですが、それでも多くのメモリを消費します（私はsencha touch 2アプリを開発しており、メモリは重要です）。地図なしで近くの検索要求を使用するワークアラウンドはありますか？私は、Google Places APIがJSONPリクエストをサポートしていないため、使用したくありません。

どのように解決するのですか?

ドキュメントにあるように、PlacesService は引数としてマップまたは ノードを受け取ります。 .

なので、マップの代わりにノード（ノードとはhtml要素のこと）を使うだけでいいのです。

注意: 属性を隠すことはplace-policiesに違反します(引数として使われるとき、地図も隠します。地図は属性を表示するので)。

これも面白いかもしれません。 Google places API これはTOCに違反しますか？

例：ひとことで言うと

jQueryを使っている場合。

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

プレーンなJavascriptの場合。

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

その後、通常通り を、残りのサンプルコード :

  service.nearbySearch(request, callback);

例：返された詳細情報を使用する

この例のライブデモはjsFiddleにあります。 .

注意: この例では 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>