Цель
В этом документе описаны основные шаги по разработке интерактивного приложения для поиска магазинов с помощью платформы Google Карт, в частности Maps JavaScript API и Places UI Kit: элемент информации о местах. Вы узнаете, как создать карту с адресами магазинов, динамически обновлять список видимых магазинов и показывать подробную информацию о каждом из них.
Требования
Рекомендуется ознакомиться со следующими материалами:
- Maps JavaScript API – используется для показа карты на странице и импорта Places UI Kit.
- Расширенные маркеры – используются для отображения маркеров на карте.
- Places UI Kit – используется для показа информации о ваших магазинах в интерфейсе.
Включите Maps JavaScript API и Places UI Kit в своем проекте.
Прежде чем начать, убедитесь, что вы загрузили Maps JavaScript API и импортировали библиотеки, необходимые для расширенных маркеров и Places UI Kit. Также предполагается, что вы знакомы с веб-разработкой, в том числе с HTML, CSS и JavaScript.
Первоначальная настройка
Сначала добавьте карту на страницу. На этой карте будут показываться маркеры, относящиеся к адресам ваших магазинов.
Добавить карту на страницу можно двумя способами:
- Использование веб-компонента HTML gmp-map
- Использование JavaScript
Выберите способ, который лучше всего подходит для вашего случая. Оба способа добавления карты подходят для этого руководства.
Загрузка и показ адресов магазинов
В этом разделе мы загрузим и отобразим на карте данные о магазинах. В этом руководстве предполагается, что у вас есть хранилище информации о существующих магазинах, из которого можно извлекать данные. Данные о магазине могут поступать из разных источников, например из вашей базы данных.
В этом примере мы используем локальный файл JSON (stores.json) с массивом объектов магазинов, каждый из которых представляет один адрес магазина. Каждый объект должен содержать как минимум name, location (с lat и lng) и place_id.
Если у вас нет идентификаторов мест для адресов магазинов, их можно получить разными способами. Подробнее об идентификаторах мест…
Вот пример записи с информацией о магазине в файле stores.json.
В нем есть поля для названия, местоположения (широта/долгота) и идентификатора места. Есть объект, в котором хранятся часы работы магазина (усеченные). Также есть два логических значения, которые помогают описать особенности местоположения магазина.
{
"name": "Example Store Alpha",
"location": { "lat": 51.51, "lng": -0.12 },
"place_id": "YOUR_STORE_PLACE_ID",
"opening_hours": { "Monday": "09:00 - 17:00", "...": "..." },
"new_store_design": true,
"indoor_seating": false
}
В коде JavaScript получите данные о местоположении магазинов и отобразите маркер на карте для каждого из них.
Ниже приведен пример того, как это сделать. Эта функция принимает объект, содержащий сведения о магазинах, и создает маркер на основе местоположения каждого из них.
function displayInitialMarkers(storeLocations) {
if (!AdvancedMarkerElement || !LatLng || !mapElement) return;
storeLocations.forEach(store => {
if (store.location) {
const marker = new AdvancedMarkerElement({
position: new LatLng(store.location.lat, store.location.lng),
title: store.name
});
mapElement.appendChild(marker);
}
});
}
После того как вы загрузили магазины и на карте появились маркеры, обозначающие их местоположение, создайте боковую панель с помощью HTML и CSS, чтобы показывать подробную информацию о каждом магазине.
Вот как может выглядеть страница поиска адресов на этом этапе:
Отслеживание изменений области просмотра карты
Чтобы оптимизировать производительность и удобство использования, обновите приложение так, чтобы маркеры и сведения на боковой панели отображались только тогда, когда соответствующие им местоположения находятся в видимой области карты (области просмотра). Для этого нужно отслеживать изменения области просмотра карты, устранять дребезг этих событий и затем перерисовывать только необходимые маркеры.
Добавьте прослушиватель событий к событию бездействия карты. Это событие активируется после завершения любых операций панорамирования или масштабирования, обеспечивая стабильную область просмотра для ваших расчетов.
map.addListener('idle', debounce(updateMarkersInView, 300));
Приведенный выше фрагмент кода прослушивает событие idle и вызывает функцию debounce. Использование функции устранения дребезга гарантирует, что логика обновления маркеров будет выполняться только после того, как пользователь прекратит взаимодействие с картой на короткий период, что повысит производительность.
function debounce(func, delay) {
let timeoutId;
return function(...args) {
const context = this;
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(context, args);
}, delay);
};
}
Приведенный выше код – это пример функции устранения дребезга. Она принимает функцию и аргумент задержки, которые передаются в прослушиватель бездействия. Задержки в 300 мс достаточно, чтобы карта перестала двигаться, и при этом она не будет заметна в интерфейсе.
По истечении этого времени вызывается переданная функция, в данном случае updateMarkersInView.
Функция updateMarkersInView должна выполнять следующие действия:
Удалить все существующие маркеры с карты
Проверьте, находится ли магазин в пределах текущих границ карты. Например:
if (map.getBounds().contains(storeLatLng)) {
// logic
}
Внутри оператора if напишите код, который будет показывать маркеры и информацию о магазинах на боковой панели, если магазин находится в области просмотра карты.
Как показывать подробную информацию о местах с помощью элемента Place Details
На этом этапе приложение показывает все адреса магазинов, и пользователи могут фильтровать их по области просмотра карты. Чтобы улучшить этот процесс, с помощью элемента Place Details добавляются подробные сведения о каждом магазине, такие как фотографии, отзывы и информация о доступности. В этом примере используется компактный элемент информации о местах.
У каждого адреса магазина в источнике данных должен быть соответствующий идентификатор места. Этот идентификатор уникален для каждого местоположения на Google Картах и необходим для получения сведений о нем. Обычно идентификаторы мест получают заранее и сохраняют в записях о магазинах.
Интегрируйте элемент Place Details Compact в приложение
Когда магазин находится в текущей области просмотра карты и отображается на боковой панели, вы можете динамически создать и вставить для него компактный элемент с информацией о месте.
Для текущего обрабатываемого магазина извлеките идентификатор места из своих данных. Идентификатор места определяет, какое место будет показано в элементе.
Динамически создайте экземпляр PlaceDetailsCompactElement в JavaScript. Также создается новый элемент PlaceDetailsPlaceRequestElement, которому передается идентификатор места, и этот элемент добавляется в PlaceDetailsCompactElement. Наконец, используйте PlaceContentConfigElement, чтобы настроить контент, который будет показывать элемент.
В следующей функции предполагается, что необходимые библиотеки Places UI Kit импортированы и доступны в области видимости, где вызывается эта функция, а объект storeData, переданный функции, содержит place_id.
Эта функция возвращает элемент, а вызывающий код добавляет его в DOM.
function createPlaceDetailsCompactElement(storeData) {
// Create the main details component
const detailsCompact = new PlaceDetailsCompactElement();
detailsCompact.setAttribute('orientation', 'vertical'); // Or 'horizontal'
// Specify the Place ID
const placeRequest = new PlaceDetailsPlaceRequestElement();
placeRequest.place = storeData.place_id;
detailsCompact.appendChild(placeRequest);
// Configure which content elements to display
const contentConfig = new PlaceContentConfigElement();
// For this example, we'll render media, rating, accessibility, and attribution:
contentConfig.appendChild(new PlaceMediaElement({ lightboxPreferred: true }));
contentConfig.appendChild(new PlaceRatingElement());
contentConfig.appendChild(new PlaceAccessibleEntranceIconElement());
// Configure attribution
const placeAttribution = new PlaceAttributionElement();
placeAttribution.setAttribute('light-scheme-color', 'gray');
placeAttribution.setAttribute('dark-scheme-color', 'gray');
contentConfig.appendChild(placeAttribution);
detailsCompact.appendChild(contentConfig);
// Return the element
return detailsCompact;
}
В примере кода выше элемент настроен на показ фотографий места, оценки в отзывах и информации о специальных возможностях. Вы можете добавлять или удалять элементы контента. Все доступные варианты перечислены в документации по PlaceContentConfigElement.
Компактный элемент сведений о месте поддерживает стилизацию с помощью пользовательских свойств CSS. Это позволяет настроить внешний вид (цвета, шрифты и т. д.) в соответствии с дизайном вашего приложения. Примените эти пользовательские свойства в файле CSS. Поддерживаемые свойства CSS перечислены в справочной документации по PlaceDetailsCompactElement.
Вот как может выглядеть ваше приложение на этом этапе:
Улучшите поиск магазинов
Вы заложили прочную основу для своего приложения по поиску магазинов. Теперь рассмотрим несколько способов расширить его функциональность и создать ещё более насыщенный и ориентированный на пользователя опыт.
Добавьте автозаполнение
Добавьте строку поиска с автозаполнением, чтобы пользователям было проще находить магазины. Когда пользователь вводит адрес, район или объект и выбирает подсказку, карта автоматически центрируется на этом месте, а список магазинов поблизости обновляется. Для этого добавьте поле ввода и подключите к нему функцию автозаполнения мест. При выборе подсказки карта может быть центрирована по этой точке. Не забудьте настроить его так, чтобы результаты были ограничены или смещены в сторону вашей операционной зоны.
Определить местоположение
Чтобы предлагать пользователям, особенно мобильным, актуальную информацию, реализуйте функцию определения их текущего местоположения. Получив разрешение браузера на определение местоположения, автоматически центрируйте карту по позиции пользователя и показывайте ближайшие магазины. Пользователи высоко ценят функцию Рядом со мной, когда ищут варианты поблизости. Добавьте кнопку или начальный запрос, чтобы запрашивать доступ к местоположению.
Показать расстояние и маршруты
Когда пользователь выберет магазин, вы можете значительно улучшить его впечатления, интегрировав Routes API. Для каждого магазина в списке рассчитайте и покажите расстояние от текущего местоположения пользователя или от местоположения, указанного в запросе. Кроме того, добавьте кнопку или ссылку, которая использует Routes API для создания маршрута от местоположения пользователя до выбранного магазина. Затем вы можете показать этот маршрут на карте или дать ссылку на Google Карты для навигации, чтобы пользователь мог легко перейти от поиска магазина к поездке в него.
Эти расширения позволяют использовать больше возможностей платформы Google Карт, чтобы создать более полный и удобный инструмент поиска адресов, который будет отвечать потребностям пользователей.
Заключение
В этом руководстве описаны основные шаги по созданию интерактивного инструмента поиска магазинов. Вы узнали, как показывать на карте адреса своих магазинов с помощью Maps JavaScript API, динамически обновлять видимые магазины при изменении области просмотра и, что важно, как показывать данные о своих магазинах в соответствии с Places UI Kit. Используя существующую информацию о магазинах, включая идентификаторы мест, с элементом Place Details, вы можете представить подробные стандартизированные сведения о каждом из ваших местоположений, создав надежную основу для удобного поиска магазинов.
Попробуйте Maps JavaScript API и Places UI Kit – мощные инструменты на основе компонентов, которые позволяют быстро разрабатывать сложные приложения, использующие геолокацию. Объединив эти функции, вы сможете создать привлекательный и информативный контент для своих пользователей.
Авторы
Хенрик Вальве (Henrik Valve) | инженер DevX