web-dev-qa-db-ja.com

マップなしのGoogle Placesライブラリ

近くの検索リクエストにGoogleプレイスライブラリを使用しようとしています： https://developers.google.com/maps/documentation/javascript/places#place_search_requests

json応答をプルしてHTMLリストに入れたいだけです。結果を地図などに表示したいと思います。マップをまったく使いたくありません。しかし、ドキュメントでは、マップが必要であると述べています

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

placesService関数の引数として渡すため。私が今やっていることは、高さ：0のマップを追加することですが、それでも多くのメモリを消費します（私はsencha touch 2アプリを開発し、メモリが重要です）。地図なしで近くの検索リクエストを使用する回避策はありますか？ JSONPリクエストをサポートしていないため、Google Places APIは使用しません。

google-mapsgoogle-places
60
user985409

文書化されているように、PlacesServiceは、結果の属性をレンダリングするマップまたはノードを引数として受け入れます。

したがって、マップの代わりにノード（html要素であるノード）を使用するだけです。

注意：属性を非表示にすると、場所のポリシーに違反します（マップに属性が表示されるため、引数として使用する場合もマップを非表示にします）

これはあなたにも興味深いかもしれません： 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>
72
Dr.Molle

上記のコメントでManが質問しているのを見たところですマップを初期化せずにPlacesサービスを初期化する方法？ですから、ここに追加すると思いました。

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

ただし、最初にそのIDを持つhtml要素を作成する必要があります。

1
slajma

Place_idから位置データを取得する場合は、Geolocatorクラスを使用して実行できます。 ここではドキュメント 。このクラスを使用すると、place_idをメソッドgeocode（）に渡し、座標やその他の位置データを取得できます。

0
bertonc96

私は同じ問題に遭遇しました。

Places Apiが既に有効になっているときにMaps javascript Apiを使用するのはなぜですか？

Maps Javascript APIはこのコードでは使用されていません。すべてのgoogle.maps.Map APIメソッドは削除されています。 jsfiddle で正常に動作します。

ローカルPCで動作するかどうかをチェックしてください。ほとんどの場合、ローカルPCストレージで実行し、Google APIコンソールから提供された制限されたリクエストを使用しようとすると403エラーが発生します。

Google開発者コンソールからAPIキーを取得し、コードのscriptタグのYOUR_API_KEYスロットに挿入しますここでコードを実行しようとしないでください。明らかに、APIキーを置き換える必要があります。

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initMap() {

  var input = document.getElementById('pac-input');

  var options = {
    types: ['establishment']
  };

  var autocomplete = new google.maps.places.Autocomplete(input, options);

  autocomplete.setFields(['place_id', 'geometry', 'name', 'formatted_address', 'formatted_phone_number', 'opening_hours', 'website', 'photos']);

  autocomplete.addListener('place_changed', placechange);

  function placechange() {

    var place = autocomplete.getPlace();
    var photos = place.photos;

    document.getElementById('place_name').textContent = place.name;
    document.getElementById('place_id').textContent = place.place_id;
    document.getElementById('place_address').textContent = place.formatted_address;
    document.getElementById('phone_no').textContent = place.formatted_phone_number;
    document.getElementById('open_time').textContent = place.opening_hours.weekday_text[0];
    document.getElementById('open_now').textContent = place.opening_hours.open_now;
    document.getElementById('photo').src = photos[0].getUrl();
    document.getElementById('photo').style = "width:50%;";
    document.getElementById('website').textContent = place.website;


  }
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.controls {
  background-color: #fff;
  border-radius: 2px;
  border: 1px solid transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  height: 29px;
  margin-left: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  outline: none;
  padding: 0 11px 0 13px;
  text-overflow: Ellipsis;
  width: 400px;
}

.controls:focus {
  border-color: #4d90fe;
}

.title {
  font-weight: bold;
}

#infowindow-content {
  display: none;
}

#map #infowindow-content {
  display: inline;
}

<div>
  <input id="pac-input" class="controls" type="text" placeholder="Enter a business">
</div>

<div id="info-table">
  Name: <span id="place_name"></span><br> Place id: <span id="place_id"></span><br> Address :<span id="place_address"></span><br> Phone : <span id="phone_no"></span><br> Openhours: <span id="open_time"></span><br> Open Now : <span id="open_now"></span><br>  website : <span id="website"></span><br> photo :<br> <img id="photo" src="" style="display:none;" />
</div>

<div id="map"></div>
<div id="infowindow-content">
  <span id="place-name" class="title"></span><br>
  <strong>Place ID:</strong> <span id="place-id"></span><br>
  <span id="place-address"></span>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap">
</script>
0
Adrian Perera