Обзор
Платформа Google Maps доступна для Интернета (JS, TS), Android и iOS, а также предлагает API веб-сервисов для получения информации о местах, направлениях и расстояниях. Примеры в этом руководстве написаны для одной платформы, но приведены ссылки на документацию для реализации на других платформах.
Когда ваши пользователи видят ваши продукты в Интернете, они хотят найти лучший и наиболее удобный способ получить свой заказ. Руководство по внедрению Product Locator и советы по настройке, которые мы даем в этом разделе, — это то, что мы рекомендуем в качестве оптимального сочетания API платформы Google Maps для создания удобного пользовательского интерфейса Product Locator.
Следуя этому руководству по внедрению, вы можете помочь клиентам увидеть подробную информацию, необходимую им для поиска ваших продуктов, и указать им, как добраться до магазина, в котором есть этот товар, независимо от того, едут ли они на автомобиле, велосипеде, пешком или на общественном транспорте.
Включение API
Чтобы реализовать Product Locator, необходимо включить следующие API в Google Cloud Console. Следующие гиперссылки перенаправят вас в консоль Google Cloud для включения каждого API для выбранного проекта:
Дополнительную информацию о настройке см. в разделе Начало работы с платформой Google Maps .
Разделы руководства по внедрению
Ниже приведены реализации и настройки, которые мы рассмотрим в этой теме.
- Значок галочки — это основной этап реализации.
- Значок звездочки — это необязательная, но рекомендуемая настройка для улучшения решения.
| Связывание местоположений магазинов с местами платформы Google Maps | Сопоставьте местоположение магазина с местом на платформе Google Maps. | |
| Определение местоположения пользователя | Добавьте функцию ввода текста по мере необходимости, чтобы улучшить взаимодействие с пользователем на всех платформах и повысить точность адреса с минимальным нажатием клавиш. | |
| Определение ближайших магазинов | Рассчитайте расстояние и время в пути для нескольких пунктов отправления и назначения, при необходимости указав различные виды транспорта, такие как ходьба, автомобиль, общественный транспорт или езда на велосипеде. | |
| Отображение информации о магазине | Показывайте подробную информацию о своих магазинах, чтобы пользователям было легче находить их. | |
| Предоставление навигационных указаний | Получайте данные о маршрутах от пункта отправления до пункта назначения, используя различные виды транспорта, такие как ходьба, вождение, езда на велосипеде и общественный транспорт. | |
| Отправка маршрутов на мобильный | Помимо отображения маршрутов на вашей веб-странице, вы также можете отправлять маршруты на телефон пользователя для навигации с помощью Google Maps на ходу. | |
| Отображение ваших местоположений на интерактивной карте | Создавайте собственные маркеры на карте, чтобы выделить ваши местоположения, и оформляйте карту в соответствии с цветами вашего бренда. Отображайте (или скрывайте) определенные точки интереса (POI) на вашей карте, чтобы помочь пользователям лучше ориентироваться, и контролируйте плотность POI, чтобы не загромождать карту. | |
| Объединение пользовательских данных о местоположении с информацией о месте | Объедините свои собственные данные о местоположении с информацией о месте, чтобы предоставить пользователям богатый набор данных для принятия решений. |
Связывание местоположений магазинов с местами платформы Google Maps
Получение идентификаторов мест
| В этом примере используется: Places API. | Также доступно: JavaScript |
У вас может быть база данных ваших магазинов с базовой информацией, такой как название этого места, его адрес и номер телефона, и вы хотите связать ее с местом на платформе Google Maps как набором конечных пунктов назначения, которые могут выбрать ваши пользователи. продукты. Чтобы получить информацию об этом месте, которую имеет платформа Google Maps, включая географические координаты и информацию, предоставленную пользователем, найдите идентификатор места , соответствующий каждому из магазинов в вашей базе данных. Вы можете вызвать конечную точку 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_productlocator_v1_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_productlocator_v1_a
Определение местоположения пользователя
| В этом примере используется: Библиотека автозаполнения мест в Maps JavaScript API. | Также доступно: Android | iOS |
Ключевым компонентом Product Locator является определение начального местоположения вашего пользователя. Вы можете предложить пользователю два варианта указания своего начального местоположения: ввести источник поиска или предоставить разрешения геолокации веб-браузера или службам определения местоположения на мобильных устройствах.
Обработка введенных записей с помощью автозаполнения
Сегодняшние пользователи привыкли к функции автозаполнения текста в потребительской версии Карт Google. Эту функцию можно интегрировать в любое приложение с помощью библиотек Places платформы Google Maps на мобильных устройствах и в Интернете. Когда пользователь вводит адрес, автозаполнение заполняет остальное с помощью виджетов. Вы также можете предоставить свою собственную функцию автозаполнения напрямую, используя библиотеки 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() . При этом используется геометрия сопоставленного результата, то есть местоположения пользователя, а затем выполняется поиск ближайших местоположений на основе этих координат в качестве начала координат, как описано в разделе «Определение ближайших магазинов» .
Разверните это, чтобы просмотреть видеоинструкции по добавлению автозаполнения мест в ваше приложение:
Веб-сайт
Приложения для Android
iOS-приложения
Использование геолокации браузера
Чтобы запросить и обработать геолокацию браузера HTML5, узнайте, как включить окно «Использовать мое местоположение» :
Определение ближайших магазинов
| В этом примере используются: служба Distance Matrix, Maps JavaScript API. | Также доступно: API матрицы расстояний. |
Как только вы узнаете местоположение пользователя, вы можете сравнить его с расположением ваших магазинов. Делая это с помощью службы Distance Matrix, Maps JavaScript API помогает вашим пользователям выбирать местоположение, которое наиболее удобно для них с точки зрения времени в пути или расстояния по дороге.
Стандартный способ организации списка местоположений — сортировка их по расстоянию. Часто это расстояние рассчитывается просто по прямой линии от пользователя до местоположения, но это может вводить в заблуждение. Прямая линия может проходить над непроходимой рекой или через оживленные дороги в то время, когда другое место может быть более удобным. Это важно, когда у вас есть несколько мест в радиусе нескольких километров друг от друга.
Служба матрицы расстояний Maps JavaScript API работает, беря список пунктов отправления и назначения и возвращая не только расстояние в пути, но и время между ними. В случае пользователя источником будет то место, где он находится в данный момент, или желаемая отправная точка, а пунктами назначения будут места. Исходные точки и пункты назначения могут быть указаны как пары координат или как адреса; при вызове сервиса сервис сопоставляет адреса. Вы можете использовать службу Distance Matrix, Maps JavaScript API с дополнительными параметрами, чтобы отображать результаты на основе текущего или будущего времени в пути.
В следующем примере вызывается служба матрицы расстояний, 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, Maps JavaScript API. | Также доступно: Places SDK для Android | Places SDK для iOS | API мест |
Вы можете поделиться подробной информацией о месте, такой как контактная информация, часы работы и текущий статус открытия, чтобы помочь клиентам выбрать предпочтительное местоположение или завершить заказ.
После вызова Maps JavaScript API для получения сведений о месте вы можете отфильтровать и обработать ответ.
Чтобы запросить информацию о месте, вам понадобится идентификатор каждого из ваших местоположений. См. раздел Получение идентификаторов мест , чтобы получить идентификатор места вашего местоположения.
Следующий запрос сведений о месте возвращает адрес, координаты, веб-сайт, номер телефона, рейтинг и часы работы для идентификатора места Google в Лондоне:
var request = {
placeId: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU',
fields: ['name', 'formatted_phone_number', 'geometry', 'opening_hours', 'rating', 'utc_offset_minutes', 'website']
};
service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);
function callback(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
createMarker(place);
}
}
Улучшение поиска продуктов
В зависимости от вашего бизнеса или потребностей пользователей вы можете еще больше улучшить взаимодействие с пользователем.
Предоставление навигационных указаний
| В этом примере используется: Служба маршрутов Maps JavaScript API. | Также доступно: веб-сервис Directions API для использования на Android и iOS напрямую из приложения или удаленно через прокси-сервер. |
Когда вы показываете пользователям маршруты изнутри вашего сайта или приложений, вашим пользователям не нужно уходить с вашего сайта и отвлекаться на другие страницы или видеть конкурентов на карте. Вы даже можете показать выбросы углекислого газа при конкретном виде передвижения и показать влияние любого конкретного путешествия, используя имеющийся у вас набор данных о выбросах углекислого газа.
Служба маршрутов также имеет функции, которые позволяют обрабатывать результаты и легко отображать их на карте.
Ниже приведен пример отображения панели направлений. Дополнительную информацию об образце см. в разделе Отображение текстовых направлений .
Отправка маршрутов на мобильный
Чтобы пользователям было еще проще добраться до нужного места, вы можете отправить им текстовое сообщение или электронное письмо со ссылкой, как проложить маршрут. Когда они нажмут на нее, приложение Google Maps запустится на их телефоне, если оно установлено, или сайт maps.google.com загрузится в веб-браузере их устройства. Оба этих варианта предоставляют пользователю возможность использовать пошаговую навигацию, включая голосовые подсказки, чтобы добраться до пункта назначения.
Используйте URL-адреса Карт, чтобы составить URL-адрес маршрута, как показано ниже, с названием места в кодировке URL-адреса в качестве параметра destination и идентификатором места в качестве параметра destination_place_id . Создание или использование URL-адресов Карт не требует затрат, поэтому вам не нужно включать в URL-адрес ключ API.
https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU
При желании вы можете указать параметр запроса origin используя тот же формат адреса, что и пункт назначения. Но если его пропустить, маршруты начнутся с текущего местоположения пользователя, которое может отличаться от того, где он использовал ваше приложение Product Locator. URL-адреса карт предоставляют дополнительные параметры запроса, такие как travelmode и dir_action=navigate , чтобы запускать маршруты с включенной навигацией.
Эта кликабельная ссылка , которая расширяет приведенный выше пример URL-адреса, устанавливает в качестве origin лондонский футбольный стадион и использует travelmode=transit чтобы указать маршруты общественного транспорта до пункта назначения.
Чтобы отправить текстовое сообщение или электронное письмо, содержащее этот URL-адрес, в настоящее время мы рекомендуем использовать стороннее приложение, например twilio . Если вы используете App Engine, вы можете использовать сторонние компании для отправки SMS-сообщений или электронной почты. Дополнительную информацию см. в разделе «Отправка сообщений с помощью сторонних служб» .
Отображение ваших местоположений на интерактивной карте
Использование динамических карт
| В этом примере используется: Maps JavaScript API. | Также доступно: Android | iOS |
Локатор — важная часть пользовательского опыта. Однако на некоторых сайтах может отсутствовать даже простая карта, что требует от пользователей покинуть сайт или приложение, чтобы найти ближайшее местоположение. Это означает неоптимальный опыт для пользователей, которым приходится перемещаться между страницами, чтобы получить необходимую информацию. Вместо этого вы можете улучшить этот опыт, встраивая и настраивая карты в свои приложения.
Добавление динамической карты на вашу страницу — то есть карты, по которой пользователи могут перемещаться, увеличивать и уменьшать масштаб и получать подробную информацию о различных местах и достопримечательностях — можно выполнить с помощью нескольких строк кода.
Во-первых, вам необходимо включить Maps JavaScript API на страницу. Это делается путем ссылки на следующий скрипт на вашей HTML-странице.
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a"></script> URL-адрес ссылается на функцию initMap JavaScript, которая запускается при загрузке страницы. В URL-адресе вы также можете определить язык или регион вашей карты, чтобы убедиться, что она отформатирована правильно для конкретной страны, на которую вы ориентируетесь. Установка региона также гарантирует, что поведение приложений, используемых за пределами США, будет зависеть от установленного вами региона. Просмотрите сведения о покрытии платформы Google Maps, чтобы получить полный список поддерживаемых языков и регионов, а также узнать больше об использовании параметров region .
Далее вам понадобится HTML- div для размещения карты на странице. Это место, где будет отображаться карта.
<div id="map"></div> Следующим шагом будет настройка основных функций вашей карты. Это делается с помощью функции сценария initMap , указанной в URL-адресе сценария. В этом скрипте, показанном в следующем примере, вы можете установить исходное местоположение, тип карты и элементы управления, которые будут доступны на карте для ваших пользователей. Обратите внимание, что getElementById() ссылается на идентификатор div «карты», указанный выше.
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: { lat: 51.485925, lng: -0.129500 },
zoomControl: false
});
}
Для локатора вас обычно интересует установка начального местоположения, центральной точки или границ, а также уровня масштабирования (насколько карта увеличена до этого местоположения). Большинство других элементов, таких как настройка элементов управления, являются необязательными, поскольку вы сами определяете уровень взаимодействия с картой.
Настройка вашей карты
Вы можете изменить внешний вид и детали карты несколькими способами. Например, вы можете:
- Создавайте свои собственные маркеры, чтобы заменить отметки на карте по умолчанию.
- Измените цвета объектов карты, чтобы они отражали ваш бренд.
- Управляйте тем, какие достопримечательности вы отображаете (достопримечательности, еда, жилье и т. д.) и с какой плотностью, позволяя сосредоточить внимание пользователей на своих местоположениях, одновременно выделяя ориентиры, которые помогут пользователям добраться до ближайшего местоположения.
Создание пользовательских маркеров карты
Вы можете настроить свои маркеры, изменив цвет по умолчанию (возможно, показывая, открыто ли место в данный момент) или заменив маркер собственным изображением, например логотипом вашего бренда. Информационные окна или всплывающие окна могут предоставлять пользователям дополнительную информацию, такую как часы работы, номер телефона или даже фотографии. Вы также можете создавать собственные растровые, векторные, перетаскиваемые и даже анимированные маркеры.
Ниже приведен пример карты, на которой используются пользовательские маркеры. (Исходный код см. в разделе «Пользовательские маркеры Maps JavaScript API» .)
Подробную информацию см. в документации по маркерам для JavaScript (веб) , Android и iOS .
Стилизация вашей карты
Платформа Google Maps позволяет оформить карту таким образом, чтобы пользователи могли найти ближайшее местоположение, добраться туда как можно быстрее и укрепить ваш бренд. Например, вы можете изменить цвета карты в соответствии с вашим фирменным стилем, а также уменьшить количество отвлекающих факторов на карте, контролируя точки интереса, которые видны пользователям. Платформа Google Maps также предоставляет ряд стартовых шаблонов карт, некоторые из которых оптимизированы для различных отраслей, таких как путешествия, логистика, недвижимость и розничная торговля.
Вы можете создавать или изменять стили карт на странице « Стили карт Google Cloud Console» в своем проекте.
Разверните, чтобы увидеть анимацию создания и стилизации стиля карты в Cloud Console:
Стили карты отрасли
Эта анимация показывает предопределенные отраслевые стили карт, которые вы можете использовать. Эти стили обеспечивают оптимальную отправную точку для каждого типа отрасли. Например, стиль карты «Розничная торговля» уменьшает количество точек интереса на карте, позволяя пользователям сосредоточиться на ваших местоположениях, а также на ориентирах, которые помогают им добраться до ближайшего местоположения максимально быстро и уверенно.
Точки контроля интересов
Эта анимация устанавливает цвет маркеров для точек интереса и увеличивает плотность POI в стиле карты. Чем выше плотность, тем больше маркеров POI появляется на карте.
Каждый стиль карты имеет свой идентификатор. После публикации стиля в Cloud Console вы ссылаетесь на этот идентификатор карты в своем коде. Это означает, что вы можете обновлять стиль карты в реальном времени без рефакторинга приложения. Новый внешний вид автоматически появится в существующем приложении и будет использоваться на разных платформах. В следующих примерах показано, как добавить идентификатор карты на веб-страницу с помощью Maps JavaScript API.
Включив один или несколько map_ids в URL-адрес скрипта, Maps JavaScript API автоматически делает эти стили доступными для более быстрого рендеринга карты при вызове этих стилей в коде.
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a">
</script> Следующий код отображает стилизованную карту на веб-странице. (Не показан HTML-элемент <div id="map"></div> в котором карта будет отображаться на странице.)
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 51.485925, lng: -0.129500},
zoom: 12,
mapId: '1234abcd5678efgh'
});Узнайте больше о внедрении стилей облачных карт в JavaScript (веб-версия) , Android и iOS .
Объединение пользовательских данных о местоположении с информацией о месте
В предыдущем разделе «Отображение ваших местоположений на интерактивной карте» мы рассмотрели использование сведений о месте, чтобы предоставить пользователям обширную информацию о ваших местоположениях, такую как часы работы, фотографии и отзывы.
Полезно понимать стоимость различных полей данных в сведениях о месте, которые подразделяются на основные, контактные и атмосферные данные. Чтобы управлять своими расходами, одна из стратегий состоит в том, чтобы объединить уже имеющуюся у вас информацию о ваших местоположениях со свежей информацией (обычно базовыми и контактными данными) из Карт Google, такой как временное закрытие, праздничные часы, рейтинги пользователей, фотографии и отзывы. Если у вас уже есть контактная информация для ваших магазинов, вам не нужно будет запрашивать эти поля из сведений о месте и вы можете ограничить свой запрос получением только полей основных данных или полей данных об атмосфере в зависимости от того, что вы хотите отобразить.
У вас могут быть собственные данные о месте, которые можно дополнить или использовать вместо сведений о месте. Лаборатория кода для полностекового локатора представляет собой пример использования GeoJSON с базой данных для хранения и получения данных о вашем собственном местоположении.