Поиск в Google Картах и ​​сортировка по рейтингу

Если вы чем-то похожи на меня, вы, вероятно, задавали себе этот вопрос в какой-то момент своей жизни, на который никто не знает ответа: где / что нам есть? Поскольку я разработчик, я решил, что с меня хватит, и позволил компьютерам дать мне несколько советов. Именно тогда пришла идея попросить Google Карты перечислить лучшие рестораны / бары / что-нибудь еще поблизости, чтобы нам было легче выбирать.

К счастью, у Google Maps API есть возможность сделать это с помощью комбинации Places API. Итак, сегодня я хотел бы показать вам, как вы можете сделать то же самое.

Самый первый шаг в этом начинании - получить ключ API.

Получение ключа API

Ключ API будет использоваться для вызовов различных API. Чтобы получить ключ API, перейдите в личный кабинет Google Cloud Platform. Выберите проект или создайте новый, если вы еще не начали его.

Перейдите к кнопке меню и выберите вкладку Credentials в разделе API & Services.

Нажмите кнопку Create Credentials, и ваш недавно созданный ключ API появится во всплывающем окне.

Рекомендуется ограничить свой ключ API, прежде чем использовать его в производственной среде, чтобы избежать непредвиденных расходов и предотвратить кражу квот. Вы можете установить ограничения в меню API и сервисы на вкладке Credentials.

Обратите внимание, что для использования сервисов Google Cloud вам может потребоваться привязать свой проект к платежной учетной записи. К счастью для нас, API Карт Google по-прежнему можно использовать бесплатно при ежемесячной оплате до 200 долларов. Это примерно 28 000 звонков в месяц. Чтобы узнать больше о ценах, посетите раздел Цены и планы или Таблица цен в Google Cloud.

Если вы предпочитаете читать пошаговое руководство Google о том, как получить ключ API, вы можете обратиться к их собственной документации.

Настройка API Адресов

Чтобы получить информацию о местах на карте, мы будем использовать Places API. Чтобы использовать его, вам необходимо включить его в консоли Cloud Platform.

Перейдите к только что созданному проекту, нажмите на меню навигации и выберите опцию «Библиотека» в разделе «API и службы». Вас поприветствует следующая страница:

Найдите «Places API» и выберите «Включить». Как и в случае с Google Maps API, функция поиска поблизости Places API - которую мы будем использовать - бесплатна до 5000 звонков в месяц.

Теперь, когда все готово и сделано с административной стороны, мы можем перейти к кодированию.

Настройка проекта

Создайте новую папку и добавьте следующий index.html файл:

У нас не будет настоящей карты Google Maps, поскольку мы собираемся отображать результаты в виде упорядоченного списка. Вы также хотите включить библиотеку API и не забудьте заменить YOUR_API_KEY на свой фактический ключ API. Мы также будем использовать Places API - вам нужно указать это как строку запроса. Это то, что должен делать &libraries=places.

Я также создал places.js, куда пойдет наша собственная реализация. Вы также можете добавить это в папку проекта. И это все, что нам нужно. Все остальное войдет в places.js файл.

Получение некоторых результатов

Прежде чем мы сможем начать получение результатов, нам нужно создать несколько переменных:

Мы собираемся хранить все в массиве results, а также получаем ссылку на элемент places. Но самое интересное здесь - это request и service, которые мы создали. Сервис позаботится о запросе мест. Вы можете передать любой элемент DOM в PlacesService; это не обязательно должен быть объект Google Maps. Если вы по-прежнему хотите отображать результаты на карте, вам нужно изменить переменную places на следующее:

Получив service, мы можем вызвать метод nearbySearch с объектом request вместе с функцией callback. В запросе необходимо указать три основных момента:

  • Местоположение: координаты создаются на основе значений широты и долготы. Он принимает google.maps.LatLng объект.
  • Радиус: обозначает радиус круга в метрах, середина которого соответствует положению широты и долготы. Максимальное значение здесь может быть 50 000.
  • Типовой массив: тип места, которое мы ищем. Поскольку мы голодны, мы хотим вернуть рестораны. Полный список поддерживаемых типов можно найти в документации на платформе Google Maps.

Координаты указывают на Лондон. Чтобы получить координаты города, просто перейдите на maps.google.com и выполните поиск города. Координаты широты и языка появятся в адресной строке:

У нас также есть функция обратного вызова, которую мы еще не определили, так что давайте сделаем это прямо сейчас!

Три вещи, которые ожидает обратный вызов, - это объект response, в котором будет храниться все, что возвращает служба, astatus, представляющий успех или неудачу вызова, и необязательный объект разбивки на страницы.

По умолчанию каждый запрос к службе возвращает 20 результатов. Однако его можно увеличить до 60, разбивая на три страницы. Вот почему мы должны использовать разбиение на страницы. Функция pagination.nextPage снова вызовет эту callback функцию.

Вы также могли заметить, что вызов функции разбивки на страницы заключен в setTimeout. Это потому, что вы должны подождать не менее двух секунд, прежде чем станет доступна следующая страница результатов. Это также означает, что, поскольку для получения всех результатов требуется время, в идеале вы должны отображать какой-то индикатор загрузки, чтобы показать пользователю, что что-то происходит в фоновом режиме.

Теперь, если служба вернула все, pagination.hasNextPage перестанет существовать, заставляя нас перейти к блоку else, где мы, наконец, отобразим результаты. Я передал код на аутсорсинг другой функции, чтобы у нас было какое-то разделение.

Показать все

Функция displayResults будет действительно простой. Посмотрим, что у нас есть:

Во-первых, нам нужно отфильтровать список результатов. Могут быть случаи, когда рейтинг отсутствует. В этом случае мы не узнаем, заслуживает ли это место доверия. Просто говоря…

result => result.rating

… Мы говорим JavaScript включать только те результаты, которые содержат рейтинг. Если result.rating не определен, он будет исключен из набора результатов.

Затем нам нужно отсортировать его по рейтингу, чтобы мы могли выбрать лучшие варианты на самом верху. Наконец, мы можем отобразить их имя и рейтинг в forEach цикле.

Важно отметить, что с точки зрения производительности это не лучший способ манипулировать DOM в каждом цикле forEach. Альтернативой может быть создание строки внутри цикла и добавление ее в DOM только после завершения цикла.

Теперь, если вы вернетесь в браузер и обновите страницу, вы должны увидеть 60 результатов (в случае, если у каждого результата есть рейтинг), упорядоченных по рейтингу, причем наивысший рейтинг будет вверху.

Резюме

Наличие этого инструмента в кармане гарантирует, что вам больше никогда не придется голодать. Все, что осталось сделать, - это создать красивый пользовательский интерфейс, чтобы вы могли динамически выбирать город с выбранным радиусом и выбранным типом места.

Как всегда, вы можете получить доступ ко всему проекту на моем GitHub в репозитории мест. Не стесняйтесь настраивать его и дайте мне знать свои предложения в комментариях️. А теперь пора пойти и что-нибудь поесть.