Цель
В этом документе рассматриваются основные этапы разработки интерактивного приложения для поиска магазинов с использованием платформы Google Maps, в частности API JavaScript Maps и Places UI Kit: элемент Place Details . Вы узнаете, как создать карту, которая отображает местоположения магазинов, динамически обновлять список видимых магазинов и отображать подробную информацию о местах для каждого магазина.
Предпосылки
Рекомендуется знание следующего:
- Maps JavaScript API — используется для отображения карты на вашей странице и для импорта Places UI Kit.
- Расширенные маркеры — используются для отображения маркеров на карте.
- Places UI Kit — используется для отображения информации о ваших магазинах в пользовательском интерфейсе.
Включите Maps JavaScript API и Places UI Kit в своем проекте.
Убедитесь, что вы загрузили Maps JavaScript API и импортировали необходимые библиотеки для Advanced Markers and Places UI Kit , прежде чем начать. Этот документ также предполагает наличие практических знаний в области веб-разработки, включая HTML, CSS и JavaScript.
Начальная настройка
Первый шаг — добавить карту на страницу. Эта карта будет использоваться для отображения пинов, относящихся к местоположению ваших магазинов.
Добавить карту на страницу можно двумя способами:
- Использование HTML-веб-компонента gmp-map
- Использование JavaScript
Выберите метод, который лучше всего подходит для вашего варианта использования. Оба способа реализации карты будут работать с этим руководством.
Демо
Эта демонстрация показывает пример поиска магазинов в действии, отображая местоположения офисов Google в Bay Area. Элемент Place Details отображается для каждого местоположения вместе с некоторыми примерами атрибутов.
Загрузка и отображение местоположений магазинов
В этом разделе мы загрузим и отобразим данные вашего магазина на карте. Это руководство предполагает, что у вас есть репозиторий информации о ваших существующих магазинах, из которого можно извлечь данные. Данные вашего магазина могут поступать из различных источников, таких как ваша база данных. Для этого примера мы предполагаем локальный файл 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 . Использование функции debounce гарантирует, что логика обновления маркера запустится только после того, как пользователь перестанет взаимодействовать с картой на короткий период времени, что повышает производительность.
function debounce(func, delay) {
let timeoutId;
return function(...args) {
const context = this;
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(context, args);
}, delay);
};
}
Приведенный выше код — пример функции debounce. Он принимает функцию и аргумент delay, которые можно увидеть переданными в прослушивателе idle. Задержка в 300 мс достаточна для ожидания остановки движения карты, без добавления заметной задержки в UI. По истечении этого времени ожидания вызывается переданная функция, в данном случае updateMarkersInView .
Функция updateMarkersInView должна выполнять следующие действия:
Удалить все существующие маркеры с карты
Проверьте, попадает ли местоположение магазина в границы текущей карты, например:
if (map.getBounds().contains(storeLatLng)) {
// logic
}
В приведенном выше операторе if напишите код для отображения маркеров и сведений о магазине на боковой панели, если местоположение магазина попадает в область просмотра карты.
Отображение подробной информации о месте с помощью элемента «Сведения о месте»
На этом этапе приложение отображает все местоположения магазинов, и пользователи могут фильтровать их на основе области просмотра карты. Для улучшения этого, с помощью элемента Place Details Element добавляются подробные сведения о каждом магазине, такие как фотографии, отзывы и информация о доступности. В этом примере специально используется элемент Place Details Compact Element .
Каждое местоположение магазина в вашем источнике данных должно иметь соответствующий Place ID . Этот ID однозначно идентифицирует местоположение на Google Maps и необходим для получения его данных. Обычно вы получаете эти Place ID заранее и сохраняете их для каждой записи вашего магазина.
Интеграция компактного элемента Place Details в приложение
Когда магазин определяется как находящийся в пределах текущего окна просмотра карты и отображается на боковой панели, вы можете динамически создать и вставить для него компактный элемент сведений о месте.
Для текущего обрабатываемого магазина извлеките Place ID из ваших данных. Place ID используется для управления тем, какое место будет отображаться в элементе.
В JavaScript динамически создайте экземпляр PlaceDetailsCompactElement . Также создается новый PlaceDetailsPlaceRequestElement , ему передается Place ID, и он добавляется к PlaceDetailsCompactElement . Наконец, используйте PlaceContentConfigElement для настройки содержимого, которое будет отображать элемент.
Следующая функция предполагает, что необходимые библиотеки Place 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 для всех доступных опций.
Элемент Place Details Compact поддерживает стилизацию с помощью пользовательских свойств CSS. Это позволяет вам настраивать его внешний вид (цвета, шрифты и т. д.) в соответствии с дизайном вашего приложения. Примените эти пользовательские свойства в вашем файле CSS. Поддерживаемые свойства CSS см. в справочной документации по PlaceDetailsCompactElement .
Пример того, как может выглядеть ваше заявление на данном этапе:
Улучшить поиск магазинов
Вы создали прочную основу для своего приложения поиска магазинов. Теперь рассмотрите несколько способов расширить его функциональность и создать еще более богатый, более ориентированный на пользователя опыт.
Добавить автозаполнение
Улучшите то, как пользователи находят области для поиска магазинов, интегрировав поисковый ввод с Place Autocomplete . Когда пользователи вводят адрес, район или точку интереса и выбирают предложение, запрограммируйте карту на автоматическое центрирование на этом месте, запуская обновление близлежащих магазинов. Достигните этого, добавив поле ввода и прикрепив к нему функциональность Place Autocomplete. При выборе предложения карта может быть центрирована на этой точке. Не забудьте настроить ее для смещения или ограничения результатов вашей рабочей областью.
Определить местоположение
Предложите немедленную релевантность, особенно для мобильных пользователей, реализуя функциональность для определения их текущего географического местоположения . После получения разрешения браузера на определение их местоположения автоматически центрируйте карту на их местоположении и отображайте ближайшие магазины. Пользователи высоко ценят эту функцию Near Me при поиске немедленных вариантов. Добавьте кнопку или начальную подсказку для запроса доступа к местоположению.
Показать расстояние и направление
Как только пользователь определит интересующий его магазин, значительно улучшите его путешествие, интегрировав API маршрутов . Для каждого магазина, который вы перечисляете, рассчитайте и отобразите расстояние от текущего местоположения пользователя или от искомого местоположения. Кроме того, предоставьте кнопку или ссылку, которая использует API маршрутов для создания маршрута от местоположения пользователя до выбранного магазина. Затем вы можете отобразить этот маршрут на своей карте или сделать ссылку на Google Maps для навигации, создав плавный переход от поиска магазина к фактическому его достижению.
Внедрив эти расширения, вы сможете использовать больше возможностей платформы Google Maps для создания более комплексного и удобного инструмента поиска магазинов, который напрямую отвечает потребностям обычных пользователей.
Заключение
В этом руководстве были продемонстрированы основные шаги по созданию интерактивного поисковика магазинов. Вы узнали, как отображать собственные местоположения магазинов на карте с помощью API JavaScript Карт, динамически обновлять видимые магазины на основе изменений области просмотра и, что особенно важно, как отображать собственные данные магазинов в соответствии с Places UI Kit. Используя существующую информацию о магазинах, включая идентификаторы мест, с элементом Place Details Element, вы можете представить подробные стандартизированные сведения для каждого из ваших местоположений, создав надежную основу для удобного для пользователя локатора магазинов.
Попробуйте Maps JavaScript API и Places UI Kit , чтобы предложить мощные, основанные на компонентах инструменты для быстрой разработки сложных приложений на основе местоположения. Объединив эти функции, вы сможете создать увлекательный и информативный опыт для своих пользователей.
Участники
Хенрик Валв | Инженер DevX