Обзор
Платформа Google Карт совместима как с веб-приложениями (JS, TS), так и с приложениями для Android и iOS. Кроме того, она предоставляет API веб-сервисов для получения сведений о местах, маршрутах и расстояниях. В этом руководстве содержатся примеры для одной платформы, а для остальных приводятся ссылки на документацию по внедрению.
С помощью решения Quick Builder в консоли Google Cloud вы можете быстро создать инструмент поиска. Это решение поддерживает импорт данных из профиля компании и автоматическое добавление ссылок для бронирования от сторонних поставщиков. Интерактивный интерфейс позволяет за несколько минут создать код и добавить его в Google Cloud.
При поиске товаров и услуг в интернете пользователи хотят не просто посетить компанию, назначить встречу или забрать заказ. Им нужно найти самое удобное место неподалеку и попасть туда как можно быстрее. Продавцам при этом важно обеспечить удобство для пользователей, чтобы клиенты чаще посещали вас, были довольны и реже звонили в службу поддержки. Вы также можете проанализировать, как работает поиск адресов, находят ли потенциальные клиенты ваш адрес и как можно улучшить реализацию функции.
Locator Plus — инструкции и советы по настройке, которые мы предоставляем в этом документе, — это то, что мы рекомендуем как оптимальное сочетание API платформы Google Карт для создания удобных пользовательских интерфейсов Locator Plus. Следуя нашим рекомендациям, вы поможете пользователям находить ваши офисы или магазины на карте, просматривать подробные сведения и прокладывать маршруты для автомобилей, велосипедов, пешеходов и общественного транспорта.
В улучшенном инструменте поиска адресов есть панель аналитики, с помощью которой можно изучать данные и делать выводы. Вы сможете узнать, насколько функция поиска адресов привлекательна для пользователей. Этот отчет можно найти в разделе Отчеты о привлечении аудитории. Подробнее…
На приведенной ниже схеме показаны основные API, необходимые для реализации инструмента поиска адресов, На диаграмме также показана база данных с вашими данными о местоположении, которую вы можете объединить с информацией о местах, чтобы пользователи получали максимально полную информацию. Чтобы увеличить изображение, нажмите на него.
Включение API
Чтобы воспользоваться нашими рекомендациями, необходимо включить в консоли Google Cloud следующие API: Подробная информация приводится в статье Начало работы с платформой Google Карт.Рекомендации
Ниже перечислены рекомендации, рассматриваемые в этой статье.
- Флажком отмечены самые важные.
- Звездочкой отмечены полезные, но необязательные функции.
| Показ адресов на интерактивной карте |
Создайте карту, на которой показываются сведения о ваших адресах и которую можно перемещать и масштабировать. Вы также можете использовать решение Quick Builder Locator Plus, чтобы быстро создать карту, импортировать данные о компании из профиля компании, добавить ссылки для бронирования и развернуть решение в Google Cloud Storage. |
|
| Предоставление сведений об адресах | Помогите пользователю, который нашел на карте ближайший офис или магазин, получить всю необходимую информацию о нем. | |
| Показ адресов на карте под углом 45° | Добавьте вид со спутника под углом 45 градусов, чтобы пользователи могли рассмотреть ваш офис или магазин. | |
| Определение местонахождения пользователя | Добавьте функцию автозаполнения, чтобы людям было удобнее пользоваться картой на любых устройствах и чтобы адрес был указан точно при минимальном количестве нажатий на клавиатуре или экране. | |
| Показ времени в пути и расстояний до ближайших адресов | Рассчитывайте время в пути и расстояния для нескольких пунктов отправления и назначения с возможностью выбора способа передвижения, например пешком, на автомобиле или на велосипеде. | |
| Запись на прием и бронирование |
Добавьте возможность записаться прямо на боковой панели с информацией о месте. Вы также можете использовать решение Quick Builder Locator Plus, чтобы быстро создать карту, импортировать данные о компании из профиля компании, добавить ссылки для бронирования и развернуть решение в Google Cloud Storage. |
|
| Показ местных предложений | Показывайте пользователям специальные предложения на боковой панели с информацией о месте. | |
| Навигация и маршруты | Предоставляйте пользователям навигацию из пункта отправления в пункт назначения с учетом способа передвижения: пешком, на автомобиле, на велосипеде или на общественном транспорте. | |
| Настройка стиля карты | Вы можете использовать для своих адресов собственные маркеры, а также изменить цвета в соответствии с цветами своего бренда. Также можно показать или скрыть отдельные объекты инфраструктуры, чтобы пользователям было проще ориентироваться, и выбрать плотность таких объектов, чтобы не перегружать карту. | |
| Сбор и анализ статистики использования | Настраивайте Google Аналитику, чтобы получать данные о том, насколько эффективно работает и хорошо реализован поиск адресов. | |
| Отправка маршрута на мобильный телефон | Вы можете не только показывать маршруты, но и отправлять их на мобильный телефон пользователя для навигации в приложении "Google Карты". | |
| Использование Просмотра улиц | Панорамные изображения Просмотра улиц помогут пользователям быстрее сориентироваться и найти ваш офис или магазин. | |
| Использование геолокации | Если вы не хотите полагаться на геолокацию в устройстве пользователя, то можете использовать нашу функцию геолокации. | |
| Добавление собственных сведений об адресах | Дополните описание места собственными сведениями, чтобы помочь пользователям получить всю необходимую информацию и принять решение. |
Показ адресов на интерактивной карте
Инструмент поиска адресов очень удобен для пользователей. Тем не менее на некоторых ресурсах нет даже карты, и людям приходится покидать сайт или приложение, чтобы найти ближайший офис или магазин. И пользователям это не нравится. Поэтому мы рекомендуем добавить на сайт или в приложение карту и настроить ее так, чтобы люди могли легко находить ваши адреса и получать всю необходимую информацию о них.
Эту функцию можно включить двумя способами: автоматически, с помощью решения Quick Builder Locator Plus, или самостоятельно реализовать Динамические карты. В этом разделе подробно описаны оба способа.
Инструмент Quick Builder для улучшенного поиска адресов
С помощью инструмента Quick Builder для улучшенного поиска адресов можно импортировать данные из профиля компании. При поиске адресов на сайте теперь будут показываться любые изменения в профиле. Например, обновленные часы работы, контактные данные, фотографии, список услуг и т. п. Инструмент Quick Builder позволяет быстро задать настройки адресов на карте, создать код для реализации или непосредственно добавить функцию в Google Cloud Storage за считаные минуты.
Самостоятельная реализация динамических карт
| В примере используется: Maps JavaScript API | Также доступно: Android | iOS |
Разместите на своем сайте динамические карты – их можно передвигать и масштабировать, на них можно просматривать сведения о местах и объектах инфраструктуры. Для этого нужно просто добавить несколько строк кода.
Сначала нужно настроить использование Maps JavaScript API на вашей странице.
Для этого добавьте в ее HTML-код следующий скрипт, включая libraries=marker, чтобы вы могли добавить на карту расширенные маркеры.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a"></script>
URL ссылается на функцию JavaScript initMap, которая выполняется при загрузке страницы. В этом URL можно также указать для карты язык или регион, чтобы она правильно отображалась при показе пользователям из целевой страны. Кроме того, если вы выберете регион, это обеспечит правильную работу приложений при их использовании за пределами США. Полный список поддерживаемых языков и регионов приведен в статье Доступность сервисов платформы Google Карт. Ознакомьтесь также с подробной информацией об использовании параметра region.
Затем необходимо разместить карту на странице с помощью HTML-тега div с явно заданной высотой.
Это контейнер, в котором отображается карта.
<div id="map" style="height: 500px; width: 100%;"></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 }, mapId: "DEMO_MAP_ID", zoomControl: false }); }
Обычно для поиска адресов задаются начальное местоположение, центральная точка или границы, а также уровень масштабирования (увеличения карты). Большую часть остальных настроек, таких как изменение элементов управления, использовать необязательно. Они предназначены для расширения возможностей взаимодействия с картой.
Получение идентификаторов мест
| В примере используется: Places API (New) | Также доступно: JavaScript |
Возможно, у вас есть база данных с основными сведениями о ваших офисах или магазинах: названиями, адресами, номерами телефонов и т. п. Платформа Google Карт также содержит определенную информацию о местах, в том числе их географические координаты и добавленные пользователями сведения. Чтобы получить эту информацию, вам необходимо найти идентификатор места, присвоенный вашему офису или магазину. Вы можете отправить запрос к конечной точке Text Search (New) в Places API (New), указав в маске полей только поле places.id, чтобы активировать код Text Search Essentials IDs Only.
Ниже приведен пример запроса идентификатора места для офиса Google в Лондоне.
curl -X POST -d '{
"textQuery" : "Google London"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: places.id' \
'https://places.googleapis.com/v1/places:searchText'Вы можете сохранить этот идентификатор в своей базе данных и использовать его для получения информации о месте. Ниже рассказывается, как с помощью идентификатора места выполнять геокодирование, получать информацию о месте и запрашивать маршруты.
Геокодирование адресов
| В примере используется: 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_locatorplus_v2_aДобавление адресов на карту
Следующий этап – добавление ваших адресов на карту. Обычно это делается с помощью расширенных маркеров, но есть и другие способы, например с использованием слоя данных.
Вот как добавить на карту расширенный маркер с собственным текстовым глифом, если известны широта и долгота:
const pin = new google.maps.marker.PinElement({ glyphText: "A", }); const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: { lat: 51.493073, lng: -0.146550 }, title: "Location Name", }); marker.append(pin);
Если вам нужно показать на карте сразу несколько адресов, добавьте несколько маркеров.
Если у вас много адресов, воспользуйтесь библиотекой кластеризации маркеров для JavaScript, Android или iOS. Пример использования библиотеки кластеризации маркеров в образце поиска адресов магазинов на GitHub для JavaScript.
Предоставление сведений об адресах
| В примере используется: Maps JavaScript API | Также доступно: Places API (New) | Android | iOS |
Вы можете предоставлять пользователям информацию о местах, которая им понадобится перед посещением ваших офисов или магазинов. Благодаря подробной информации о местах, такой как контактные данные, часы работы, оценки, фотографии и статус временного закрытия, люди точно знают, чего ожидать при посещении вашего местоположения. После вызова Places API (New) можно отфильтровать ответ и показать результат в информационном окне, на боковой панели или другим способом.
Чтобы запросить информацию о своих адресах, вы должны указать их идентификаторы. Подробнее о том, как получить идентификаторы адресов…
Видеоинструкции по запросу информации о месте
Часы работы
Сведения о закрытии
Контроль расходов
В приведенном ниже примере для получения информации о местах и добавления их в информационное окно используются класс Place из библиотеки мест и Maps JavaScript API. Эта реализация позволяет сократить расходы, поскольку запрос для получения сведений о месте выполняется, только если пользователь проявляет интерес, нажимая на маркер.
const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: { lat: 51.493073, lng: -0.14655 }, }); const place = new google.maps.places.Place({ id: "ChIJVSZzVR8FdkgRTyQkxxLQmVU", }); const infowindow = new google.maps.InfoWindow(); marker.addEventListener("click", async () => { await place.fetchFields({ fields: ["displayName", "formattedAddress", "rating", "websiteURI"], }); infowindow.setContent( "<div><strong>" + place.displayName + "</strong><br>" + place.formattedAddress + "<br>" + "Rating: " + place.rating + " stars<br>" + place.websiteURI + "</div>" ); infowindow.open({ map, anchor: marker, }); });
Показ адресов на карте под углом 45°
| В примере используется: Maps JavaScript API | Также доступно: Android | iOS |
Дайте пользователям возможность посмотреть на ваш офис или магазин сверху. Так они поймут, как он выглядит, и им будет проще его найти. Когда пользователь выбирает определенный адрес, чтобы рассмотреть его, вы можете показать спутниковый снимок места, сделанный под углом 45°.
Ниже приведен пример кода, который задает большой масштаб и совместимый тип карты, а также угол наклона, чтобы по возможности показывалось изображение под углом 45°. Подробнее о доступности изображений под углом 45°…
function seeDetail(location) {
map.setCenter(location);
map.setZoom(19);
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
map.setTilt(45);
}Сброс настроек карты до исходных
Пользователи часто предпочитают переключаться между детализированным снимком определенного адреса и общим списком нескольких адресов поблизости. Чтобы обеспечить такую возможность, добавьте прослушиватель, который будет определять, когда пользователь переходит от подробного просмотра к взаимодействиям с картой или к списку. Например, при прослушивании события zoom_changed для объекта map становится известно, когда пользователь вручную уменьшает масштаб карты или вызывает другую функцию, которая меняет масштаб. В этом примере при уменьшении масштаба возвращается исходный тип и угол наклона карты.
let originalMapTypeId = google.maps.MapTypeId.ROADMAP; map.addListener("zoom_changed", () => { const newZoom = map.getZoom()!; if (newZoom < 19) { map.setTilt(0); map.setMapTypeId(originalMapTypeId); } });
Определение местонахождения пользователя
| В примере используется: Maps JavaScript API | Также доступно: Android | iOS |
Следующий важный компонент инструмента поиска адресов – определение местоположения пользователя. По умолчанию вы сможете использовать сервисы геолокации мобильного телефона и веб-браузера, запрашивая разрешение пользователя установить в качестве пункта отправления текущее местоположение пользователя. Однако клиент может отклонить запрос или указать в качестве пункта отправления другое местоположение.
Люди привыкли к функции автозаполнения в Google Картах. С помощью библиотек Places платформы Google Карт эту функцию можно интегрировать в любое мобильное или веб-приложение. Когда пользователь начнет вводить адрес, недостающий текст автоматически подставится через виджет. Вы также можете настроить собственную функцию автозаполнения мест, обращаясь к Place Autocomplete Data API напрямую.
Чтобы включить на своем сайте использование библиотеки Place Autocomplete, вам нужно добавить всего несколько параметров запроса в URL скрипта Maps JavaScript API. В приведенном ниже примере добавляется фрагмент libraries=places,marker.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,marker&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a" defer></script>
Затем добавьте на страницу элемент-контейнер, в который будет помещен виджет PlaceAutocompleteElement.
<div id="autocomplete-container"></div>
И наконец, инициализируйте виджет PlaceAutocompleteElement и добавьте его в контейнер. Если вы установите ограничение для автозаполнения мест, указав для параметра includedPrimaryTypes: ["geocode"] значение "geocode", то виджет будет поддерживать почтовые адреса, районы, города и почтовые индексы. Таким образом, пользователь сможет указать пункт отправления с нужной степенью точности. Когда пользователь выбирает подсказку, запускается событие gmp-select, и вы можете вызвать place.fetchFields(), чтобы запросить поле location, содержащее широту и долготу исходного местоположения. Вы сможете отцентрировать карту по этим координатам и соотнести их с координатами ваших адресов.
// Create the PlaceAutocompleteElement, restricting predictions to // geographical location types in the United Kingdom. const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({ includedPrimaryTypes: ["geocode"], includedRegionCodes: ["gb"], }); placeAutocomplete.placeholder = "Enter starting address, city, or zip code"; document.getElementById("autocomplete-container").appendChild(placeAutocomplete); // When the user selects an address from the drop-down, // zoom to the selected location and add an advanced marker. placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ["location", "formattedAddress"], }); addUserLocation(place); });
В приведенном ниже примере после того, как пользователь выбрал адрес, выполняется функция addUserLocation(). Она находит местоположение пользователя на карте, перемещает карту в соответствующую область и добавляет расширенный маркер.
function addUserLocation(place) { const pin = new google.maps.marker.PinElement({ glyphText: "C", }); // Add an advanced marker to the map. const marker = new google.maps.marker.AdvancedMarkerElement({ map, position: place.location, }); marker.append(pin); // Pan and zoom the map to the marker. map.panTo(place.location); map.setZoom(12); }
После этого можно увидеть, где находится пользователь по отношению к вашим адресам, как показано ниже.
Видеоинструкции по добавлению Place Autocomplete в приложение
Сайт
Приложение для Android
Приложение для iOS
Показ времени в пути и расстояний до ближайших адресов
| В примере используется: Routes API | Также доступно: библиотека Routes, Maps JavaScript API |
Определив местоположение пользователя, вы можете сопоставить его со своими адресами. Функция Compute Route Matrix в Routes API (или класс RouteMatrix в библиотеке Routes, Maps JavaScript API) позволяет определить время в пути и расстояния. Это поможет пользователю выбрать тот филиал, до которого удобнее добираться.
Показ находящихся поблизости офисов или магазинов предполагает, что информация о них уже получена. Если вы передаете ее из собственной базы данных, то убедитесь, что выбран поддерживаемый формат, например GeoJSON. Подробную информацию можно найти в статье Слой данных.
Стандартный способ упорядочивания списка адресов – по расстоянию. Обычно оно определяется как длина отрезка, соединяющего местоположения пользователя и вашего офиса или магазина, но при этом не учитываются препятствия, такие как участок реки без моста или пробка. В таком случае добраться до более отдаленного офиса или магазина может быть удобнее. Этот нюанс важен, если у вас есть адреса на расстоянии нескольких километров друг от друга.
Метод computeRouteMatrix анализирует список местоположений (начального и конечных) и возвращает не только расстояния между ними, но и время в пути. Начальная точка соответствует местоположению пользователя или выбранному им пункту отправления, а конечные точки соответствуют вашим адресам.
Начальные и конечные точки можно указывать как пары координат, идентификаторы мест или адреса. Вы можете использовать computeRouteMatrix с настройками маршрутизации, такими как TRAFFIC_AWARE, чтобы показывать результаты с учетом текущего или будущего времени в пути.
В приведенном ниже примере выполняется вызов конечной точки computeRouteMatrix в Routes API с указанием исходного местоположения пользователя и идентификаторов мест назначения. Расстояние и время в пути определяются от центра карты до трех офисов Google в Лондоне.
curl -X POST -d '{
"origins": [
{
"waypoint": {
"location": {
"latLng": {
"latitude": 51.493490,
"longitude": -0.097288
}
}
}
}
],
"destinations": [
{
"waypoint": {
"placeId": "ChIJVSZzVR8FdkgRTyQkxxLQmVU"
}
},
{
"waypoint": {
"placeId": "ChIJVSZzVR8FdkgR-HklrBMO0Hc"
}
},
{
"waypoint": {
"placeId": "ChIJ4abvVDwbdkgRDZVFR7A6Bcc"
}
}
],
"travelMode": "DRIVE",
"routingPreference": "TRAFFIC_AWARE"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: originIndex,destinationIndex,duration,distanceMeters,status,condition' \
'https://routes.googleapis.com/distanceMatrix/v2:computeRouteMatrix'Ответ от сервиса содержит расстояние (в метрах) и время в пути для каждой пары точек отправления и назначения, как показано в примере ниже.
Пример ответа
[
{
"originIndex": 0,
"destinationIndex": 0,
"status": {},
"distanceMeters": 4540,
"duration": "924s",
"condition": "ROUTE_EXISTS"
},
{
"originIndex": 0,
"destinationIndex": 1,
"status": {},
"distanceMeters": 5043,
"duration": "1044s",
"condition": "ROUTE_EXISTS"
},
{
"originIndex": 0,
"destinationIndex": 2,
"status": {},
"distanceMeters": 6919,
"duration": "1357s",
"condition": "ROUTE_EXISTS"
}
]Ниже показана карта с отмеченными на ней пунктом отправления (красный маркер C) и пунктами назначения.
Расстояние по прямой и длина маршрута часто не совпадают, как показано в таблице ниже.
| Адрес | Расстояние по прямой | Длина маршрута/время в пути |
|---|---|---|
| Адрес A | 3,32 км | 4,5 км/15 минут |
| Адрес B | 3,20 км | 5,0 км/17 минут |
| Адрес C | 4,84 км | 6,9 км/23 минуты |
Несмотря на то что адрес B расположен ближе всего, длина маршрута и время в пути до адреса A меньше, поскольку до него можно добраться по шоссе.
Выполнив запрос к сервису Distance Matrix, вы можете упорядочить полученные ответы по времени в пути. Примеры реализации такой функции приведены в практической работе.
Навигация и маршруты
| В примере используется: библиотека Routes, Maps JavaScript API | Также доступно: веб-сервис Routes API для использования на устройствах Android и iOS (напрямую из приложения или через прокси-сервер) |
Показывайте маршруты к офисам или магазинам прямо на своем сайте или в приложении. Тогда пользователям не нужно будет переходить на другой ресурс, и они не увидят на карте адреса ваших конкурентов. С помощью Routes API вы также можете запрашивать экологичные маршруты, чтобы оценивать расход топлива или энергии и показывать воздействие поездки на окружающую среду.
В классе Route библиотеки Routes в Maps JavaScript API также есть методы, например createPolylines() и createWaypointAdvancedMarkers(), которые позволяют обрабатывать результаты и показывать их на карте.
Ниже приведен пример запроса и отображения маршрута на карте. Подробную информацию можно найти в статье Как проложить маршрут.
Чтобы узнать больше об этих функциях Карт, ознакомьтесь с документацией по Maps JavaScript API. Также рекомендуем посмотреть пошаговые практические работы, которые помогут вам реализовать инструмент поиска.
Запись на прием и бронирование
Чтобы повысить удобство для пользователей, вы можете добавить на боковую панель с информацией о месте кнопку для записи на прием/бронирования, как показано на рисунке ниже.
Это можно сделать двумя способами: автоматически, с помощью инструмента Quick Builder для улучшенного поиска адресов, или через профиль компании. В этом разделе подробно описаны оба способа.
Как использовать Quick Builder Locator Plus
С помощью решения Quick Builder Locator Plus можно импортировать данные из профиля компании. После этого вы сможете добавлять ссылки для бронирования с помощью сервиса Забронировать через Google (если они доступны). Инструмент Quick Builder можно использовать, даже если у вас нет профиля компании, связанного с аккаунтом Google. Вы можете добавить ссылки для бронирования для компаний, которые уже связаны со сторонними сервисами бронирования в сервисе "Забронировать через Google"*.
Функция "Забронировать через Google" доступна только в определенных странах и регионах, где компании сотрудничают с поддерживаемым сервисом бронирования. Если вы хотите использовать сервис "Забронировать через Google", но не сотрудничаете с партнером Google, попросите своего поставщика заполнить эту форму и ознакомиться с документацией по началу работы. Если у вас пока нет сервиса бронирования, вы можете посмотреть список подходящих сервисов в разделе "Бронирование" в Менеджере профиля компании.
Как включить запись на прием через профиль компании
Если вы управляете информацией о компании, используя профиль компании, все адреса, которые вы создаете, связываются с идентификаторами мест на платформе Google Карт, чтобы можно было интегрировать карты и данные о компании.
С помощью Business Profile API вы можете создавать действия (например, запись на прием), которые затем извлекаются и показываются в приложениях. Реализовать эту функцию можно вручную, следуя инструкциям ниже.
Вы можете добавить на боковую панель с информацией о компании ссылку, перейдя по которой, пользователи смогут записаться на прием или создать бронирование. Ниже приводятся инструкции о том, как это сделать.
-
Используя Business Profile API, создайте объект
placeActionLinkдля адреса с типомAPPOINTMENT,ONLINE_APPOINTMENTилиDINING_RESERVATION. ЗдесьplaceActionLink– это объект на боковой панели, который будет использоваться для записи/бронирования. Если у вас уже есть ссылка для записи, перейдите к следующему шагу. Ниже приводится пример успешной операции POST для методаplaceActionLinks.create.{ "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc", "providerType": "MERCHANT", "isEditable": true, "uri": "https://example.com/reservation-uri", "placeActionType": "DINING_RESERVATION", "createTime": "2021-05-01T01:17:41.609161Z", "updateTime": "2021-05-01T01:17:41.609161Z" } -
Найдите адрес, связанный с идентификатором места на платформе Google Карт.
Когда пользователи просматривают информацию об адресе, она выводится именно для идентификатора места на платформе Google Карт. Чтобы получить и показывать созданную ссылку для записи/бронирования, вам нужно найти идентификатор адреса, связанный с идентификатором места на платформе Карт. Выполните следующие вызовы Business Profile API:
- Получите список всех аккаунтов, связанных с проектом.
- Получите список всех адресов в аккаунте с помощью Business Profile Business Information API.
- Добавьте
metadataвreadMask, чтобы каждый возвращенный адрес содержалmetadata.placeId, который можно сравнить с идентификатором места на платформе Google Карт.
-
А зная этот идентификатор, вы можете получить нужную ссылку. Чтобы получить существующую ссылку
placeActionLinkдля записи, запросите список ссылокplaceActionLinksдля адреса и отфильтруйте их поplaceActionType, чтобы найти нужную (APPOINTMENT,ONLINE_APPOINTMENTилиDINING_RESERVATION).В примере ниже показана ссылка
placeActionLinkдля записи в ответе на запрос списка.{ "placeActionLinks": [ { "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc", "providerType": "MERCHANT", "isEditable": true, "uri": "https://example.com/", "placeActionType": "APPOINTMENT", "createTime": "2021-05-01T01:17:41.609161Z", "updateTime": "2021-05-01T01:17:41.609161Z" } ] } - Создайте на боковой панели раздел
<div>и заполните его нужными данными из объектаplaceActionLink, в частности добавьте URI ссылки записи/бронирования.
Альтернативы ссылкам для записи на прием
Если вы не являетесь менеджером профиля компании или не хотите использовать инструмент Quick Builder для улучшенного поиска адресов, найдите в документации своей платформы бронирования инструкции о том, как встроить соответствующий виджет на сайт или в приложение. Вы также можете использовать сервис Google Cloud, например Cloud Spanner для управления инвентарем (видео).
Показ местных предложений
На боковой панели с информацией о месте можно показывать местные предложения. Google My Business API позволяет создавать и извлекать публикации (например, местные предложения), связанные с вашими адресами. На скриншоте ниже показано, как это выглядит.
На архитектурной диаграмме в разделе Quick Builder показано, какие технологии позволяют добавлять предложения в инструмент поиска.
Поскольку местные предложения связаны с адресами, вам нужно будет определить идентификатор адреса, связанный с идентификатором места на платформе Google Карт.
С помощью этого идентификатора вы сможете извлечь нужное предложение как localPost и показать его на панели с информацией о месте, которую просматривает пользователь. Вот как это сделать:
- С помощью Google My Business API создайте публикации с предложениями (тип
OFFER). -
Найдите адрес или идентификатор адреса, связанный с идентификатором места на карте.
Когда пользователи просматривают информацию о месте, она выводится именно для идентификатора места на платформе Google Карт. Чтобы получить и показывать созданную ссылку на предложение, вам нужно найти идентификатор адреса, связанный с идентификатором места на платформе Карт. Выполните следующие вызовы Business Profile API:
- Получите список всех аккаунтов, связанных с проектом.
- Получите список всех адресов в аккаунте с помощью Business Profile Business Information API.
- Включите
metadataвreadMask, чтобы каждый адрес содержалmetadata.placeId, который можно сравнить с идентификатором места для просматриваемого адреса.
Ниже приводится пример запроса информации об адресе в Business Profile Business Information API версии 1.
GET https://mybusinessbusinessinformation.googleapis.com/v1/locations/15899957830169237700?readMask=name,title,phoneNumbers,categories,regularHours,storefrontAddress,latlng,openInfo,metadata,profile
Ответ содержит поле
metadata.placeId, которое соответствует идентификатору места, используемому в запросах для платформы Google Карт.Пример ответа
{ "name": "locations/15899957830169237700", "title": "Sushi Sushi", "phoneNumbers": { "primaryPhone": "+49 2222 22222" }, "categories": { "primaryCategory": { "name": "categories/gcid:restaurant", "displayName": "Restaurant" } }, "regularHours": { "periods": [ { "openDay": "MONDAY", "openTime": { "hours": 9, "minutes": 0 }, "closeDay": "MONDAY", "closeTime": { "hours": 9, "minutes": 10 } }, { "openDay": "TUESDAY", "openTime": { "hours": 11, "minutes": 30 }, "closeDay": "TUESDAY", "closeTime": { "hours": 24, "minutes": 0 } } ] }, "metadata": { "placeId": "ChIJs4wtL04X2jERbc8qHd_wZzk", "mapsUri": "https://maps.google.com/maps?cid=15899957830169237700" }, "latlng": { "latitude": 1.3670033, "longitude": 103.8556385 }, "openInfo": { "status": "OPEN", "canReopen": true }, "storefrontAddress": { "regionCode": "SG", "languageCode": "en-US", "postalCode": "560445", "addressLines": [ "445 Ang Mo Kio Ave 10" ] }, "profile": { "description": "Example restaurant" } } -
Зная идентификаторы аккаунта и адреса, вы можете получить нужное предложение. Для управления адресами используется Business Profile Business Information API версии 1, а для местных публикаций – конечная точка
mybusiness.googleapis.com/v4accounts.locations.localPostsдля одобренных проектов Business Profile API. Вызовите список публикацийlocalPostsдля адреса и отфильтруйтеOFFERпо типуtopicType.Ниже приводится пример запроса, позволяющего получить список активных местных публикаций для адреса.
GET https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700/localPosts
Ответ содержит
OFFERlocalPost.Пример ответа
{ "localPosts": [ { "name": "accounts/111098884960588804666/locations/15899957830169237700/localPosts/2524928563578730680", "languageCode": "en", "summary": "Buy One Get One Free on all order-ahead bento boxes today!", "state": "LIVE", "event": { "title": "Bento BOGO", "schedule": { "startDate": { "year": 2020, "month": 1, "day": 20 }, "startTime": {}, "endDate": { "year": 2021, "month": 1, "day": 21 }, "endTime": {} } }, "updateTime": "2020-09-11T10:56:22.594Z", "createTime": "2020-09-11T10:56:22.594Z", "searchUrl": "https://local.google.com/place?id=4156539623820808045&use=posts&lpsid=2524928563578730680", "media": [ { "name": "accounts/111098884960588804666/locations/15899957830169237700/media/localPosts/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS", "mediaFormat": "PHOTO", "googleUrl": "https://lh3.googleusercontent.com/p/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS" } ], "topicType": "OFFER", "offer": { "couponCode": "BOGO-JET-CODE", "redeemOnlineUrl": "https://www.example.com/redeem", "termsConditions": "Offer only valid for order-ahead orders placed online." } }, ], } - Создайте на боковой панели раздел
<div>и заполните его нужными данными из объектаlocalPost.
Настройка стиля карты
Вы можете менять внешний вид и параметры карты, в том числе:
- использовать собственные маркеры вместо стандартных;
- менять цвета в соответствии с цветами своего бренда;
- скрывать и показывать объекты инфраструктуры (достопримечательности, рестораны, гостиницы и т. п.), а также выбирать их плотность, чтобы ваши адреса были самыми заметными на карте, а другие объекты лишь помогали сориентироваться.
Создание собственных маркеров
Вы можете настроить расширенные маркеры, изменив цвет фона, контура или глифа (например, чтобы показать, открыт ли сейчас филиал), заменив маркер собственным изображением, например логотипом компании, или создав собственные маркеры HTML и CSS. Также можно показывать дополнительную информацию, такую как часы работы, номер телефона и фотографии, в информационном окне.
Ниже показан пример использования собственных графических маркеров на карте. Код можно посмотреть в статье о собственных графических маркерах в документации по Maps JavaScript API.
Подробная информация приведена в документации по расширенным маркерам для JavaScript (сайтов), Android и iOS.
Определение стилей карты
Платформа Google Карт позволяет изменить стиль карты так, чтобы пользователям было легче найти ближайший офис или магазин и добраться до него. Это поможет вам привлекать клиентов. Например, измените цвета карты в соответствии с цветами вашего бренда и укажите, какие объекты инфраструктуры будут видны пользователю, а какие – нет. Платформа Google Карт предоставляет базовые шаблоны. Некоторые из них оптимизированы для определенных видов деятельности, таких как туризм, логистика, недвижимость и розничная торговля.
Создать или изменить стиль карты можно на странице Стили карты проекта в консоли Google Cloud.
Видеоинструкции по созданию и применению стилей карты в Cloud Console
Стили карт для отдельных видов деятельности
В этом анимационном ролике показаны готовые стили карт для отдельных видов деятельности. Вы можете использовать эти стили в качестве основы. Например, на карте для розничной торговли уменьшено количество объектов инфраструктуры – пользователи будут видеть только ваши адреса и ориентиры, которые помогут быстро добраться.
Управление объектами инфраструктуры
В этом анимационном ролике показано, как задать цвет маркера для объекта инфраструктуры и увеличить плотность таких объектов на карте. Чем выше плотность, тем больше маркеров 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_locatorplus_v2_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 Аналитике и профиле компании, чтобы отслеживать наиболее важные для вас сведения. Для пользователей Quick Builder Locator Plus доступна панель аналитики, которая помогает анализировать данные и получать на их основе полезную информацию. При этом используются анонимизированные данные.
Этот отчет можно найти в разделе Отчеты о привлечении аудитории Cloud Console. Подробнее…
Поскольку Google Аналитика предлагает очень широкие возможности, мы не сможем предоставить здесь полные инструкции по настройке и использованию этого сервиса. Здесь мы расскажем только о том, какие данные вам понадобятся, чтобы анализировать эффективность функции поиска адресов, а также предоставим ссылки на подробную информацию о сервисе и другие руководства.
Настройка Google Аналитики
Если вы уже используете в приложении Google Аналитику, переходите к следующему разделу.
Ниже приводится пример глобального тега, который необходимо добавить на сайт, чтобы включить Google Аналитику.
<!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/ gtag/js?id=G-XR5B5D4NW0"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XR5B5D4NW0'); </script>
Независимо от того, используете вы Google Менеджер тегов или вручную добавляете теги Google Аналитики на сайт, вам необходимо понять, как делать следующее:
- активировать пользовательские взаимодействия, например клики, которые можно регистрировать независимо от просмотров страниц сайта (события);
- просматривать первичные данные (показатели), объединяя их в группы (параметры или специальные параметры).
Использование специальных событий
Ниже показано, как определить специальное событие в инструменте поиска адресов.
gtag('event', 'location', { 'method': 'address' });
Необходимо дать событию (event) и методу (method) понятные названия, чтобы вам было проще анализировать данные в отчетах. Настройте их срабатывание при определенных взаимодействиях, которые вы хотите измерить, например когда пользователь выбирает адрес в раскрывающемся списке с автозаполнением, как показано на скриншоте ниже.
Вы можете передавать в Google Аналитику показанный ниже запрос отслеживания, содержащий заданное вами событие и метод. Для удобства каждый параметр запроса показан в отдельной строке.
https://www.google-analytics.com/g/collect?v=2 &tid=G-XR5B5D4NW0 >m=2oe550 &_p=64678170 &sr=1920x1200 &ul=fr &cid=489856786.1598861364 &_s=2 &dl=http%3A%2F%2.storelocator.html &dt=Store%20Locator &sid=1620827159 &sct=1 &seg=1 &en=location &_et=6032 &ep.method=address
На скриншоте ниже показано, как вызовы Google Аналитики выглядят в представлении "Проверка" на вкладке "Сеть" браузера. Чтобы увеличить изображение, нажмите на него.
Чтобы убедиться, что теги специальных событий настроены правильно, откройте представление "В режиме реального времени" в Google Аналитике. Например, событие location, срабатывающее при автозаполнении информации о месте, будет выглядеть в Google Аналитике следующим образом:
Также для отслеживания событий в реальном времени можно использовать отчет DebugView, как показано ниже. Обратите внимание, что доступ к полному отчету о событиях в Google Аналитике (Вовлечение > События) появится через 24 часа.
Вы также можете разрабатывать стратегии для привлечения посетителей в свои магазины и офисы с помощью инструмента поиска адресов и собирать данные. Например, в Google Аналитике есть решение для посещений магазинов, которое позволяет связать данные о посещении обычных магазинов (собранные в Google Рекламе) и статистику по инструменту поиска адресов. Вы также можете создавать стратегии привлечения пользователей приложения в ваши магазины и офисы, например с помощью онлайн-предложений, которыми можно воспользоваться только офлайн.
Показатели профиля компании
Помимо данных Google Аналитики о событиях, показателях и параметрах вы можете также запрашивать показатели взаимодействия с адресами из Business Profile Performance API.
Доступные значения DailyMetric позволяют отслеживать показы в Поиске и Картах, запросы маршрутов, клики с переходом на сайт и звонки, а также бронирования, сделанные через сервис "Забронировать через Google".
В примере ниже показан вызов locations.fetchMultiDailyMetricsTimeSeries для получения данных о ежедневных показах, запросах маршрутов, кликах с переходом на сайт и бронированиях для определенного адреса.
Пример запроса
GET https://businessprofileperformance.googleapis.com/v1/locations/15899957830169237700:fetchMultiDailyMetricsTimeSeries?dailyMetrics=BUSINESS_IMPRESSIONS_DESKTOP_MAPS&dailyMetrics=BUSINESS_IMPRESSIONS_MOBILE_MAPS&dailyMetrics=BUSINESS_IMPRESSIONS_DESKTOP_SEARCH&dailyMetrics=BUSINESS_IMPRESSIONS_MOBILE_SEARCH&dailyMetrics=BUSINESS_DIRECTION_REQUESTS&dailyMetrics=WEBSITE_CLICKS&dailyMetrics=BUSINESS_BOOKINGS&dailyRange.start_date.year=2025&dailyRange.start_date.month=1&dailyRange.start_date.day=1&dailyRange.end_date.year=2025&dailyRange.end_date.month=1&dailyRange.end_date.day=31
Пример ответа
{
"multiDailyMetricTimeSeries": [
{
"dailyMetricTimeSeries": [
{
"dailyMetric": "BUSINESS_IMPRESSIONS_DESKTOP_MAPS",
"timeSeries": {
"datedValues": [
{
"date": { "year": 2025, "month": 1, "day": 1 },
"value": "48"
}
]
}
},
{
"dailyMetric": "BUSINESS_IMPRESSIONS_MOBILE_MAPS",
"timeSeries": {
"datedValues": [
{
"date": { "year": 2025, "month": 1, "day": 1 },
"value": "112"
}
]
}
},
{
"dailyMetric": "BUSINESS_DIRECTION_REQUESTS",
"timeSeries": {
"datedValues": [
{
"date": { "year": 2025, "month": 1, "day": 1 },
"value": "14"
}
]
}
},
{
"dailyMetric": "WEBSITE_CLICKS",
"timeSeries": {
"datedValues": [
{
"date": { "year": 2025, "month": 1, "day": 1 },
"value": "29"
}
]
}
},
{
"dailyMetric": "BUSINESS_BOOKINGS",
"timeSeries": {
"datedValues": [
{
"date": { "year": 2025, "month": 1, "day": 1 },
"value": "6"
}
]
}
}
]
}
]
}
Каждая запись dailyMetricTimeSeries возвращает ежедневные данные за запрошенный диапазон дат, в том числе:
- Показы на компьютерах и мобильных устройствах в Google Картах и Google Поиске.
- Запросы маршрута до адреса компании (
BUSINESS_DIRECTION_REQUESTS). - Клики по ссылке на сайт компании (
WEBSITE_CLICKS) и бронирования через сервис "Забронировать через Google" (BUSINESS_BOOKINGS).
Также для сбора показателей можно создать ссылки на действия с помощью функции Забронировать через Google. Информацию о кликах по таким ссылкам можно передавать в Google Аналитику, чтобы отслеживать конверсии. Подробнее…
Каким бы образом вы ни собирали показатели, с их помощью вы можете не только определять, достигаете ли вы KPI, но и анализировать, как изменения, которые вы вносите в функцию поиска адресов, влияют на результаты. Вы также можете сравнивать данные о работе этой функции из Google Аналитики и профиля компании. Это позволит, например, узнать, сколько пользователей прокладывают маршрут на Google Картах, а затем посещают ваш магазин или офис.
Дополнительные возможности
В зависимости от потребностей вашей компании или пользователей вы можете дополнительно улучшить взаимодействие с пользователем.
Отправка маршрута на мобильный телефон
Чтобы повысить удобство для пользователей, можно отправлять им ссылку на маршрут через 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 и электронные письма через сторонние компании. Подробнее…
Использование Просмотра улиц
Просмотр улиц предоставляет огромное количество снимков и позволяет заранее увидеть местность вокруг вашего офиса или магазина. Вы можете предоставлять пользователям интерактивные (веб) и статические (API) панорамы Просмотра улиц. Первые из них обеспечивают 360-градусный обзор и позволяют осмотреться. Просмотр улиц также доступен для Android и iOS.
Использование геолокации
В большинстве случаев местоположение пользователя можно определить за счет собственной геолокации устройства или браузера. Мы подготовили пример использования функции геолокации HTML5 в браузере для отображения географического местоположения пользователя или устройства на карте Google. Также у нас есть документация по запросу разрешений и получению местоположения в Android и iOS. Иногда, однако, может потребоваться прибегнуть к альтернативному решению, например при отключенной геолокации устройства или подозрении на спуфинг.
Geolocation API – это серверный API, который возвращает информацию о местоположении и радиусе точности, полученную с помощью обнаруженных клиентом вышек сотовой связи и узлов Wi-Fi. Вы можете использовать этот API в качестве резервного механизма или для проверки данных, полученных от устройства.
Добавление собственных сведений об адресах
Из раздела Предоставление сведений об адресах вы узнали, как показывать пользователям подробную информацию о ваших офисах или магазинах, такую как часы работы, фотографии и отзывы.
Рекомендуем изучить тарифы и уровни SKU для различных данных в Places API (New). Для оптимизации расходов можно объединять имеющиеся у вас сведения об адресах с новыми данными Google Карт, такими как статус "Временно закрыто", часы работы в праздники, средняя оценка, фотографии и отзывы. Если у вас уже есть контактная информация, не указывайте эти поля в запросе информации о месте. Вы можете получать только те данные, которые хотите показывать пользователям.
Собственные сведения об адресах могут отображаться рядом с описанием места или вместо него. Посмотрите практическую работу по комплексной реализации инструмента поиска адресов. В этом примере показано использование GeoJSON с базой данных для хранения и получения собственных сведений об адресах.