Эта страница переведена с помощью Cloud Translation API.

Что такое Places UI Kit и как его можно использовать для создания интересных решений?

Введение

Для миллионов пользователей по всему миру Google Карты — это источник точной и актуальной информации о местах. Обширная база данных Google, включающая более 250 миллионов объектов по всему миру, включая отзывы пользователей, фотографии и рейтинги, обеспечивает непревзойденный уровень детализации и достоверности. Чтобы предоставлять актуальные и достоверные данные, мы ежедневно обновляем карты 100 миллионов раз.

Places UI Kit — это готовая к использованию и экономичная библиотека компонентов, основанная на обширной информации о местах в Google Картах. Она позволяет интегрировать проверенный и знакомый интерфейс Google Places в ваши клиентские приложения на выбранной вами карте.

Компоненты

Places UI Kit предлагает набор отдельных компонентов пользовательского интерфейса, которые можно использовать независимо или вместе для создания бесшовного интерфейса Places.

Сведения о месте: этот компонент отображает подробную информацию о месте, такую как его название, адрес, номер телефона, веб-сайт, часы работы и отзывы пользователей.
Поиск места: этот компонент отображает список близлежащих мест по категориям или с помощью свободного текстового поиска.
Базовое автозаполнение мест: этот компонент создает поле ввода текста, представляющее раскрывающийся список предполагаемых мест, соответствующих введенным данным.

Компоненты комплекта пользовательского интерфейса Places

Основные преимущества Places UI Kit

Простота использования: включите надежный пользовательский интерфейс Google для Places в свои приложения с минимальным написанием кода.
Использование на любой карте: впервые вы можете использовать контент Places на картах, не принадлежащих Google.
Знакомый пользовательский интерфейс: компоненты предоставляют пользовательский интерфейс, соответствующий интерфейсу Google Maps, что делает его интуитивно понятным для пользователей.
Настройка: набор инструментов Places UI Kit предлагает широкие возможности визуальной настройки без дополнительной платы. Вы можете использовать различные настройки и пользовательские CSS-свойства для настройки отображения элементов.
Экономическая эффективность: Places UI Kit может оказаться более экономически эффективным решением по сравнению с прямым использованием Places API.

Реальные примеры использования

Places UI Kit можно использовать в различных приложениях для улучшения пользовательского опыта.

Приложения для поиска локальных достопримечательностей: приложение «Чем заняться» может использовать компонент «Поиск места» для отображения списка близлежащих ресторанов, кафе и достопримечательностей. Когда пользователь выбирает место из списка, компонент «Сведения о месте» может использоваться для отображения дополнительной информации об этом месте.
Приложения для планирования путешествий: приложение для путешествий может использовать функцию поиска мест, чтобы пользователи могли искать отели или достопримечательности в определённом городе. Компонент «Сведения о месте» может отображать фотографии, рейтинги и отзывы для каждого места, что поможет в планировании.
Порталы поиска недвижимости и объектов недвижимости: приложение для недвижимости может использовать компонент поиска места, чтобы показывать различные категории близлежащих мест, помогая потенциальному покупателю или арендатору жилья понять, какой образ жизни подходит в этом районе, прежде чем запланировать просмотр.
Приложения для обмена сообщениями и социальных сетей: Приложения для обмена сообщениями и социальных сетей могут использовать функцию поиска мест (Place Search) для поиска и предложения близлежащих мест, чтобы помочь пользователям легко найти место встречи. Компонент «Сведения о месте» (Place Details) может использоваться для отображения расширенной информации о местах, когда пользователи делятся информацией о них. С помощью встроенной кнопки Google Maps пользователи могут легко и точно находить другие места и информацию о путешествиях на Google Maps.

Настройка

Разнообразие контента и стили компонентов Places UI Kit можно настраивать в соответствии с вашими потребностями.

Использование пользовательских CSS-свойств, например , CSS-свойств для компонента Place Details Component , позволяет адаптировать внешний вид компонентов к дизайну вашего приложения. Вы можете настраивать цвета, шрифты и другие визуальные аспекты. При внесении визуальных изменений важно соблюдать требования к авторству. Например, вы можете изменить основной цвет, используемый для ссылок и количества отзывов, с помощью CSS-свойства --gmp-mat-color-primary .

Вы можете управлять отображаемым содержимым определенного места, используя вложенный элемент gmp-place-content-config для выбора и настройки содержимого или просто используя gmp-place-all-content для отображения всего доступного содержимого.

В документации доступен инструмент настройки , который поможет вам визуализировать различные конфигурации стилей.

Руководство по внедрению

Places UI Kit доступен через Maps JavaScript и Places SDK для Android и iOS .

Начиная

Чтобы начать использовать Places UI Kit, вам необходимо выполнить следующие шаги:

Настройте свой проект Google Cloud : для использования Places UI Kit вам понадобится проект Cloud с платежной учетной записью.
Включите Places UI Kit : Вам необходимо включить Places UI Kit для своего проекта.
Получите ключ API : для аутентификации ваших запросов требуется ключ API.

Более подробную информацию о конкретной платформе можно найти в руководстве по началу работы с Places UI Kit для JavaScript , Android и iOS .

Пример реализации

Вот пример реализации поиска места и информации о месте с помощью динамических карт JavaScript. Пользователь может искать близлежащие места по произвольному тексту. При щелчке по месту в списке результатов поиска на динамических картах отобразится компонент «Информация о месте».

Ниже приведены фрагменты кода. Демо-версию и полный код можно найти в этом репозитории на GitHub .

Прежде чем начать, убедитесь, что вы выполнили указанные выше шаги по началу работы с JavaScript.

Загрузите необходимые библиотеки в HTML.

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

Добавьте в HTML-код контейнер карты, поле ввода текста и кнопку поиска. Этот контейнер будет содержать динамические карты, созданные с помощью JavaScript. Поле ввода позволяет пользователям вводить поисковые запросы.

<div id="map-container"></div>
<div class="controls">
    <input type="text" class="query-input" />
    <button class="search-button">Search</button>
</div>

Добавьте компонент «Поиск места». Компонент «Поиск места» поддерживает горизонтальный и вертикальный макеты. В этом примере мы используем горизонтальный макет. Атрибут «selectable» делает элемент списка результатов поиска кликабельным (при клике срабатывает событие gmp-select).

Внутри элемента gmp-place-search мы добавляем два дочерних элемента:

gmp-place-all-content используется для отображения всего доступного контента
gmp-place-text-search-request используется для настройки элемента поиска места.

В этом примере мы настроим конфигурацию в JavaScript.

<div class="list-container">
    <gmp-place-search orientation="horizontal" selectable>
         <gmp-place-all-content></gmp-place-all-content>  
         <gmp-place-text-search-request></gmp-place-text-search-request>
    </gmp-place-search>
</div>

Затем добавьте компонент «Сведения о месте», доступный в компактном и полном макетах, каждый из которых поддерживает вертикальную и горизонтальную ориентацию. В этом примере используется компактный горизонтальный макет. Как и в случае с компонентом «Поиск места», мы добавляем два дочерних элемента:

gmp-place-all-content указывает на показ всего доступного контента
gmp-place-details-place-request используется для выбора места.

В этом примере мы установим место в JavaScript.

<div id="details-container">
     <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request></gmp-place-details-place-request> 
        <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details-compact> 
</div>

В JavaScript импортируйте библиотеки, необходимые для этого примера. Библиотека Places импортирует библиотеку Places UI Kit для JavaScript.

const {Map} = await google.maps.importLibrary("maps");
await google.maps.importLibrary("places");
({AdvancedMarkerElement} = await google.maps.importLibrary("marker"));
({LatLngBounds, LatLng} = await google.maps.importLibrary("core"));

Создавайте динамические карты.

const mapContainer = document.getElementById("map-container");
const mapOptions = {
    center: {lat: 37.422, lng: -122.085},
    zoom: 12 
};
const gMap = new Map(mapContainer, mapOptions);

Добавьте обработчик кликов к кнопке поиска, чтобы начать поиск места. После загрузки результатов поиска создайте маркеры для каждого места и добавьте к ним обработчик кликов. При нажатии на маркер будут запрошены и отображены сведения о соответствующем месте.

Когда места найдены и элемент поиска мест загружается, свойство places элемента поиска мест заполняется массивом результатов. Каждый результат представляет собой объект места, содержащий идентификатор места, координаты и область просмотра. Чтобы получить подробную информацию, передайте идентификатор места или весь объект места элементу Place Details.

const queryInput = document.querySelector(".query-input");
const searchButton = document.querySelector(".search-button");
const placeSearch = document.querySelector("gmp-place-search");
const placeSearchQuery = document.querySelector("gmp-place-text-search-request");
const placeDetails = document.querySelector("gmp-place-details-compact");
const placeRequest = document.querySelector("gmp-place-details-place-request");

placeDetailsPopup = new AdvancedMarkerElement({
    map: null,
    content: placeDetails,
    zIndex: 1
});

searchButton.addEventListener("click", searchPlaces);

function searchPlaces(){    
    if (queryInput.value.trim()) {
        placeSearchQuery.textQuery = queryInput.value.trim();
        placeSearchQuery.locationBias = gMap.getBounds();
        placeSearch.addEventListener('gmp-load', addMarkers, { once: true });
    }
}

async function addMarkers(){
    const bounds = new LatLngBounds();
    placeSearch.places.forEach((place) => {
        let marker = new AdvancedMarkerElement({
            map: gMap,
            position: place.location
        });
        bounds.extend(place.location);
        marker.addListener('click',(event) => {
            placeRequest.place = place;
            placeDetails.style.display = 'block';
            placeDetailsPopup.position = place.location;
            placeDetailsPopup.map = gMap;
            gMap.fitBounds(place.viewport, {top: 200, left: 100});
        });
        gMap.setCenter(bounds.getCenter());
        gMap.fitBounds(bounds);
    });
}

Обязательно ознакомьтесь с демо-версией и полным кодом в этом репозитории GitHub .

Источники, которые помогут вам построить

Авторы

Основные авторы:

Тереза Цинь | Инженер по решениям платформы Google Карт