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

Обзор

API: веб, , iOS

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

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

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

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

Включение API

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Используется в примере: Библиотека 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&solution_channel=GMP_guides_productlocator_v1_a" 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&solution_channel=GMP_guides_productlocator_v1_a"></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, разверните нужный раздел.

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

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

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

Управление объектами на карте

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

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

Каждому стилю карты назначается уникальный идентификатор. После публикации стиля в 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&solution_channel=GMP_guides_productlocator_v1_a">
</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 с базой данных для хранения и получения собственных сведений об адресах.