Обзор
Платформа Google Maps доступна для веб-сайтов (JS, TS), Android и iOS, а также предлагает API веб-сервисов для получения информации о местах, направлениях и расстояниях. Примеры в этом руководстве написаны для одной платформы, но ссылки на документацию предоставляются для реализации на других платформах.
Когда ваши пользователи видят ваши продукты онлайн, они хотят найти лучший и самый удобный способ получить свой заказ. Руководство по внедрению Product Locator и советы по настройке — это то, что Google рекомендует как оптимальную комбинацию API платформы Google Карт для создания отличного пользовательского опыта локатора продуктов.
Следуя этому руководству по внедрению, вы сможете помочь клиентам увидеть подробную информацию, необходимую для поиска ваших товаров, и указать им маршрут до магазина, в котором продается нужный им товар, независимо от того, едут ли они на машине, велосипеде, пешком или на общественном транспорте.
Включить API
Для внедрения Product Locator необходимо включить следующие API в консоли Google Cloud. Следующие гиперссылки перенаправляют вас в консоль Google Cloud для включения каждого API для выбранного вами проекта:
- API JavaScript Карт
- API мест
- API геокодирования
- API матрицы расстояний (устаревший)
- API маршрутов (устаревший)
Дополнительную информацию о настройке см. в разделе Начало работы с платформой Google Карт .
Разделы руководства по внедрению
Здесь рассматриваются следующие реализации и настройки:
- Значок галочки — это основной шаг реализации.
- Значок звездочки является необязательной, но рекомендуемой настройкой для улучшения решения.
| Свяжите местоположения магазинов с местами на платформе Google Maps | Сопоставьте местоположение магазина с местом на платформе Google Maps. | |
| Определить местоположение пользователя | Добавьте функцию ввода по мере ввода, чтобы улучшить пользовательский интерфейс на всех платформах и повысить точность адресов с минимальным количеством нажатий клавиш. | |
| Определите ближайшие магазины | Рассчитайте расстояние и время в пути для нескольких пунктов отправления и назначения, при желании указав различные виды транспорта, такие как ходьба, поездка на автомобиле, общественный транспорт или езда на велосипеде. | |
| Отображение информации о магазине | Демонстрируйте подробную информацию о своих магазинах, чтобы пользователям было проще к ним переходить. | |
| Предоставьте навигационные указания | Получайте данные о маршрутах от пункта отправления до пункта назначения с использованием различных видов транспорта, таких как ходьба, автомобиль, велосипед и общественный транспорт. | |
| Отправить указания на мобильный телефон | Помимо отображения маршрутов на вашей веб-странице, вы также можете отправлять маршруты на телефон пользователя для навигации с использованием Google Maps на ходу. | |
| Покажите свое местоположение на интерактивной карте | Создавайте собственные маркеры карты, чтобы выделить ваши местоположения, и оформляйте карту в соответствии с цветами вашего бренда. Отображайте (или скрывайте) определенные точки интереса (POI) на карте, чтобы помочь пользователям лучше ориентироваться, и контролируйте плотность POI, чтобы не загромождать карту. | |
| Объедините пользовательские данные о местоположении с подробностями места | Объедините собственные данные о местоположении с данными о месте, чтобы предоставить пользователям обширный набор данных для принятия решений. |
Свяжите местоположения магазинов с местами на платформе Google Maps
Получить идентификаторы мест
| В этом примере используется: API Places | Также доступно: JavaScript |
У вас может быть база данных ваших магазинов с базовой информацией, такой как название этого местоположения, его адрес и его номер телефона, и вы хотите связать его с местом в Google Maps Platform как набор конечных пунктов назначения, где ваши пользователи могут забрать продукты. Чтобы получить информацию, которая есть в Google Maps Platform об этом месте, включая географические координаты и информацию, предоставленную пользователями, найдите идентификатор места , который соответствует каждому из магазинов в вашей базе данных. Вы можете сделать вызов конечной точки Find Place в Place Search API Places и запросить только поле place_id .
Ниже показан пример запроса идентификатора места для лондонского офиса Google:
https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=google%20london&inputtype=textquery&fields=place_id&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a
Вы можете сохранить этот идентификатор места в своей базе данных вместе с остальными данными вашего магазина и использовать его как эффективный способ запроса информации о магазине. Ниже приведены инструкции по использованию идентификатора места для геокодирования, получения сведений о месте и запроса маршрутов к месту.
Геокодируйте ваши местоположения
| В этом примере используется: 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
```
Определить местоположение пользователя
| В этом примере используется: библиотека автозаполнения мест в API JavaScript Карт | Также доступно: Android | iOS |
Ключевым компонентом Product Locator является определение начального местоположения пользователя. Вы можете предложить пользователю два варианта указания начального местоположения: ввод источника поиска или предоставление разрешений на геолокацию веб-браузера или мобильные службы определения местоположения.
Обработка введенных данных с помощью автозаполнения
Сегодняшние пользователи привыкли к функции автозаполнения с опережением ввода в потребительской версии Google Maps. Эту функцию можно интегрировать в любое приложение с помощью библиотек Google Maps Platform Places на мобильных устройствах и в Интернете. Когда пользователь вводит адрес, автозаполнение заполняет остальное с помощью виджетов. Вы также можете предоставить собственную функцию автозаполнения, используя библиотеки Places напрямую.
В следующем примере добавьте библиотеку автозаполнения мест на свой сайт, добавив параметр libraries=places в URL-адрес скрипта Maps JavaScript API.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a" defer></script>Затем добавьте на страницу текстовое поле для ввода данных пользователем:
<input id="autocomplete" placeholder="Enter
starting address, city, or zip code" type="text"></input> Наконец, вам нужно инициализировать службу автозаполнения и связать ее с именованным текстовым полем. Ограничение прогнозов автозаполнения мест типами геокодирования настраивает ваше поле ввода для приема уличных адресов, районов, городов и почтовых индексов, чтобы пользователи могли вводить любой уровень специфичности для описания своего происхождения. Обязательно запросите поле geometry , чтобы ответ содержал широту и долготу исходного положения пользователя. Вы будете использовать эти координаты карты для указания связи ваших местоположений с исходным положением.
// Create the autocomplete object, restricting the search predictions to // geographical location types. const autocomplete = new google.maps.places.Autocomplete( document.getElementById("autocomplete"), { types: ["geocode"], componentRestrictions: {'country': ['gb']}, fields: ['place_id', 'geometry', 'formatted_address'] } ); // When the user selects an address from the drop-down // zoom to the select location and add a marker. autocomplete.addListener("place_changed", searchFromOrigin); }
В этом примере, как только пользователь выбирает адрес, запускается функция searchFromOrigin() . Она берет геометрию сопоставленного результата, которая является местоположением пользователя, а затем ищет ближайшие местоположения на основе этих координат в качестве исходной точки, обсуждаемой в разделе Определение ближайших магазинов .
Разверните этот раздел, чтобы увидеть видеоинструкции по добавлению Place Autocomplete в ваше приложение:
Веб-сайт
Android-приложения
iOS-приложения
Использовать геолокацию браузера
Чтобы запросить и обработать геолокацию браузера HTML5, узнайте, как включить окно «Использовать мое местоположение» :
Определите ближайшие магазины
| В этом примере используется: Distance Matrix Service, Maps JavaScript API (устаревший) | Также доступно: API матрицы расстояний (устаревшая версия) |
Как только вы получите местоположение пользователя, вы можете сравнить его с тем, где находятся ваши магазины. Делая это с помощью Distance Matrix Service, Maps JavaScript API (Legacy) помогает вашим пользователям выбирать наиболее удобное для них местоположение по времени в пути или расстоянию по дороге.
Стандартный способ организации списка местоположений — сортировка их по расстоянию. Часто это расстояние вычисляется просто с помощью прямой линии от пользователя до местоположения, но это может ввести в заблуждение. Прямая линия может проходить через непроходимую реку или через оживленные дороги в то время, когда другое местоположение может быть более удобным. Это важно, когда у вас есть несколько местоположений в пределах нескольких километров друг от друга.
Служба Distance Matrix Service, Maps JavaScript API (Legacy) работает, беря список исходных и конечных местоположений и возвращая не только расстояние поездки, но и время между ними. В случае пользователя исходной точкой будет то место, где он находится в данный момент, или желаемая им отправная точка, а конечными пунктами будут те, где находятся эти местоположения. Исходные и конечные пункты могут быть указаны как пары координат или как адреса; когда вы вызываете службу, служба сопоставляет адреса. Вы можете использовать Distance Matrix Service, Maps JavaScript API (Legacy) с дополнительными параметрами для отображения результатов на основе текущего или будущего времени в пути.
В следующем примере вызывается служба Distance Matrix Service, Maps JavaScript API (устаревшая версия), указывающая исходное местоположение пользователя и 25 местоположений магазинов одновременно.
function getDistances(place) { let distanceMatrixService = new google.maps.DistanceMatrixService(); const origins = [place]; return new Promise((resolve, reject) => { const callback = (response, status) => { if (status === google.maps.DistanceMatrixStatus.OK && response) { resolve(response); } else { reject(status); } }; distanceMatrixService.getDistanceMatrix( { origins, destinations: stores.slice(0, 25).map((store) => store.location), travelMode: google.maps.TravelMode.DRIVING, unitSystem: google.maps.UnitSystem.IMPERIAL, }, callback ); }); } function update(location) { if (!location) { return; } // ... // sort by spherical distance stores.sort((a, b) => { return ( google.maps.geometry.spherical.computeDistanceBetween( new google.maps.LatLng(a.location), location ) - google.maps.geometry.spherical.computeDistanceBetween( new google.maps.LatLng(b.location), location ) ); }); // display travel distance and time getDistances(location) .then((response) => { for (let i = 0; i < response.rows[0].elements.length; i++) { stores[i].address = response.destinationAddresses[i]; stores[i].travelDistance = response.rows[0].elements[i].distance.value; stores[i].travelDistanceText = response.rows[0].elements[i].distance.text; stores[i].travelDuration = response.rows[0].elements[i].duration.value; stores[i].travelDurationText = response.rows[0].elements[i].duration.text; } }) .finally(() => { renderCards(stores); autocompleteInput.disabled = false; isUpdateInProgress = false; }); }
Для каждого ближайшего местоположения вы можете отобразить состояние запасов товара на основе вашей базы данных инвентаря.
Отображение информации о магазине
| В этом примере используются: библиотека Places, API JavaScript Карт | Также доступно: Places SDK для Android | Places SDK для iOS | Places API |
Вы можете поделиться подробной информацией о месте, например контактной информацией, часами работы и текущим статусом открытия, чтобы помочь клиентам выбрать предпочтительное место или завершить оформление заказа.
После вызова Maps JavaScript API для получения сведений о месте вы можете отфильтровать и отобразить ответ.
Чтобы запросить Place Details, вам понадобится ID места каждого из ваших местоположений. См. Get place IDs , чтобы получить ID места вашего местоположения.
Следующий запрос Place Details возвращает адрес, координаты, веб-сайт, номер телефона, рейтинг и часы работы для идентификатора места Google London:
var request = { placeId: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU', fields: ['name', 'formatted_phone_number', 'geometry', 'opening_hours', 'rating', 'utc_offset_minutes', 'website'] };service = new google.maps.places.PlacesService(map); service.getDetails(request, callback);
function callback(place, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { createMarker(place); } }
Улучшенный локатор продуктов
В зависимости от потребностей вашего бизнеса или пользователей вы можете дополнительно улучшить пользовательский опыт.
Предоставьте навигационные указания
| В этом примере используется: Maps JavaScript API Directions Service | Также доступно: веб-сервис Directions API (Legacy) для использования на Android и iOS, как напрямую из приложения, так и удаленно через прокси-сервер. |
Когда вы показываете пользователям направления с вашего сайта или приложений, вашим пользователям не нужно покидать ваш сайт и отвлекаться на другие страницы или видеть конкурентов на карте. Вы даже можете показать выбросы углерода определенного вида транспорта и показать влияние любой конкретной поездки, используя набор данных об углекислом газе, которым вы можете владеть.
Служба маршрутов также имеет функции, позволяющие обрабатывать результаты и легко отображать их на карте.
Ниже приведен пример отображения панели направлений. Для получения дополнительной информации о примере см. Отображение текстовых направлений .
Отправить указания на мобильный телефон
Чтобы сделать для пользователей еще более простым путь к месту назначения, вы можете отправить им ссылку с указаниями по электронной почте или в текстовом сообщении. Когда они нажимают на нее, на их телефоне запускается приложение Google Maps, если оно установлено, или maps.google.com загружается в веб-браузере их устройства. Оба эти опыта предоставляют пользователю возможность использовать пошаговую навигацию, включая голосовые указания, чтобы добраться до пункта назначения.
Используйте URL-адреса Карт для составления URL-адреса маршрута, как показано ниже, с закодированным в URL-адресе названием места в качестве параметра destination и идентификатором места в качестве параметра destination_place_id . Составление или использование URL-адресов Карт не требует затрат, поэтому вам не нужно включать ключ API в URL-адрес.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
При желании вы можете указать параметр запроса origin , используя тот же формат адреса, что и пункт назначения. Но если его опустить, то указания будут начинаться с текущего местоположения пользователя, которое может отличаться от того, где он использовал ваше приложение Product Locator. URL-адреса карт предоставляют дополнительные параметры запроса, такие как travelmode и dir_action=navigate для запуска указаний с включенной навигацией.
Эта интерактивная ссылка , которая расширяет приведенный выше пример URL-адреса, устанавливает origin на лондонском футбольном стадионе и использует travelmode=transit для указания маршрута общественного транспорта до пункта назначения.
Для отправки текстового сообщения или электронного письма, содержащего этот URL, в настоящее время мы рекомендуем использовать стороннее приложение, например twilio . Если вы используете App Engine, вы можете использовать сторонние компании для отправки SMS-сообщений или электронной почты. Для получения дополнительной информации см. Отправка сообщений с помощью сторонних служб .
Покажите свое местоположение на интерактивной карте
Используйте динамические карты
| В этом примере используется: API JavaScript Карт | Также доступно: Android | iOS |
Локатор является важной частью пользовательского опыта. Однако на некоторых сайтах может отсутствовать даже простая карта, требующая от пользователей покинуть сайт или приложение, чтобы найти ближайшее местоположение. Это означает неоптимальный опыт для пользователей, которым приходится перемещаться между страницами, чтобы получить необходимую информацию. Вместо этого вы можете улучшить этот опыт, встраивая и настраивая карты в свои приложения.
Добавить на страницу динамическую карту, то есть карту, которую пользователи могут перемещать, увеличивать и уменьшать масштаб, а также получать подробную информацию о различных местах и точках интереса, можно с помощью нескольких строк кода.
Во-первых, вам нужно включить Maps JavaScript API на страницу. Это делается путем присоединения следующего скрипта к вашей HTML-странице.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a"></script> URL ссылается на функцию JavaScript initMap , которая запускается при загрузке страницы. В URL вы также можете определить язык или регион вашей карты, чтобы убедиться, что она отформатирована правильно для конкретной страны, на которую вы ориентируетесь. Установка региона также гарантирует, что поведение приложений, используемых за пределами США, будет смещено в сторону указанного вами региона. Ознакомьтесь с подробностями покрытия платформы Google Карт, чтобы получить полный список поддерживаемых языков и регионов, и узнайте больше об использовании параметра region .
Далее вам понадобится HTML div для размещения вашей карты на странице. Это место, где будет отображаться карта.
<div id="map"></div> Следующий шаг — установить базовую функциональность вашей карты. Это делается в функции скрипта initMap , указанной в URL скрипта. В этом скрипте, показанном в следующем примере, вы можете задать начальное местоположение, тип карты и элементы управления, которые будут доступны на карте для ваших пользователей. Обратите внимание, что getElementById() ссылается на идентификатор 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 JavaScript Карт .)
Подробную информацию см. в документации по маркерам для JavaScript (веб) , Android и iOS .
Создайте стиль своей карты
Платформа Google Maps позволяет вам оформить карту таким образом, чтобы помочь пользователям найти ближайшее местоположение, добраться туда как можно быстрее и укрепить ваш бренд. Например, вы можете изменить цвета карты в соответствии с вашим брендом, и вы можете уменьшить отвлекающие факторы на карте, управляя точками интереса, которые видны пользователям. Платформа Google Maps также предоставляет ряд шаблонов для запуска карт, некоторые из которых оптимизированы для различных отраслей, таких как путешествия, логистика, недвижимость и розничная торговля.
Вы можете создавать или изменять стили карт на странице «Стили карт» консоли Google Cloud в своем проекте.
Разверните, чтобы увидеть анимацию создания и оформления стиля карты в консоли Cloud:
Стили отраслевых карт
Эта анимация показывает предопределенные отраслевые стили карт, которые вы можете использовать. Эти стили обеспечивают оптимальную отправную точку для каждого типа отрасли. Например, стиль карты «Розничная торговля» уменьшает точки интереса на карте, позволяя пользователям сосредоточиться на ваших местоположениях, а также на ориентирах, чтобы помочь им добраться до ближайшего местоположения как можно быстрее и увереннее.
Контроль точек интереса
Эта анимация задает цвет маркера для точек интереса и увеличивает плотность POI на стиле карты. Чем выше плотность, тем больше маркеров POI отображается на карте.
Каждый стиль карты имеет свой собственный идентификатор. После публикации стиля в консоли Cloud вы ссылаетесь на этот идентификатор карты в своем коде, что означает, что вы можете обновлять стиль карты в режиме реального времени без рефакторинга вашего приложения. Новый вид автоматически появится в существующем приложении и будет использоваться на разных платформах. В следующих примерах показано, как добавить идентификатор карты на веб-страницу с помощью API JavaScript Карт.
Включая один или несколько 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 .
Объедините пользовательские данные о местоположении с подробностями места
В предыдущем разделе «Показ ваших местоположений на интерактивной карте» мы рассмотрели использование сведений о месте, чтобы предоставить пользователям подробную информацию о ваших местах, например часы работы, фотографии и отзывы.
Полезно понимать стоимость различных полей данных в Place Details, которые классифицируются как Basic, Contact и Atmosphere Data. Чтобы управлять расходами, одна из стратегий заключается в объединении уже имеющейся у вас информации о ваших местоположениях со свежей информацией (обычно Basic и Contact Data) из Google Maps, такой как временное закрытие, праздничные часы работы, оценки пользователей, фотографии и отзывы. Если у вас уже есть контактная информация для ваших магазинов, вам не нужно будет запрашивать эти поля из Place Details, и вы можете ограничить свой запрос, чтобы получить только поля Basic или Atmosphere Data в зависимости от того, что вы хотите отобразить.
У вас могут быть собственные данные о месте, которые можно дополнить или использовать вместо Place Details. Codelab для полнофункционального локатора предоставляет пример использования GeoJSON с базой данных для хранения и извлечения ваших собственных данных о местоположении.