Библиотека google google без карты

Ответ 1

Как указано в документации, PlacesService принимает в качестве аргумента либо карту, либо узел, в котором можно отобразить атрибуты для результатов.

Таким образом, вам нужно только использовать узел (узел, являющийся элементом HTML) вместо карты.

Обратите внимание: скрытие атрибутов нарушает правила размещения (также скрывает карту, когда используется в качестве аргумента, потому что на карте будут показаны атрибуты)

Это также может быть интересно для вас: API Google Мест это нарушает оглавление?

Пример: в двух словах

Если вы используете 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>

Ответ 2

Только что видел Человек, спрашивающий в комментарии выше Как инициализировать сервис мест без инициализации карты? так что я думал, что добавлю это сюда.

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

Вам нужно сначала создать HTML-элемент с этим идентификатором.

Ответ 3

Если вы хотите получить данные о местоположении из place_id, вы можете сделать это с помощью класса Geolocator: здесь документация. С помощью этого класса вы можете передать place_id методу geocode() и получить координаты и другие данные о местоположении.

Ответ 4

Я столкнулся с той же проблемой.

Зачем использовать Maps javascript Api, когда Places Api уже включен. Стоит ли платить дополнительную цену за эту простую задачу?

Maps Javascript API не используется в этом коде. Все методы API google.maps.Map удалены. Он отлично работает на jsfiddle.

Просто проверьте, работает ли он на локальном ПК. В большинстве случаев выдает ошибку 403, когда я пытался запустить его на локальном ПК и использовать ограниченные запросы, предоставляемые консолью Google API.

получить ключ API из консоли разработчика Google и вставить его в слот YOUR_API_KEY в теге script кода Не пытайтесь запустить код здесь. Очевидно. Ключ 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>