Обзор
Платформа Google Maps доступна для веб-приложений (JS, TS), Android и iOS, а также предлагает API веб-сервисов для получения информации о местах, маршрутах и расстояниях. Примеры в этом руководстве написаны для одной платформы, но для реализации на других платформах предоставлены ссылки на документацию.
Инструмент Quick Builder в консоли Google Cloud позволяет быстро создавать локаторы, включая импорт профилей компаний и автоматическое встраивание ссылок для записи на прием от сторонних поставщиков. Интерактивный пользовательский интерфейс позволяет генерировать код и развертывать его в облаке за считанные минуты.
Ваши пользователи хотят искать товары и услуги в интернете и находить наиболее удобное место для посещения, записи на прием или получения заказа. Они хотят как можно быстрее добраться до вашего магазина, а вы хотите предоставить им удобный онлайн-сервис, который увеличит посещаемость ваших физических магазинов, повысит удовлетворенность пользователей и сократит количество обращений в службу поддержки. Вы также хотите оценить эффективность вашего сервиса поиска, чтобы понять, могут ли ваши клиенты найти ваш магазин, и определить, где можно внести улучшения.
Locator Plus — рекомендации и советы по настройке, которые мы приводим в этой теме, — это оптимальное сочетание API платформы Google Maps для создания превосходного пользовательского опыта в области определения местоположения. Следуя этим рекомендациям, вы сможете помочь пользователям находить ваши местоположения на карте, получать подробную информацию, необходимую для принятия решений, и прокладывать маршруты, независимо от того, едут ли они на машине, велосипеде, пешком или на общественном транспорте.
Для пользователей Locator Plus предусмотрена аналитическая панель, которая помогает анализировать данные и получать ценную информацию, предоставляя четкое представление о том, насколько эффективно покупатели взаимодействуют с вашим сервисом поиска магазинов. Чтобы получить доступ к этому отчету, перейдите в раздел «Отчеты о взаимодействии» в консоли. Более подробную информацию об этом отчете см. в разделе «Отчеты о взаимодействии» .
На следующей диаграмме показаны основные API, используемые при внедрении Locator Plus. На диаграмме также показана база данных ваших собственных данных о местоположении, которую вы можете объединить с Place Details, чтобы предоставить пользователям максимально полную и достоверную информацию. (Нажмите, чтобы увеличить.)
Включение API
Для внедрения этих методов необходимо включить следующие API в консоли Google Cloud:- API карт на JavaScript
- API мест
- API геокодирования
- API матрицы расстояний (устаревшая версия)
- API для построения маршрутов (устаревшая версия)
Разделы реализации
Ниже описаны методы и настройки, которые мы рассмотрим в этой теме.
- Значок галочки является ключевым элементом практики.
- Значок звезды — это необязательная, но рекомендуемая настройка для улучшения решения.
| Отображение вашего местоположения на интерактивной карте | Создайте карту, которая позволит пользователям просматривать подробную информацию о местоположении, перемещаться по ней, а также увеличивать и уменьшать масштаб. Или воспользуйтесь решением Quick Builder Locator Plus , чтобы быстро создать карту, включая простой импорт данных о компаниях из ваших профилей , встраивание ссылок для записи на прием и развертывание в Google Cloud Storage. | |
| Предоставление подробной информации о месте | После того, как пользователи найдут ближайшие к вам места на карте, предоставьте им подробную информацию о них, чтобы помочь им принять решение. | |
| Показаны места с угла обзора 45°. | Предоставьте пользователям более наглядное представление о вашем местоположении на спутниковом снимке под углом 45 градусов. | |
| Определение местоположения пользователя | Добавьте функцию ввода текста по мере необходимости, чтобы улучшить пользовательский опыт на всех платформах и повысить точность адресов при минимальном количестве нажатий клавиш. | |
| Отображение времени в пути и расстояния до ближайших мест. | Рассчитайте расстояние и время в пути для нескольких пунктов отправления и назначения, при необходимости указав различные виды транспорта, такие как пешая прогулка, поездка на автомобиле или велосипеде. | |
| Помощь пользователям в записи на прием | Предоставьте пользователям возможность записываться на прием через боковую панель «Подробная информация о месте». Или воспользуйтесь решением Quick Builder Locator Plus , чтобы быстро создать карту, включая простой импорт данных о компаниях из ваших профилей , встраивание ссылок для записи на прием и развертывание в Google Cloud Storage. | |
| Отображение местных предложений | В боковой панели «Подробная информация о месте» отображайте пользователям кликабельные местные предложения. | |
| Предоставление навигационных указаний | Получите данные о маршруте от пункта отправления до пункта назначения, используя различные виды транспорта, такие как пешая прогулка, автомобиль, велосипед и общественный транспорт. | |
| Настройка карты | Создавайте пользовательские маркеры на карте, чтобы выделить ваши местоположения, и оформляйте карту в соответствии с фирменными цветами. Отображайте (или скрывайте) определенные точки интереса (POI) на карте, чтобы помочь пользователям лучше ориентироваться, и регулируйте плотность POI, чтобы избежать загромождения карты. | |
| Получение информации об использовании с помощью аналитики. | Настройте и используйте Google Analytics, чтобы получить представление о вашей стратегии и реализации размещения рекламы. | |
| Отправка маршрута на мобильный телефон | Помимо отображения маршрута на экране локатора, вы также можете отправлять маршрут на телефон пользователя для навигации с помощью Google Maps в пути. | |
| Отображение панорамы улиц для помощи пользователям в визуализации местоположений. | Предоставьте пользователям панорамные изображения Street View с обзором на 360 градусов, чтобы помочь им лучше ориентироваться и быстрее находить ваши объекты. | |
| Определение местоположения пользователя с помощью геолокации. | Если вы не хотите полагаться на встроенные в устройство службы определения местоположения, используйте геолокацию для определения местоположения пользователя. | |
| Объединение пользовательских данных о местоположении с подробными сведениями о месте. | Сочетайте собственные данные о местоположении с подробными сведениями о месте, чтобы предоставить пользователям обширный набор данных для принятия решений. |
Отображение вашего местоположения на интерактивной карте
Функция поиска местоположения является важной частью пользовательского опыта. Однако на некоторых сайтах может отсутствовать даже простая карта, что вынуждает пользователей покидать сайт или приложение, чтобы найти ближайшее местоположение. Это означает неоптимальный пользовательский опыт, поскольку пользователям приходится перемещаться между страницами, чтобы получить необходимую информацию. Вместо этого вы можете улучшить этот опыт, встраивая и настраивая карты в свои приложения.
Существует несколько способов включить эту функцию: (1) использовать решение Quick Builder Locator Plus , которое предоставляет эту функциональность «из коробки», и (2) использовать собственную реализацию динамических карт. В этом разделе подробно описаны эти варианты.
Использование Quick Builder Locator Plus
С помощью решения Quick Builder Locator Plus вы можете импортировать данные о компании из своего профиля. Теперь изменения в данных о компании в вашем профиле будут отражаться в поиске магазинов на вашем веб-сайте. Эти изменения могут включать часы работы, контактную информацию, фотографии, варианты услуг и многое другое. Quick Builder позволяет быстро настроить местоположение магазинов на карте, сгенерировать готовый к развертыванию код или напрямую развернуть его в Google Cloud Storage за считанные минуты.
Использование собственной реализации динамических карт
| В этом примере используется: API JavaScript для работы с картами. | Также доступно: Android | iOS |
Добавить на страницу динамическую карту — то есть карту, по которой пользователи могут перемещаться, увеличивать и уменьшать масштаб, а также получать подробную информацию о различных местах и достопримечательностях — можно всего несколькими строками кода.
Во-первых, вам необходимо подключить JavaScript API для работы с картами на вашей странице. Это делается путем добавления следующего скрипта в ваш HTML-код страницы.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a"></script> URL-адрес ссылается на функцию JavaScript initMap , которая запускается при загрузке страницы. В URL-адресе вы также можете указать язык или регион вашей карты, чтобы убедиться, что она правильно отформатирована для конкретной страны, на которую вы ориентируетесь. Установка региона также гарантирует, что поведение приложений, используемых за пределами США, будет ориентировано на указанный вами регион. Полный список поддерживаемых языков и регионов, а также дополнительную информацию об использовании параметра region можно найти в разделе «Подробная информация о покрытии платформы Google Maps» .
Далее вам понадобится HTML-элемент ` div , чтобы разместить карту на странице. Именно здесь будет отображаться карта.
<div id="map"></div>
Следующий шаг — настройка основных функций вашей карты. Это делается в функции скрипта initMap , указанной в URL-адресе скрипта. В этом скрипте, показанном в следующем примере, вы можете задать начальное местоположение, тип карты и то, какие элементы управления будут доступны на карте для ваших пользователей. Обратите внимание, что getElementById() ссылается на идентификатор div "map", указанный выше.
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: { lat: 51.485925, lng: -0.129500 }, zoomControl: false }); }
Для локатора обычно требуется задать начальное местоположение, центральную точку или границы, а также уровень масштабирования (насколько карта приближена к этому месту). Большинство других элементов, таких как настройка элементов управления, являются необязательными, поскольку вы определяете уровень взаимодействия с картой.
Получение идентификаторов мест
| В этом примере используется API Places . | Также доступен: JavaScript |
У вас может быть база данных ваших местоположений с основной информацией, такой как название места, его адрес и номер телефона. Чтобы получить информацию о месте, имеющуюся в Google Maps Platform, включая географические координаты и информацию, предоставленную пользователями, найдите идентификатор места , соответствующий каждому из местоположений в вашей базе данных. Вы можете обратиться к конечной точке Find Place в Places API Place Search, запросив только поле 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_locatorplus_v2_a
Вы можете сохранить этот идентификатор места в своей базе данных и использовать его как эффективный способ запроса информации о месте. Ниже приведены инструкции по использованию идентификатора места для геокодирования, получения подробной информации о месте и запроса маршрута до этого места.
Геокодирование вашего местоположения
| В этом примере используется API геокодирования . | Также доступен: JavaScript |
Если в вашей базе данных местоположений есть адреса улиц, но нет географических координат, используйте API геокодирования, чтобы получить широту и долготу этого адреса для размещения маркера на карте. Вы можете выполнить геокодирование адресов на стороне сервера, сохранить широту и долготу в базе данных и обновлять ее не реже чем каждые 30 дней .
Вот пример использования API геокодирования для получения широты и долготы идентификатора места, возвращенного для лондонского офиса Google:
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_aДобавление местоположений на карту
Следующий шаг — добавить ваши местоположения на карту. Обычно это делается путем добавления маркеров на карту, хотя существует ряд других вариантов, которые вы можете использовать, например, слои данных .
Получив координаты широты и долготы вашего местоположения, вы можете добавить на карту следующий пример:
var marker = new google.maps.Marker({ position: { lat: 51.493073, lng: -0.146550 }, label:"A", title:"Location Name" }); // To add the marker to the map, call setMap(); marker.setMap(map);
С помощью нескольких маркеров можно одновременно увидеть расположение нескольких мест.
Если местоположений много, можно рассмотреть использование утилиты кластеризации маркеров для JavaScript , Android или iOS . Вот пример кластеризации маркеров в примере JavaScript для поиска магазинов на GitHub.
Предоставление подробной информации о месте
| В этом примере используется: API JavaScript для работы с картами. | Также доступно: API | Android | iOS |
Вы можете поделиться с пользователями необходимой информацией о месте перед его посещением. Благодаря подробной информации, такой как контактные данные, часы работы, пользовательские рейтинги, фотографии пользователей и статус временного закрытия, ваши пользователи будут точно знать, чего ожидать при посещении вашего заведения. После вызова API Places вы можете отфильтровать и отобразить ответ в информационном окне, боковой панели веб-страницы или любым другим удобным для вас способом.
Для запроса подробной информации о местоположении вам потребуется идентификатор каждого из ваших местоположений. См. раздел «Получение идентификаторов местоположений» , чтобы получить идентификатор вашего местоположения.
Разверните, чтобы посмотреть видеоролики о том, как запросить подробную информацию о месте:
Узнать часы работы
Проверьте закрытие
Контроль затрат
В следующем примере используется библиотека Places Library и API JavaScript Maps для получения подробной информации о местах и добавления её в информационное окно. В этой реализации используется стратегия экономии средств: запрос на получение подробной информации о месте запускается только тогда, когда пользователь запрашивает её, щёлкнув по маркеру, вместо того, чтобы предварительно получать информацию обо всех местах независимо от интереса пользователя.
const marker = new google.maps.Marker({ map, position: { lat: 51.493073, lng: -0.14655 }, }); const request = { placeId: "ChIJVSZzVR8FdkgRTyQkxxLQmVU", fields: ["name", "formatted_address", "rating", "website"], }; const infowindow = new google.maps.InfoWindow(); const service = new google.maps.places.PlacesService(map); google.maps.event.addListener(marker, "click", function () { service.getDetails(request, (place, status) => { if (status === google.maps.places.PlacesServiceStatus.OK && place) { infowindow.setContent( "<div><strong>" + place.name + "</strong><br>" + place.formatted_address + "<br>" + "Rating: " + place.rating + " stars<br>" + place.website + "</div>" ); infowindow.open(map, this); } }); });
Показаны места с угла обзора 45°.
| В этом примере используется: API JavaScript для работы с картами. | Также доступно: 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); } });
Определение местоположения пользователя
| В этом примере используется: API JavaScript для работы с картами. | Также доступно: Android | iOS |
Следующий ключевой компонент любого локатора — определение начального местоположения пользователя. По умолчанию вы можете использовать мобильные службы определения местоположения и геолокацию веб-браузера, чтобы запросить у пользователя разрешение на установку начальной точки в качестве текущего местоположения пользователя. Однако пользователь может отклонить эти разрешения или захотеть установить другое местоположение в качестве начальной точки.
Сегодня пользователи привыкли к функции автозаполнения в потребительской версии Google Maps. Эту функцию можно интегрировать в любое приложение, использующее библиотеки Google Maps Platform Places на мобильных устройствах и в веб-версии. Когда пользователь вводит адрес, функция автозаполнения заполняет оставшуюся часть текста с помощью виджетов. Вы также можете реализовать собственную функцию автозаполнения, используя библиотеки Places напрямую.
Добавить библиотеку автозаполнения мест на ваш сайт можно, просто добавив пару параметров запроса к URL-адресу скрипта Maps JavaScript API. В следующем примере добавление выглядит так: libraries=places .
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_a" defer></script>Далее добавьте на страницу текстовое поле для ввода данных пользователем.
<input id="autocomplete" placeholder="Enter starting address, city, or zip code" type="text"></input>
Наконец, необходимо инициализировать службу автозаполнения и связать её с текстовым полем с указанным именем. Ограничение прогнозов автозаполнения по типам геокодирования настраивает поле ввода таким образом, чтобы оно принимало адреса улиц, районы, города и почтовые индексы, позволяя пользователям вводить данные с любой степенью детализации для описания своего местоположения. Обязательно запросите поле 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", addUserLocation); }
В этом примере после того, как пользователь выберет адрес, выполняется функция addUserLocation() . Она принимает геометрию найденного адреса, местоположение пользователя, затем перемещает карту в это место и добавляет маркер.
function addUserLocation() { // Get the place details from the autocomplete object. const place = autocomplete.getPlace(); // Add a marker to the map. const marker = new google.maps.Marker({ map: map }); marker.setLabel("C"); marker.setPosition(place.geometry.location); // Zoom the map to the marker. map.panTo(place.geometry.location); map.setZoom(12); }
Затем вы можете увидеть взаимосвязь между пользователем и конкретными местоположениями, показанную на следующем изображении.
Разверните этот раздел, чтобы посмотреть видеоинструкции по добавлению функции автозаполнения мест в ваше приложение:
Веб-сайт
Приложения для Android
приложения для iOS
Отображение времени в пути и расстояния до ближайших мест.
| В этом примере используется API матрицы расстояний (устаревшая версия). | Также доступны: сервис матрицы расстояний, JavaScript API для работы с картами (устаревшая версия). |
Получив местоположение пользователя, вы можете сравнить его с местоположением ваших пользователей. Использование сервиса Distance Matrix Service и API JavaScript для карт (устаревшая версия) помогает пользователям выбрать наиболее удобное для них местоположение, исходя из времени в пути или расстояния по дороге.
Отображение местоположений рядом с пользователем означает, что ваши данные о местоположениях уже заполнены. При использовании собственной базы данных местоположений важно убедиться, что данные представлены в формате, пригодном для использования на карте, например, GeoJSON, как описано в разделе «Слой данных» .
Стандартный способ организации списка местоположений — сортировка по расстоянию. Часто это расстояние рассчитывается просто по прямой линии от пользователя до местоположения, но это может ввести в заблуждение. Прямая линия может проходить через непроходимую реку или через оживленные дороги в то время, когда другое место может быть более удобным. Это важно, когда у вас есть несколько местоположений, расположенных в нескольких километрах друг от друга.
Сервис «Матрица расстояний» работает следующим образом: он принимает список начальных и конечных точек и возвращает не только пройденное расстояние, но и время между ними. В случае пользователя начальной точкой будет его текущее местоположение или желаемая отправная точка, а конечными точками — адреса этих точек. Начальные и конечные точки могут быть указаны в виде пар координат или адресов; при вызове сервиса будет использоваться последний вариант. Вы можете использовать «Матрица расстояний» с рядом дополнительных параметров для отображения результатов на основе текущего или будущего времени в пути.
В следующем примере вызывается служба матрицы расстояний, указывающая начальную точку пользователя и его местоположение. В этом примере показано расстояние от центра карты до трех офисов Google в Лондоне.
Краткий справочник по кодированию URL: %2C = , (запятая), %3A = : (двоеточие) и %7C = | (вертикальная черта).
https://maps.googleapis.com/maps/api/distancematrix/json?origins=51.493490%2C-0.097288
&destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc
&units=metric
&mode=driving
&key=YOUR_API_KEY
&solution_channel=GMP_guides_locatorplus_v2_aВот версия, которую вы можете скопировать и запустить:
https://maps.googleapis.com/maps/api/distancematrix/json?key=YOUR_API_KEY&origins=51.493490%2C-0.097288&destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc&units=metric&mode=driving&solution_channel=GMP_guides_locatorplus_v2_aФактический ответ от сервиса будет представлять собой список совпадающих адресов, расстояний и продолжительности, аналогичный показанному в следующем примере:
Разверните, чтобы увидеть пример ответа:
{ "destination_addresses": [ "123 Buckingham Palace Rd, Victoria, London SW1W 9SH, UK", "1-13 St Giles High St, West End, London WC2H 8AG, UK", "6 Pancras Square, Kings Cross, London N1C 4AG, UK" ], "origin_addresses": [ "Unnamed Road, London, UK" ], "rows": [ { "elements": [ { "distance": { "text": "4.5 km", "value": 4540 }, "duration": { "text": "15 mins", "value": 924 }, "status": "OK" }, { "distance": { "text": "5.0 km", "value": 5043 }, "duration": { "text": "17 mins", "value": 1044 }, "status": "OK" }, { "distance": { "text": "6.9 km", "value": 6919 }, "duration": { "text": "23 mins", "value": 1357 }, "status": "OK" } ] } ], "status": "OK" }
На следующем изображении на карте показаны пункты отправления (красный маркер C) и назначения:
Расстояние по прямой и расстояние по маршруту часто различаются, как показано в следующей таблице.
| Расположение | Прямое расстояние | Дорога в пробке / Время |
|---|---|---|
| Местоположение А | 3,32 км | 4,5 км / 15 минут |
| Местоположение B | 3,20 км | 5,0 км / 17 минут |
| Местоположение C | 4,84 км | 6,9 км / 23 минуты |
Несмотря на то, что точка B находится ближе всего по расстоянию, путь туда и время в пути будут больше, поскольку до точки A можно добраться по автомагистрали.
После отправки запроса вы можете обработать совпадение, чтобы упорядочить ответы по продолжительности времени в пути. Примеры такой функции можно найти в руководствах по поиску локаторов.
Предоставление навигационных указаний
| В этом примере используются: API карт JavaScript и сервис построения маршрутов. | Также доступен веб-сервис Directions API (устаревшая версия) для использования на Android и iOS, как непосредственно из приложения, так и удаленно через серверный прокси. |
Отображение маршрута прямо на вашем сайте или в приложениях означает, что пользователям не нужно покидать ваш сайт, а значит, они не будут отвлекаться на другие страницы или видеть конкурентов на карте. Вы даже можете показать выбросы углекислого газа для конкретного вида транспорта и продемонстрировать влияние каждой отдельной поездки.
Сервис построения маршрутов также имеет функции, позволяющие обрабатывать результаты и легко отображать их на карте.
Ниже приведён пример отображения панели с указаниями маршрута. Для получения дополнительной информации о примере см. раздел «Отображение текстовых указаний маршрута» .
Чтобы узнать больше об этих функциях Maps, ознакомьтесь с документацией по JavaScript API Maps или посмотрите пошаговые инструкции по созданию локатора.
Помощь пользователям в записи на прием
Когда пользователи просматривают подробную информацию о вашем местоположении в боковой панели, вы можете предложить удобную возможность записи на прием одним нажатием кнопки, как показано на следующем рисунке.
Существует несколько способов включить эту функцию: (1) используя решение Quick Builder Locator Plus , которое предоставляет эту функциональность «из коробки», и (2) используя свой бизнес-профиль . В этом разделе подробно описаны эти варианты.
Воспользуйтесь функцией быстрого поиска конструктора Quick Builder Locator Plus.
С помощью решения Quick Builder Locator Plus вы можете легко импортировать данные о вашей компании из вашего профиля . После импорта в инструмент Quick Builder вы можете включить встроенные ссылки для бронирования встреч (где это возможно) для ваших местоположений через Reserve with Google . Даже если у вас нет профиля компании, связанного с учетной записью Google, вы все равно можете использовать Quick Builder для встраивания ссылок для бронирования для компаний, которые вы уже активировали у сторонних поставщиков услуг бронирования через Reserve with Google*.
*Система бронирования через Google доступна только в определенных странах/регионах, где компании сотрудничают с поддерживаемым поставщиком услуг бронирования . Если вас интересует система бронирования через Google, но вы в настоящее время не сотрудничаете с партнером этой системы, попросите своего поставщика услуг отправить заявку, заполнив эту форму , и ознакомьтесь с нашей документацией , чтобы узнать, как начать работу. Если вы еще не сотрудничаете с поставщиком услуг бронирования, вы можете увидеть подходящих поставщиков в разделе «Бронирования» в Менеджере профилей компаний .
Используйте профиль компании для включения функции записи на прием.
При управлении своим присутствием в интернете с помощью Business Profile , созданные вами местоположения компаний связываются с идентификаторами мест платформы Google Maps, что позволяет интегрировать картографические функции с данными о компаниях.
API бизнес-профилей позволяют создавать действия, такие как бронирование встреч, которые можно получать и отображать в ваших приложениях, но для их включения требуется выполнить некоторые действия вручную, как описано ниже.
Когда пользователи просматривают подробную информацию о вашем местоположении в боковой панели, вы можете предоставить им ссылку для записи на прием. В этом разделе описано, как это сделать.
Создайте объект
placeActionLinkдля профиля компании в API, указав местоположение типа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 Maps.
Когда пользователи просматривают сведения о месте, они видят подробную информацию об идентификаторе места в Google Maps Platform. Идентификатор места связан с идентификатором местоположения в профиле компании, поэтому вам необходимо найти идентификатор местоположения на основе идентификатора места на карте, чтобы получить и отобразить созданную вами ссылку для бронирования встречи. Выполните следующие вызовы API профиля компании:
- Перечислите счета вашего проекта .
- Перечислите все местоположения в рамках учетной записи.
- В параметрах местоположения учетной записи
LocationKeyсодержит идентификатор места на платформе Google Maps, который можно сравнить с идентификатором места, просматриваемого в данный момент.
Используя идентификатор местоположения, вы можете получить нужную ссылку для действия. Чтобы получить существующую
placeActionLinkдля записи на прием, перечислите существующиеplaceActionLinksдля этого местоположения и отфильтруйте поplaceActionType, чтобы найти нужную ссылку для записи на прием (APPOINTMENT,ONLINE_APPOINTMENTилиDINING_RESERVATION).В следующем примере показана
placeActionLinkтипа APPOINTMENT в ответе на вызов LIST.{ "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 Locator Plus , проверьте свою платформу для записи на прием, чтобы найти документацию по встраиванию виджета бронирования на веб-сайт или в приложение. Другой вариант — использование Google Cloud, например Cloud Spanner для управления запасами (видео).
Отображение местных предложений
В боковой панели «Подробная информация о местоположении» можно отображать местные предложения, по которым пользователи могут перейти по ссылкам. API Google My Business позволяет создавать и получать «публикации» (например, местные предложения), связанные с вашими местоположениями. На следующем рисунке показан пример местного предложения в боковой панели «Подробная информация о местоположении».
(Архитектурная схема в разделе «Быстрый конструктор» показывает доступные технологии для добавления предложений в ваш поиск.)
Поскольку локальные предложения связаны с местоположениями, вам потребуется найти идентификатор местоположения в профиле компании, связанный с идентификатором места на платформе Google Maps для местоположения, которое просматривают пользователи. Получив идентификатор местоположения в профиле компании, вы сможете получить соответствующее предложение в виде localPost и отобразить его на боковой панели «Подробная информация о месте». Вот шаги:
- С помощью API Google My Business создавайте любые объявления-предложения , которые хотите отображать, типа
OFFER. Найдите на карте местоположение/идентификатор местоположения в профиле компании, связанный с идентификатором места.
Когда пользователи просматривают сведения о месте, они видят подробную информацию об идентификаторе места в Google Maps Platform. Идентификатор места связан с идентификатором местоположения в профиле компании, поэтому вам необходимо найти идентификатор местоположения на основе идентификатора места на карте, чтобы получить и отобразить ссылку на местное предложение для вашего местоположения. Выполните следующие вызовы API профиля компании:
- Перечислите счета вашего проекта .
- Перечислите все местоположения в рамках учетной записи.
- В настройках местоположения в учетной записи
LocationKeyсодержит идентификатор места на карте, который можно сравнить с идентификатором места, просматриваемого в данный момент.
Ниже приведён пример запроса на получение сведений о местоположении через API бизнес-профилей:
https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700
В ответе содержится поле
locationKey, которое представляет собой идентификатор места, используемый в запросах к платформе Google Maps.Разверните, чтобы увидеть пример ответа.
{ "name": "accounts/111098884960588804666/locations/15899957830169237700", "locationName": "Sushi Sushi", "primaryPhone": "+49 2222 22222", "primaryCategory": { "displayName": "Restaurant", "categoryId": "gcid:restaurant", }, "regularHours": { "periods": [ { "openDay": "MONDAY", "openTime": "09:00", "closeDay": "MONDAY", "closeTime": "09:10" }, { "openDay": "TUESDAY", "openTime": "11:30", "closeDay": "TUESDAY", "closeTime": "24:00" } ] }, "locationKey": { "placeId": "ChIJs4wtL04X2jERbc8qHd_wZzk", "requestId": "2c72cbcb-ea2e-4d66-b684-0ef5f090300c" }, "latlng": { "latitude": 1.3670033, "longitude": 103.8556385 }, "openInfo": { "status": "OPEN", "canReopen": true }, "locationState": { "isGoogleUpdated": true, "canUpdate": true, "canDelete": true, "isVerified": true, "isPublished": true, "canHaveFoodMenus": true }, "attributes": [ { "attributeId": "has_delivery", "valueType": "BOOL", "values": [ false ] }, { "attributeId": "requires_masks_customers", "valueType": "BOOL", "values": [ true ] }, { "attributeId": "url_order_ahead", "valueType": "URL", "urlValues": [ { "url": "https://example.com/" }, ] }, { "attributeId": "pay_credit_card_types_accepted", "valueType": "REPEATED_ENUM", "repeatedEnumValue": { "setValues": [ "visa" ], "unsetValues": [ "american_express" ] } } ], "address": { "regionCode": "SG", "languageCode": "en-US", "postalCode": "560445", "addressLines": [ "445 Ang Mo Kio Ave 10" ] }, "profile": { "description": "Example restaurant" } }Теперь, когда у вас есть идентификатор местоположения, вы можете получить нужное вам предложение. Чтобы найти существующее сообщение с предложением, просмотрите список существующих
localPostsдля этого местоположения и отфильтруйте поtopicTypeсо значениемOFFER, чтобы найти контент предложения, который вы хотите использовать.Вот пример запроса для вывода списка активных локальных сообщений для определенного местоположения:
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.
Настройка карты
Вы можете изменить внешний вид и детализацию карты несколькими способами. Например, вы можете:
- Создайте собственные пользовательские маркеры, чтобы заменить стандартные метки на карте.
- Измените цвета элементов карты в соответствии с фирменными цветами вашего бренда.
- Настройте отображение объектов интереса (достопримечательностей, ресторанов, мест размещения и т. д.) и плотность их размещения, позволяя сосредоточить внимание пользователей на ваших локациях и одновременно выделять ориентиры, которые помогут пользователям добраться до ближайшего места.
Создание пользовательских маркеров на карте
Вы можете настроить свои маркеры, изменив цвет по умолчанию (например, указав, открыто ли заведение в данный момент) или заменив маркер собственным изображением, например, логотипом вашей компании. Информационные окна или всплывающие окна могут предоставлять пользователям дополнительную информацию, такую как часы работы, номер телефона или даже фотографии. Вы также можете создавать пользовательские маркеры, которые могут быть растровыми, векторными, перетаскиваемыми и даже анимированными.
Ниже представлен пример карты с использованием пользовательских маркеров. (Исходный код см. в разделе «Пользовательские маркеры в JavaScript API карт» .)
Подробную информацию см. в документации по маркерам для JavaScript (веб) , Android и iOS .
Оформление вашей карты
Платформа Google Maps позволяет настраивать карту таким образом, чтобы помочь пользователям найти ближайшее место, добраться до него как можно быстрее и укрепить ваш бренд. Например, вы можете изменить цвета карты в соответствии с вашим фирменным стилем и уменьшить количество отвлекающих факторов на карте, контролируя видимые пользователям точки интереса. Платформа Google Maps также предоставляет ряд готовых шаблонов карт, некоторые из которых оптимизированы для различных отраслей, таких как туризм, логистика, недвижимость и розничная торговля.
Вы можете создавать или изменять стили карт на странице «Стили карт» в консоли Google Cloud в своем проекте.
Разверните, чтобы увидеть анимацию создания и оформления стилей карт в консоли Cloud:
Стили отраслевых карт
Эта анимация демонстрирует предопределенные отраслевые стили карт, которые вы можете использовать. Эти стили обеспечивают оптимальную отправную точку для каждого типа отрасли. Например, стиль карты «Розничная торговля» уменьшает количество точек интереса на карте, позволяя пользователям сосредоточиться на ваших местоположениях, а также на ориентирах, чтобы помочь им как можно быстрее и увереннее добраться до ближайшего места.
Контроль точек интереса
Эта анимация задает цвет маркеров для точек интереса и увеличивает плотность POI на карте. Чем выше плотность, тем больше маркеров POI отображается на карте.
Каждый стиль карты имеет свой собственный идентификатор. После публикации стиля в консоли Cloud вы ссылаетесь на этот идентификатор карты в своем коде — это означает, что вы можете обновлять стиль карты в режиме реального времени без рефакторинга приложения. Новый внешний вид автоматически появится в существующем приложении и будет использоваться на разных платформах. Следующие примеры показывают, как добавить идентификатор карты на веб-страницу с помощью JavaScript API карт.
By including one or more map_ids in the script URL, the Maps JavaScript API automatically makes those styles available for faster map rendering when you call those styles in your code.
<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>The following code displays a styled map on the web page. (Not shown is an HTML <div id="map"></div> element where the map will appear on the page.)
map = new google.maps.Map(document.getElementById('map'), { center: {lat: 51.485925, lng: -0.129500}, zoom: 12, mapId: '1234abcd5678efgh' });
Learn more about incorporating cloud-based maps styling in JavaScript (web) , Android , and iOS .
Gaining usage insights with analytics
Using analytics, you can gain valuable insights about how users are interacting with your locator. This section provides guidance on configuring and monitoring Google Analytics and Business Profile analytics to track the data you're most interested in. For Quick Builder Locator Plus users, an analytics dashboard helps you analyze and generate insights, giving you a picture of how well your site visitors are engaging with your store locator, based on anonymized data.
To access this report, go to the engagement reports section of the Cloud console . For more details about this report, see engagement reports .
Given the power and flexibility of Google Analytics, we won't attempt to provide comprehensive setup and usage information. Instead, we'll point you to key documentation for further reading and instructions while highlighting the key analytics considerations for your locator app.
Настройка Google Analytics
If you're already using Google Analytics with your app, you can skip this section.
Following is an example of a “Global Tag” you'd paste on your site to enable Google Analytics.
<!-- 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>
Whether you're using Google Tag Manager or adding Google Analytics directly to your site, the key is to understand how to use your Google Analytics implementation to do the following:
- Trigger user interactions, such as clicks, that can be measured independently of web site pageviews ( events ).
- View raw data ( metrics ) in meaningful groupings ( dimensions or custom dimensions ).
Using custom events
Following is an example of defining a custom event in your locator:
gtag('event', 'location', { 'method': 'address' });
It's important to name your event and method clearly enough that you can understand events in reporting. Trigger them for the specific interactions you want to measure, such as when a user selects and address from the Autocomplete drop-down list, shown in the following figure.
You can send the following tracking call to Google Analytics that uses the event and method you defined. (We'll show each query parameter on a separate line for ease of reading.)
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
The following figure shows how that Google Analytics call appears in the browser's Inspect view, on the Network tab. (Click to enlarge).
You can verify that your custom event tags are properly being captured by viewing the "Real-time" view in Google Analytics. For example, the "location" event set up previously for Place Autocomplete appears in Google Analytics as shown in the following figures.
Alternatively, you could monitor real-time events using the DebugView, as shown in the following figure. Note that you have to wait 24 hours before accessing a full Events report in the Engagement > Events section of Google Analytics.
You can also develop and measure strategies to drive more foot traffic to your physical locations from your locator app. For example, Google Analytics has a Store Visits in Analytics offering that links physical store visits analytics (measured by Google Ads) to your locator analytics. You can also develop your own app-to-location strategies, such as online offers redeemable at your physical locations.
Business Profile metrics
In addition to tracking the events, metrics, and dimensions you're interested in with Google Analytics, Business Profile also has its own metrics . For example, if you add appointment booking and local offer links to your locator, you can get metrics on those views and clicks.
The following sample request to the Business Profile APIs asks for multiple types of metrics. For tracking offer clicks, the LOCAL_POST_VIEWS_SEARCH and LOCAL_POST_ACTIONS_CALL_TO_ACTION metrics would be the most relevant.
Expand to see the sample request.
POST https://mybusiness.googleapis.com/v4/accounts/111098884960528804666/locations:reportInsights
Body:
{
"locationNames": [
"accounts/111098884960528804666/locations/15899957830169237700"
],
"basicRequest": {
"metricRequests": [
{
"metric": "QUERIES_DIRECT"
},
{
"metric": "QUERIES_INDIRECT"
},
{
"metric": "VIEWS_MAPS"
},
{
"metric": "VIEWS_SEARCH"
},
{
"metric": "ACTIONS_DRIVING_DIRECTIONS"
},
{
"metric": "LOCAL_POST_VIEWS_SEARCH"
},
{
"metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION"
}
],
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
}
}Expand to see the sample response.
{
"locationMetrics": [
{
"locationName": "accounts/111098884960528804666/locations/15899957830169237700",
"timeZone": "Asia/Singapore",
"metricValues": [
{
"metric": "QUERIES_DIRECT",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "82"
}
},
{
"metric": "QUERIES_INDIRECT",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "1493"
}
},
{
"metric": "VIEWS_MAPS",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "1571"
}
},
{
"metric": "VIEWS_SEARCH",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "631"
}
},
{
"metric": "ACTIONS_DRIVING_DIRECTIONS",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "3"
}
},
{
"metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "42"
}
},
{
"metric": "LOCAL_POST_VIEWS_SEARCH",
"totalValue": {
"metricOption": "AGGREGATED_TOTAL",
"timeDimension": {
"timeRange": {
"startTime": "2021-01-01T01:01:23.045123456Z",
"endTime": "2021-04-30T23:59:59.045123456Z"
}
},
"value": "11"
}
}
]
}
]
}
The response contains the metrics, most notably:
- 1571 views of the location on Google Maps
- 631 location views on Google Search.
- 3 requests for Driving Directions to the location.
- 42
LOCAL_POST_ACTIONS_CALL_TO_ACTIONoffer clicks. - 11 views of Local Posts on Google Search.
Another metrics option involves using Reserve with Google to create action links. When users click action links created in Reserve with Google, you can log those actions to Google Analytics, which lets you track conversions in Google Analytics. See the conversion tracking documentation for more information.
Regardless of the metrics strategy you use, measurement is more than seeing how you're doing against your KPIs. The numbers also help you understand the impact these locator improvements have on your business. Additionally, you can compare the metrics from Google Analytics on your locator with the Business Profile metrics. For instance, by comparing these metrics, you can see how many customers are getting directions from your locator and Google Maps to then visit your physical locations.
Enhancing Locator Plus
Depending on your business' or users' needs, you can further enhance the user's experience.
Sending directions to mobile
To make it even easier for users to reach a location, you can text or email them a directions link. When they click it, the Google Maps app will launch on their phone if it is installed, or maps.google.com will load in their device's web browser. Both of these experiences provide the user with the option to use turn-by-turn navigation, including voice guidance, to reach the destination.
Use Maps URLs to compose a directions URL like the following, with the URL-encoded place name as the destination parameter and place ID as the destination_place_id parameter. There is no cost to compose or use Maps URLs, so you don't need to include an API key in the URL.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
You can optionally provide an origin query parameter using the same address format as the destination. But by omitting it, the directions start from the user's current location, which may be different from where they were using your Locator Plus app. Maps URLs provide additional query parameter options, such as travelmode and dir_action=navigate to launch the directions with navigation turned on.
This clickable link , which extends the example URL above, sets the origin as a London football stadium and uses travelmode=transit to provide public transit directions to the destination.
To send a text or email containing this URL, we currently recommend using a third-party application such as twilio . If you're using App Engine, you can use third-party companies to send SMS messages or email. For more information, see Sending Messages with Third-Party Services .
Showing Street View to help users visualize locations
For many locations in the world, Street View can be used to display the outside of a location, offering users a visual of the location before they arrive. You can provide Street View in either an interactive (web) or static (API) form, depending on whether you want your users to "look around" the area in 360 degrees. Street Viewis also available for Android and iOS .
Determining user location with Geolocation
In most cases, you can pinpoint user location using the location services built into their devices or browsers. We provide an example of using a browser's HTML5 Geolocation feature to display the geographic location of a user or device on a Google map, and there's documentation on requesting permissions and obtaining location in Android and iOS . However, there may be situations where you want an alternative location finder; for example, if device location services are disabled or you have concerns about device location being spoofed.
The Geolocation API is a server-side API that returns a location and accuracy radius based on information about cell towers and Wi-Fi nodes that the client can detect. You can use Geolocation as a backup mechanism for determining user location, or you can use it to cross-check the location reported by the device.
Combining custom location data with Place Details
In the previous Providing Place Details section, we covered using Place Details to give users a rich level of information about your locations, such as opening hours, photos, and reviews.
It's helpful to understand the cost of different data fields in Place Details, which are categorized as Basic, Contact, and Atmosphere Data. To manage your costs, one strategy is to combine the information you already have about your locations with the fresh information (usually Basic and Contact Data) from Google Maps such as temporary closure, holiday hours, and user ratings, photos, and reviews. If you already have the contact information for your locations, you won't need to request those fields from Place Details and can constrain your request to fetch only Basic or Atmosphere Data fields depending on what you want to display.
You may have your own place data to supplement or use instead of Place Details. The codelab for the full-stack locator provides an example of using GeoJSON with a database to store and retrieve your own location details.