Руководство по внедрению поиска товаров

Обзор

API: веб, , iOS

Платформа Google Карт совместима как с веб-приложениями (JS, TS), так и с приложениями для Android и iOS. Кроме того, она предоставляет API веб-сервисов для получения сведений о местах, маршрутах и расстояниях. В этом руководстве содержатся примеры для одной платформы, а для остальных приводятся ссылки на документацию по внедрению.

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

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

Схема архитектуры
Схема архитектуры. Нажмите на рисунок, чтобы увеличить его.

Включение API

Чтобы реализовать поиск товаров, необходимо включить в Google Cloud Console указанные ниже API. Следующие ссылки позволяют перейти на страницы Google Cloud Console, где можно включить эти API для выбранного проекта:

Подробная информация приведена в статье Начало работы с платформой Google Карт.

Разделы руководства по внедрению

Ниже перечислены рекомендации, рассматриваемые в этой статье.

  • Флажком отмечены основные рекомендации.
  • Звездочкой отмечены второстепенные рекомендации, которые открывают дополнительные возможности.
Связывание адресов магазинов с информацией о местах из платформы Google Карт Находите в платформе Google Карт информацию о местах, соответствующих вашим филиалам.
Определение местоположения пользователя Добавьте функцию автозаполнения, чтобы людям было удобнее пользоваться картой на любых устройствах и чтобы адрес был указан точно при минимальном количестве нажатий на клавиатуре или экране.
Поиск ближайших магазинов Рассчитывайте время в пути и расстояния для нескольких пунктов отправления и назначения. Выбирайте способ передвижения: пешком, на автомобиле, на велосипеде или общественном транспорте.
Показ информации о магазине Показывайте подробные данные о своих магазинах, чтобы пользователям было проще их находить.
Построение маршрутов Создавайте для покупателей маршруты с учетом способа передвижения: пешком, на автомобиле, на велосипеде или на общественном транспорте.
Отправка маршрута на мобильный телефон Вы можете не только отображать маршруты, но и отправлять их на мобильный телефон пользователя для навигации через приложение "Google Карты".
Показ мест на интерактивной карте Вы можете использовать для филиалов собственные маркеры, а также изменить цвета в соответствии с цветами своего бренда. Также можно отобразить или скрыть отдельные объекты инфраструктуры (POI), чтобы пользователям было проще ориентироваться, и выбрать плотность таких объектов, чтобы избежать их нагромождения.
Добавление собственных сведений о местах Дополните описание места собственными сведениями, чтобы помочь пользователям получить всю необходимую информацию и принять решение.

Связывание адресов магазинов с информацией о местах из платформы Google Карт

Получение идентификаторов мест

Используется в примере: Places API Также доступно: JavaScript

Допустим, у вас есть база данных с основными сведениями о ваших филиалах: названиями, адресами, номерами телефонов и т. п. Вам нужно связывать эту информацию с местами из платформы Google Карт и использовать ее для построения маршрутов до ваших магазинов, чтобы пользователям было удобнее получать заказанные товары. Чтобы получить необходимые сведения из платформы Google Карт, нужно найти идентификатор места, присвоенный вашему филиалу. Вы можете отправить бесплатный запрос к конечной точке для поиска мест в Places API, включив в него только поле place_id.

Ниже приведен пример такого запроса для офиса Google в Лондоне.

    https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=google%20london&inputtype=textquery&fields=place_id&key=YOUR_API_KEY

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

Геокодирование адресов

Используется в примере: Geocoding API Также доступно: JavaScript

Если в вашей базе данных есть почтовый адрес магазина, но нет его географических координат, используйте Geocoding API, чтобы получить широту и долготу. Зная координаты каждого магазина, вы сможете найти ближайший из них к клиенту. Геокодирование выполняется на стороне сервера. Сохраните полученные широту и долготу в своей базе данных и обновляйте их по крайней мере один раз в 30 дней.

Ниже приведен пример использования Geocoding API для получения широты и долготы по идентификатору места для офиса Google в Лондоне.

    https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY

Определение местоположения пользователя

Используется в примере: Библиотека Places Autocomplete в Maps JavaScript API Также доступно: Android | iOS

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

Обработка значений, введенных вручную, с помощью функции автозаполнения

Люди привыкли к функции автозаполнения в потребительской версии Google Карт. С помощью библиотек Places платформы Google Карт эту функцию можно интегрировать в любое мобильное или веб-приложение. Когда пользователь начнет вводить адрес, недостающий текст автоматически подставится через виджет. Вы также можете настроить собственную функцию автозаполнения, обращаясь к библиотекам Places напрямую.

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

Пример. Чтобы включить на своем сайте использование библиотеки Place Autocomplete, вам нужно добавить параметр libraries=places в URL скрипта Maps JavaScript API.

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" defer></script>

Затем добавьте на свою страницу текстовое поле для ввода:

<input id="autocomplete" placeholder="Enter
  starting address, city, or zip code" type="text"></input>

И наконец, инициализируйте сервис Autocomplete и свяжите его с текстовым полем, которому присвоено название. Если вы установите ограничение для подсказок Place Autocomplete, указав для параметра types значение "geocode", то в поле ввода будут поддерживаться почтовые адреса, районы, города и почтовые индексы. Таким образом, пользователь сможет указать исходное местоположение с нужной степенью точности. Обязательно укажите в запросе поле geometry, чтобы ответ содержал широту и долготу исходного местоположения. Вы сможете соотнести эти координаты с местоположениями своих филиалов.

// Create the autocomplete object, restricting the search predictions to
// geographical location types.
const autocomplete = new google.maps.places.Autocomplete(
document.getElementById("autocomplete"),
{ types: ["geocode"],
  componentRestrictions: {'country': ['gb']},
  fields: ['place_id', 'geometry', 'formatted_address'] }
);
// When the user selects an address from the drop-down
// zoom to the select location and add a marker.
autocomplete.addListener("place_changed", searchFromOrigin);
}

В приведенном ниже примере после того, как пользователь выбрал адрес, запускается функция searchFromOrigin(). Она определяет местоположение пользователя на карте, затем находит ближайшие магазины, как показано в этом разделе.

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

Чтобы посмотреть видеоруководства по добавлению Place Autocomplete в приложение, разверните нужный раздел:

Сайт

Приложение для Android

Приложение для iOS

Использование функций геолокации браузера

О том, как запрашивать и обрабатывать геолокацию в браузерах с использованием HTML5, рассказывается в этой статье.

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

Поиск ближайших магазинов

Используется в примере: Сервис Distance Matrix, Maps JavaScript API Также доступно: Distance Matrix API

Определив местоположение пользователя, вы можете сопоставить его с адресами своих магазинов. Сервис Distance Matrix и Maps JavaScript API позволяют определить время в пути и расстояния. Это поможет пользователю выбрать тот филиал, до которого удобнее добираться.

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

Сервис Distance Matrix в Maps JavaScript API в качестве входных данных принимает список исходных и целевых местоположений, а возвращает не только расстояния между ними, но и время пути. Начальная точка соответствует местоположению пользователя или выбранному им пункту отправления, а конечные точки соответствуют адресам ваших филиалов. Начальные и конечные точки можно указывать как адреса или пары координат. При вызове сервиса сопоставляются адреса точек. Вы можете использовать в запросах к Distance Matrix дополнительные параметры и показывать результаты с учетом текущего или будущего времени в пути.

В приведенном ниже примере задается исходное местоположение пользователя и 25 магазинов.

function getDistances(place) {
  let distanceMatrixService = new google.maps.DistanceMatrixService();
  const origins = [place];
  return new Promise((resolve, reject) => {
    const callback = (response, status) => {
      if (status === google.maps.DistanceMatrixStatus.OK && response) {
        resolve(response);
      } else {
        reject(status);
      }
    };
    distanceMatrixService.getDistanceMatrix(
      {
        origins,
        destinations: stores.slice(0, 25).map((store) => store.location),
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.IMPERIAL,
      },
      callback
    );
  });
}

function update(location) {
  if (!location) {
    return;
  }

  // ...

  // sort by spherical distance
  stores.sort((a, b) => {
    return (
      google.maps.geometry.spherical.computeDistanceBetween(
        new google.maps.LatLng(a.location),
        location
      ) -
      google.maps.geometry.spherical.computeDistanceBetween(
        new google.maps.LatLng(b.location),
        location
      )
    );
  });

  // display travel distance and time
  getDistances(location)
    .then((response) => {
      for (let i = 0; i < response.rows[0].elements.length; i++) {
        stores[i].address = response.destinationAddresses[i];
        stores[i].travelDistance = response.rows[0].elements[i].distance.value;
        stores[i].travelDistanceText =
          response.rows[0].elements[i].distance.text;
        stores[i].travelDuration = response.rows[0].elements[i].duration.value;
        stores[i].travelDurationText =
          response.rows[0].elements[i].duration.text;
      }
    })
    .finally(() => {
      renderCards(stores);
      autocompleteInput.disabled = false;
      isUpdateInProgress = false;
    });
}

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

Показ информации о магазине

Используется в примере: библиотека Places, Maps JavaScript API Также доступно: Places SDK для Android | Places SDK для iOS | Places API

Вы можете показывать такие сведения о месте, как контактные данные, часы работы и текущий статус (открыто или закрыто), чтобы покупателям было проще выбрать магазин при оформлении заказа.

Выполнив вызов Maps JavaScript API для получения информации о месте, вы можете отфильтровать результаты и отобразить их в удобном виде.

Показ вариантов магазинов
Показ вариантов магазинов. Нажмите на рисунок, чтобы увеличить его.

Запрашивая информацию о местах, необходимо указывать их идентификаторы. О том, как получить идентификаторы мест, читайте в этом разделе.

Следующий запрос возвращает адрес, координаты, URL сайта, номер телефона, оценку и часы работы офиса Google в Лондоне:

var request = {
  placeId: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU',
  fields: ['name', 'formatted_phone_number', 'geometry', 'opening_hours', 'rating', 'utc_offset_minutes', 'website']
};

service = new google.maps.places.PlacesService(map); service.getDetails(request, callback);

function callback(place, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { createMarker(place); } }


Улучшения поиска товаров

При необходимости вы можете расширить возможности функции поиска товаров.

Построение маршрутов

Используется в примере: сервис Directions, Maps JavaScript API Также доступно: веб-сервис Directions API для использования на устройствах Android и iOS (напрямую из приложения или через прокси-сервер)

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

В сервисе Directions есть функции, позволяющие обработать результаты и показать их на карте.

Ниже приведен пример отображения панели с маршрутами. Подробную информацию можно найти в статье Отображение текстовых указаний.

Отправка маршрута на мобильный телефон

Чтобы повысить удобство для пользователей, можно отправлять им ссылку на маршрут через SMS или по электронной почте. При нажатии на такую ссылку откроется приложение "Google Карты" (если оно установлено) или сайт maps.google.com в веб-браузере. И там и там пользователь сможет запустить пошаговую навигацию, в том числе с голосовыми подсказками.

Чтобы создать URL маршрута, используйте URL Карт, как показано ниже. При этом закодированное название места укажите с помощью параметра destination, а идентификатор места – с помощью параметра destination_place_id. URL Карт предоставляются бесплатно, поэтому указывать в URL ключ API не нужно.

https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU

Вы также можете задать параметр запроса origin (в том же формате, что и параметр destination). Если вы не сделаете этого, то маршрут будет проложен от текущего местоположения пользователя, а оно не всегда совпадает с местом, в котором выполнялся поиск товаров. Также в URL Карт предусмотрены другие необязательные параметры запроса. Например, travelmode и dir_action=navigate позволяют запустить маршрут с включенной навигацией.

Эта ссылка – расширенная версия приведенного выше URL, в которой с помощью параметра origin указан пункт отправления (футбольный стадион в Лондоне), а с помощью параметра travelmode=transit – способ передвижения (на общественном транспорте).

Для отправки URL маршрута через SMS или по электронной почте в настоящее время рекомендуется использовать стороннее приложение, например twilio. Если вы работаете с App Engine, то можете отправлять SMS и электронные письма через сторонние компании. Подробнее…

Показ мест на интерактивной карте

Использование динамических карт

Используется в примере: Maps JavaScript API Также доступно: Android | iOS

Функция поиска товаров очень удобна для пользователей. Тем не менее на некоторых ресурсах нет даже простой карты, и людям приходится покидать сайт или приложение, чтобы найти ближайший филиал. Это производит негативное впечатление. Поэтому мы рекомендуем добавить на сайт или в приложение карту и настроить ее так, чтобы люди могли с легкостью находить ваши филиалы и получать всю необходимую информацию о них.

Используйте динамические карты – их можно передвигать и масштабировать и на них можно просматривать сведения о разных местах и объектах инфраструктуры. Вам потребуется добавить лишь несколько строк кода.

Сначала нужно настроить использование Maps JavaScript API на вашей странице. Для этого добавьте в ее HTML-код следующий скрипт:

<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

URL ссылается на функцию JavaScript initMap, которая выполняется при загрузке страницы. В этом URL можно также указать для карты язык или регион, чтобы она правильно отображалась при показе пользователям из целевой страны. Кроме того, если вы выберете регион, это обеспечит правильное поведение приложений при их использовании за пределами США. Полный список поддерживаемых языков и регионов приведен в статье Доступность сервисов платформы Google Карт. Ознакомьтесь также с подробной информацией об использовании параметра region.

Затем необходимо разместить карту на странице с помощью HTML-тега div. Он позволяет указать, где именно будет отображаться карта.

<div id="map"></div>

Затем необходимо настроить основные функции карты. Для этого используется функция initMap в URL скрипта. Как показано в примере ниже, вы можете задать начальное местоположение, тип карты и элементы управления, которые будут доступны пользователю. Обратите внимание, что для getElementById() указано значение "map" идентификатора div из примера выше.

function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: { lat: 51.485925, lng: -0.129500 },
zoomControl: false
});
}

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

Настройка стиля карты

Вы можете менять внешний вид и параметры карты, в том числе:

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

Создание собственных маркеров

Вы можете изменить цвет стандартного маркера (в том числе показать с его помощью, открыт ли сейчас филиал) или использовать вместо него собственное изображение, например логотип компании. Также можно показывать дополнительную информацию, такую как часы работы, номер телефона и даже фотографии, в информационном или всплывающем окне. Собственный маркер может быть растровым, векторным, перетаскиваемым и анимированным.

Ниже показан пример использования собственных маркеров на карте. Код можно посмотреть в статье о собственных маркерах в документации по Maps JavaScript API.

Подробная информация приведена в документации по маркерам для JavaScript (сайтов), Android и iOS.

Стилизация карты

Платформа Google Карт позволяет изменить стиль карты так, чтобы пользователям было легче найти ближайший филиал и добраться до него. Это поможет вам привлекать клиентов. Например, измените цвета карты в соответствии с цветами вашего бренда и укажите, какие объекты инфраструктуры будут видны пользователю, а какие – нет. Платформа Google Карт предоставляет базовые шаблоны. Некоторые из них оптимизированы для определенных видов деятельности, таких как туризм, логистика, недвижимость и розничная торговля.

Создать или изменить стиль карты можно на странице Стили карты проекта в Google Cloud Console.

Чтобы посмотреть анимационный ролик о создании и изменении стиля карты в Cloud Console, разверните нужный раздел.

Стили карт для отдельных видов деятельности

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

Нажатие кнопки &quot;Создать стиль карты&quot; на странице &quot;Стили карты&quot;. Нажатие переключателя рядом с каждым видом деятельности (туризм, логистика, недвижимость и розничная торговля) на странице &quot;Новый стиль карт&quot;. При нажатии переключателя описание и графическое отображение стиля карты меняются.

Управление объектами инфраструктуры

В этом анимационном ролике показано, как задать цвет маркера для объекта инфраструктуры и увеличить плотность таких объектов на карте. Чем выше плотность, тем больше маркеров POI на карте.

Нажатие кнопки &quot;Создать стиль карты&quot; на странице &quot;Стили карты&quot;. В разделе &quot;Создание собственного стиля&quot; на странице &quot;Новый стиль карт&quot; выбран переключатель &quot;Карта Google&quot;. Нажатие переключателя &quot;Атлас&quot; для выбора стиля, затем нажатие кнопки &quot;Открыть в редакторе стилей&quot;. Выбор функции &quot;Объект инфраструктуры&quot; в редакторе стилей, затем выбор элемента &quot;Значок&quot; и красного цвета. Установка флажка &quot;Плотность POI&quot; и перемещение ползунка вправо до максимального значения. При увеличении плотности количество красных маркеров в окне предварительного просмотра карты увеличивается. Нажатие кнопки &quot;Сохранить&quot;.

Каждому стилю карты назначается уникальный идентификатор. После публикации стиля в Cloud Console его идентификатор необходимо добавить в код сайта или приложения. Это позволит вам редактировать стиль без необходимости выполнять рефакторинг. Изменения будут применяться автоматически. Ниже показано, как добавить идентификатор карты на веб-страницу с помощью Maps JavaScript API.

Если URL скрипта содержит один или несколько параметров map_ids, то Maps JavaScript API автоматически открывает доступ к указанным стилям. Это позволяет быстрее отрисовывать карту при вызове этих стилей в коде.

<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap">
</script>

Ниже приведен пример кода для показа стилизованной карты на веб-странице (HTML-элемент <div id="map"></div>, определяющий положение карты на странице, опущен).

map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 51.485925, lng: -0.129500},
zoom: 12,
mapId: '1234abcd5678efgh'
});

Подробнее об использовании облачных стилей для JavaScript (сайтов), Android и iOS

Добавление собственных сведений о местах

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

Рекомендуем изучить тарифы для различных данных о местах – основных, контактных и об отзывах. Для оптимизации расходов можно объединять имеющиеся у вас сведения о филиалах с новыми данными Google Карт (преимущественно основными и контактными), такими как наличие статуса "Временно закрыто", часы работы в праздники, оценки, фотографии и отзывы. Если у вас уже есть контактная информация, не указывайте эти поля в запросе Place Details. Вы можете получать только основные данные или данные об отзывах, в зависимости от того, что вы хотите показывать пользователям.

Собственные сведения о филиалах могут отображаться рядом с описанием места или вместо него. Посмотрите практическую работу по комплексной реализации функции поиска филиалов. В этом примере показано использование GeoJSON с базой данных для хранения и получения собственных сведений о местах.