google місця бібліотека без карти - -

Question 1

Я намагаюся використовувати бібліотеку google places для запиту на пошук поблизу: 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, і пам’ять важлива). Чи є якесь обхідне рішення щодо використання пошукових запитів поблизу без карти? Я не хочу використовувати API Google Places, оскільки він не підтримує запити JSONP.

Question 2

Як задокументовано, PlacesService приймає як аргумент або карту, або вузол, куди візуалізувати атрибуції результатів .

Отже, вам потрібно лише використовувати вузол (вузол, який є елементом html) замість карти.

Зверніть увагу: приховування атрибуцій порушує політику місць (також приховування карти, коли використовується як аргумент, оскільки на карті будуть відображатися атрибуції)

Це також може бути вам цікаво: API Google places чи це порушує 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>

Question 3

Якщо ви хочете отримати дані про місцезнаходження з place_id, ви можете це зробити, використовуючи клас Geocoder: Ось документація . За допомогою цього класу ви можете передати place_id методу geocode () і отримати координати та інші дані про місцезнаходження.

Question 4

Щойно бачив, як чоловік запитує у коментарі вище Як ініціалізувати службу місць без ініціалізації карти? тож я подумав додати його сюди.

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

Спочатку вам потрібно буде створити елемент html із цим ідентифікатором.

Question 5

Робив автозаповнення користувацької адреси для форми реєстрації.

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>
  <>
 )
}

Отже, ви налаштовуєте виклик автозавершення та отримуєте результати прогнозів у вашому місцевому штаті.

звідти відобразіть результати та покажіть результати за допомогою обробника клацань, який виконає подальший запит до служб місць з доступом до методу getDetails для повного адресного об'єкта або будь-яких полів, які ви хочете.

потім ви збережете цю відповідь у своєму місцевому штаті і підете.

Question 6

Я зіткнувся з тією ж проблемою.

Навіщо використовувати Maps javascript Api, коли Places Api вже ввімкнено. Це додаткова ціна за це просте завдання?

API Javascript Maps не використовується в цьому коді. Усі методи API google.maps.Map вилучені. Він чудово працює на jsfiddle .

Просто перевірте, чи працює це на локальному ПК. Найчастіше він видає помилку 403, коли я намагався запустити його на локальному сховищі ПК та використовуючи обмежені запити, надані консоллю API Google.

придбайте ключ API на консолі розробника Google і вставте його в слот 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>