Обзор
Платформа Google Maps доступна для веб-приложений (JS, TS), Android и iOS, а также предлагает API веб-сервисов для получения информации о местах, маршрутах и расстояниях. Примеры в этом руководстве написаны для одной платформы, но для реализации на других платформах предоставлены ссылки на документацию.
Когда пользователи видят ваши товары в интернете, они хотят найти наилучший и наиболее удобный способ получить свой заказ. Руководство по внедрению и советы по настройке функции поиска товаров — это то, что Google рекомендует как оптимальное сочетание API платформы Google Maps для создания превосходного пользовательского опыта в области поиска товаров.
Следуя этому руководству по внедрению, вы сможете помочь покупателям увидеть подробную информацию, необходимую для поиска ваших товаров, и указать им маршрут до магазина, где есть нужный им товар, независимо от того, едут ли они на машине, велосипеде, пешком или на общественном транспорте.
Включить API
Для внедрения функции Product Locator необходимо включить следующие API в консоли Google Cloud. Следующие гиперссылки ведут в консоль Google Cloud для включения каждого API для выбранного вами проекта:
Для получения дополнительной информации о настройке см. раздел «Начало работы с платформой Google Maps» .
Разделы руководства по внедрению
В данном документе рассматриваются следующие варианты реализации и настройки:
- Значок галочки является ключевым этапом реализации.
- Значок звезды — это необязательная, но рекомендуемая настройка для улучшения решения.
| Свяжите местоположения магазинов с местами на платформе Google Maps. | Сопоставьте местоположение магазина с точкой на платформе Google Maps. | |
| Определите местоположение пользователя | Добавьте функцию ввода текста по мере необходимости, чтобы улучшить пользовательский опыт на всех платформах и повысить точность адресов при минимальном количестве нажатий клавиш. | |
| Определите ближайшие магазины | Рассчитайте расстояние и время в пути для нескольких пунктов отправления и назначения, при необходимости указав различные виды транспорта, такие как пешая прогулка, поездка на автомобиле, общественный транспорт или велосипед. | |
| Показать информацию о магазине | Отображайте в своих магазинах информативные данные, чтобы пользователям было проще находить нужную информацию. | |
| Предоставьте навигационные указания. | Получите данные о маршруте от пункта отправления до пункта назначения, используя различные виды транспорта, такие как пешая прогулка, автомобиль, велосипед и общественный транспорт. | |
| Отправить маршрут на мобильный телефон | Помимо отображения маршрута на вашей веб-странице, вы также можете отправлять маршрут на телефон пользователя для навигации с помощью Google Maps в пути. | |
| Отобразите свои местоположения на интерактивной карте. | Создавайте пользовательские маркеры на карте, чтобы выделить ваши местоположения, и оформляйте карту в соответствии с фирменными цветами. Отображайте (или скрывайте) определенные точки интереса (POI) на карте, чтобы помочь пользователям лучше ориентироваться, и регулируйте плотность POI, чтобы избежать загромождения карты. | |
| Объедините пользовательские данные о местоположении с подробными сведениями о месте. | Сочетайте собственные данные о местоположении с подробными сведениями о месте, чтобы предоставить пользователям обширный набор данных для принятия решений. |
Свяжите местоположения магазинов с местами на платформе Google Maps.
Получить идентификаторы мест
| В этом примере используется API Places (новый). | Также доступен: JavaScript |
У вас может быть база данных ваших магазинов с основной информацией, такой как название местоположения, адрес и номер телефона, и вы хотите связать её с местом в Google Maps Platform в качестве набора конечных пунктов назначения, где ваши пользователи могут забрать товары. Чтобы получить информацию о месте, имеющуюся в Google Maps Platform, включая географические координаты и информацию, предоставленную пользователями, найдите идентификатор места , соответствующий каждому из магазинов в вашей базе данных. Вы можете обратиться к конечной точке текстового поиска (новая) в Places API (новая) и запросить только поле places.id в маске поля (что активирует SKU «Только основные идентификаторы текстового поиска» ).
Ниже приведён пример запроса идентификатора местоположения лондонского офиса 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'Вы можете сохранить этот идентификатор места в своей базе данных вместе с остальными данными о магазине и использовать его как эффективный способ запроса информации о магазине. Ниже приведены инструкции по использованию идентификатора места для геокодирования, получения подробной информации о месте и запроса маршрута до него.
Присвойте своим местоположениям географические координаты.
| В этом примере используется API геокодирования . | Также доступен: JavaScript |
Если в вашей базе данных магазинов есть адреса улиц, но нет географических координат, используйте API геокодирования, чтобы получить широту и долготу этого адреса для расчета ближайших к вашему клиенту магазинов. Вы можете выполнить геокодирование магазина на стороне сервера, сохранить широту и долготу в своей базе данных и обновлять ее не реже чем каждые 30 дней .
Вот пример использования API геокодирования для получения широты и долготы идентификатора места, возвращенного для лондонского офиса Google:
```html
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a
```
Определите местоположение пользователя
| В этом примере используется: функция автозаполнения в JavaScript API карт. | Также доступно: Android | iOS |
Ключевым компонентом Product Locator является определение начального местоположения пользователя. Вы можете предложить пользователю два варианта указания начального местоположения: ввести адрес отправной точки поиска или предоставить разрешения службам геолокации веб-браузера или мобильного устройства.
Обработка введенных данных с помощью автозаполнения
Сегодня пользователи привыкли к функции автозаполнения в потребительской версии Google Maps. Эту функцию можно интегрировать в любое приложение, использующее библиотеки Google Maps Platform Places на мобильных устройствах и в веб-версии. Когда пользователь вводит адрес, функция автозаполнения заполняет оставшуюся часть текста с помощью виджетов. Вы также можете предоставить собственную функцию автозаполнения, используя непосредственно API данных автозаполнения мест .
В следующем примере добавьте библиотеки «Места» и «Маркеры» на свой сайт, добавив параметр libraries=places,marker к URL-адресу скрипта JavaScript API карт.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,marker&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a" defer></script> Далее добавьте на страницу элемент-контейнер, куда будет добавлен виджет PlaceAutocompleteElement :
<div id="autocomplete-container"></div> Наконец, инициализируйте виджет PlaceAutocompleteElement и добавьте его в контейнер. Ограничение прогнозов автозаполнения мест с помощью includedPrimaryTypes: ["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, // fetch the place details and search for the nearest stores. placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => { const place = placePrediction.toPlace(); await place.fetchFields({ fields: ["id", "location", "formattedAddress"], }); searchFromOrigin(place); }); }
В этом примере, как только пользователь выбирает адрес, запускается функция searchFromOrigin() . Она принимает местоположение найденного результата, то есть местоположение пользователя, а затем ищет ближайшие местоположения, используя эти координаты в качестве начальной точки, как описано в разделе «Определение ближайших магазинов» .
Разверните этот раздел, чтобы посмотреть видеоинструкции по добавлению функции автозаполнения мест в ваше приложение:
Веб-сайт
Приложения для Android
приложения для iOS
Используйте геолокацию браузера
Чтобы запросить и обработать геолокацию в HTML5-браузере, см. инструкцию по включению окна «Использовать мое местоположение» :
Определите ближайшие магазины
| В этом примере используются: библиотека маршрутов и JavaScript API для работы с картами. | Также доступен API маршрутов . |
Получив местоположение пользователя, вы можете сравнить его с местоположением ваших магазинов. Использование класса RouteMatrix из библиотеки Routes, API JavaScript Maps (или функции Compute Route Matrix в API Routes) поможет пользователям выбрать наиболее удобное для них местоположение, исходя из времени в пути или расстояния по дороге.
Стандартный способ организации списка местоположений — сортировка по расстоянию. Часто это расстояние рассчитывается просто по прямой линии от пользователя до местоположения, но это может ввести в заблуждение. Прямая линия может проходить через непроходимую реку или через оживленные дороги в то время, когда другое место может быть более удобным. Это важно, когда у вас есть несколько местоположений, расположенных в нескольких километрах друг от друга.
Метод RouteMatrix.computeRouteMatrix принимает список начальных и конечных точек и возвращает не только расстояние, но и время в пути между ними. В случае пользователя начальной точкой будет его текущее местоположение или желаемая отправная точка, а конечными точками — адреса этих точек. Начальные и конечные точки могут быть указаны в виде пар координат, идентификаторов мест или адресов. Вы можете использовать RouteMatrix.computeRouteMatrix с настройками маршрутизации, такими как TRAFFIC_AWARE чтобы отображать результаты на основе текущего или будущего времени в пути.
В следующем примере вызывается метод RouteMatrix.computeRouteMatrix из библиотеки Routes, Maps JavaScript API, с указанием начальной точки пользователя и до 25 местоположений магазинов одновременно.
async function getDistances(originLocation) { const { RouteMatrix } = await google.maps.importLibrary("routes"); const request = { origins: [originLocation], destinations: stores.slice(0, 25).map((store) => store.location), travelMode: google.maps.TravelMode.DRIVING, routingPreference: "TRAFFIC_AWARE", fields: ["distanceMeters", "durationMillis", "condition"], }; return RouteMatrix.computeRouteMatrix(request); } function update(location) { if (!location) { return; } // ... // sort by spherical distance stores.sort((a, b) => { return ( google.maps.geometry.spherical.computeDistanceBetween( new google.maps.LatLng(a.location), location ) - google.maps.geometry.spherical.computeDistanceBetween( new google.maps.LatLng(b.location), location ) ); }); // display travel distance and time getDistances(location) .then(({ matrix }) => { const items = matrix.rows[0].items; for (let i = 0; i < items.length; i++) { if (items[i].condition === "ROUTE_EXISTS") { stores[i].travelDistance = items[i].distanceMeters; stores[i].travelDuration = items[i].durationMillis; } } }) .finally(() => { renderCards(stores); autocompleteInput.disabled = false; isUpdateInProgress = false; }); }
Для каждого ближайшего магазина вы можете отобразить информацию о наличии товара на складе на основе вашей базы данных складских запасов.
Показать информацию о магазине
| В этом примере используются: библиотека Places, JavaScript API для работы с картами. | Также доступны: Places SDK для Android | Places SDK для iOS | Places API (новый) |
Вы можете поделиться подробной информацией о месте, такой как контактные данные, часы работы и текущий статус открытия, чтобы помочь клиентам выбрать предпочтительное местоположение или завершить заказ.
После вызова JavaScript API Maps для получения сведений о месте , вы можете отфильтровать и отобразить полученный ответ.
Для запроса подробной информации о местоположении вам потребуется идентификатор каждого из ваших местоположений. См. раздел «Получение идентификаторов местоположений» , чтобы получить идентификатор вашего местоположения.
Следующий запрос Place Details использует класс Place для возврата названия, координат, веб-сайта, номера телефона, рейтинга и часов работы для идентификатора места в Лондоне, указанного в Google:
const place = new google.maps.places.Place({ id: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU', });await place.fetchFields({ fields: [ 'displayName', 'nationalPhoneNumber', 'location', 'regularOpeningHours', 'rating', 'utcOffsetMinutes', 'websiteURI', ], });
createMarker(place);
Улучшенный поиск товаров
В зависимости от особенностей вашего бизнеса или потребностей пользователей, вы можете дополнительно улучшить пользовательский опыт.
Предоставьте навигационные указания.
| В этом примере используются: библиотека маршрутов и JavaScript API для работы с картами. | Также доступен веб-сервис Routes API для использования на Android и iOS, как непосредственно из приложения, так и удаленно через серверный прокси. |
Когда вы показываете пользователям маршруты прямо с вашего сайта или из приложений, им не нужно покидать ваш сайт и отвлекаться на другие страницы или видеть конкурентов на карте. С помощью API маршрутов вы также можете запрашивать экологичные маршруты для оценки расхода топлива или энергии и отображения воздействия поездки на окружающую среду.
Класс Route из библиотеки Routes, Maps JavaScript API, также имеет методы, такие как createPolylines() и createWaypointAdvancedMarkers() , которые позволяют обрабатывать результаты и отображать их на карте.
Ниже приведён пример запроса и отображения маршрута на карте. Для получения более подробной информации о примере см. раздел «Получение маршрута» .
Отправить маршрут на мобильный телефон
Чтобы пользователям было еще проще добраться до нужного места, вы можете отправить им ссылку на маршрут по SMS или электронной почте. При нажатии на нее запустится приложение Google Maps на их телефоне (если оно установлено) или откроется веб-браузер maps.google.com. Оба варианта предоставляют пользователю возможность использовать пошаговую навигацию, включая голосовые подсказки, для достижения пункта назначения.
Используйте URL-адреса карт , чтобы составить URL-адрес маршрута, подобный следующему, где в качестве параметра destination используется закодированное в URL-адресе название места, а в качестве параметра destination_place_id — идентификатор места. Создание и использование URL-адресов карт бесплатно, поэтому вам не нужно включать ключ API в URL-адрес.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
При желании можно указать параметр запроса origin , используя тот же формат адреса, что и пункт назначения. Однако, если его не указать, маршрут начнётся с текущего местоположения пользователя, которое может отличаться от того, где он находился при использовании вашего приложения «Поиск товаров». URL-адреса карт предоставляют дополнительные параметры запроса, такие как travelmode и dir_action=navigate позволяющие запустить маршрут с включенной навигацией.
Эта кликабельная ссылка , расширяющая приведенный выше пример URL-адреса, устанавливает в качестве origin лондонский футбольный стадион и использует travelmode=transit для предоставления маршрута общественного транспорта до места назначения.
Для отправки текстового сообщения или электронного письма, содержащего этот URL-адрес, в настоящее время мы рекомендуем использовать стороннее приложение, например, Twilio . Если вы используете App Engine, вы можете использовать сторонние компании для отправки SMS-сообщений или электронных писем. Для получения дополнительной информации см. раздел «Отправка сообщений с помощью сторонних сервисов» .
Отобразите свои местоположения на интерактивной карте.
Используйте динамические карты
| В этом примере используется: API JavaScript для работы с картами. | Также доступно: Android | iOS |
Функция поиска местоположения является важной частью пользовательского опыта. Однако на некоторых сайтах может отсутствовать даже простая карта, что вынуждает пользователей покидать сайт или приложение, чтобы найти ближайшее местоположение. Это означает неоптимальный пользовательский опыт, поскольку пользователям приходится перемещаться между страницами, чтобы получить необходимую информацию. Вместо этого вы можете улучшить этот опыт, встраивая и настраивая карты в свои приложения.
Добавить на страницу динамическую карту — то есть карту, по которой пользователи могут перемещаться, увеличивать и уменьшать масштаб, а также получать подробную информацию о различных местах и достопримечательностях — можно всего несколькими строками кода.
Во-первых, вам необходимо подключить 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_productlocator_v1_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 }, mapId: "DEMO_MAP_ID", zoomControl: false }); }
Для локатора обычно требуется задать начальное местоположение, центральную точку или границы, а также уровень масштабирования (насколько карта приближена к этому месту). Большинство других элементов, таких как настройка элементов управления, являются необязательными, поскольку вы определяете уровень взаимодействия с картой.
Настройте свою карту
Вы можете изменить внешний вид и детализацию карты несколькими способами. Например, вы можете:
- Создайте собственные пользовательские маркеры, чтобы заменить стандартные метки на карте.
- Измените цвета элементов карты в соответствии с фирменными цветами вашего бренда.
- Настройте отображение объектов интереса (достопримечательностей, ресторанов, мест размещения и т. д.) и плотность их размещения, позволяя сосредоточить внимание пользователей на ваших локациях и одновременно выделять ориентиры, которые помогут пользователям добраться до ближайшего места.
Создание пользовательских маркеров на карте
Вы можете настроить расширенные маркеры , изменив цвет фона, границы или глифа по умолчанию (например, чтобы указать, открыто ли в данный момент заведение), заменив маркер пользовательским графическим изображением , таким как логотип вашей компании, или создав собственные маркеры на основе HTML и CSS . Информационные окна или всплывающие окна могут предоставлять пользователям дополнительную информацию, такую как часы работы, номер телефона или фотографии.
Ниже представлен пример карты, использующей пользовательские графические маркеры. (Исходный код см. в разделе «Пользовательские графические маркеры в JavaScript API карт» .)
Подробную информацию см. в документации по расширенным маркерам для JavaScript (веб) , Android и iOS .
Оформите свою карту
Платформа Google Maps позволяет настраивать карту таким образом, чтобы помочь пользователям найти ближайшее место, добраться до него как можно быстрее и укрепить ваш бренд. Например, вы можете изменить цвета карты в соответствии с вашим фирменным стилем и уменьшить количество отвлекающих факторов на карте, контролируя видимые пользователям точки интереса. Платформа Google Maps также предоставляет ряд готовых шаблонов карт, некоторые из которых оптимизированы для различных отраслей, таких как туризм, логистика, недвижимость и розничная торговля.
Вы можете создавать или изменять стили карт на странице «Стили карт» в консоли Google Cloud в своем проекте.
Разверните, чтобы увидеть анимацию создания и оформления стилей карт в консоли Cloud:
Стили отраслевых карт
Эта анимация демонстрирует предопределенные отраслевые стили карт, которые вы можете использовать. Эти стили обеспечивают оптимальную отправную точку для каждого типа отрасли. Например, стиль карты «Розничная торговля» уменьшает количество точек интереса на карте, позволяя пользователям сосредоточиться на ваших местоположениях, а также на ориентирах, чтобы помочь им как можно быстрее и увереннее добраться до ближайшего места.
Контроль точек интереса
Эта анимация задает цвет маркеров для точек интереса и увеличивает плотность POI на карте. Чем выше плотность, тем больше маркеров POI отображается на карте.
Каждый стиль карты имеет свой собственный идентификатор. После публикации стиля в консоли Cloud вы ссылаетесь на этот идентификатор карты в своем коде — это означает, что вы можете обновлять стиль карты в режиме реального времени без рефакторинга приложения. Новый внешний вид автоматически появится в существующем приложении и будет использоваться на разных платформах. Следующие примеры показывают, как добавить идентификатор карты на веб-страницу с помощью JavaScript API карт.
Указав один или несколько map_ids в URL скрипта, API JavaScript для карт автоматически предоставляет доступ к этим стилям для более быстрой отрисовки карты при вызове этих стилей в вашем коде.
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a">
</script>Приведённый ниже код отображает стилизованную карту на веб-странице. (Не показан HTML-элемент <div id="map"></div> , в котором будет отображаться карта на странице.)
map = new google.maps.Map(document.getElementById('map'), { center: {lat: 51.485925, lng: -0.129500}, zoom: 12, mapId: '1234abcd5678efgh' });
Узнайте больше о том, как интегрировать стилизацию карт на основе облачных технологий в JavaScript (веб) , Android и iOS .
Объедините пользовательские данные о местоположении с подробными сведениями о месте.
В предыдущем разделе «Показ ваших местоположений на интерактивной карте» описывалось использование функции «Подробная информация о месте», позволяющей предоставить пользователям исчерпывающий список сведений о ваших заведениях, таких как часы работы, фотографии и отзывы.
Полезно понимать ценообразование и уровни SKU различных полей данных в Places API (новое). Для управления затратами можно использовать стратегию объединения уже имеющейся информации о ваших местоположениях с актуальной информацией из Google Maps, такой как временное закрытие, часы работы в праздничные дни, пользовательские рейтинги, фотографии и отзывы. Если у вас уже есть контактная информация о ваших магазинах, вам не нужно будет запрашивать эти поля из Place Details, и вы можете ограничить маску полей, чтобы получать только те поля, которые хотите отобразить.
У вас могут быть собственные данные о местоположении, которые можно дополнить или использовать вместо сведений о местоположении. В практическом руководстве по созданию полнофункционального локатора приведен пример использования GeoJSON с базой данных для хранения и извлечения собственных данных о местоположении.