Базовый элемент автозаполнения мест

Выберите платформу: Android iOS JavaScript

BasicPlaceAutocompleteElement создает текстовое поле, предоставляет подсказки мест в списке интерфейса и возвращает идентификатор выбранного места.

Элемент Basic Place Autocomplete проще в реализации, чем PlaceAutocompleteElement, и отличается от него следующим:

  • Элемент Basic Place Autocomplete возвращает объект Place, содержащий только идентификатор места, а не объект PlacePrediction. Полученный идентификатор места можно напрямую использовать с элементом Places UI Kit Details, чтобы получить дополнительную информацию о месте. В случае с объектом PlacePrediction сначала потребуется преобразовать его в идентификатор места.
  • Для элемента "Базовый сервис автозаполнения мест" не требуется включать Places API в консоли Google Cloud.
  • Элемент Basic Place Autocomplete очищает поле ввода, когда пользователь выбирает подсказку автозаполнения мест.

Требования

Чтобы использовать элемент Basic Place Autocomplete, включите Places UI Kit в проекте Google Cloud. Подробности – в статье Начало работы.

Как добавить элемент автозаполнения мест

В этом разделе рассказывается, как добавить элемент Basic Autocomplete на веб-страницу или карту.

Как добавить на веб-страницу базовый элемент Autocomplete

Чтобы добавить элемент BasicAutocomplete на веб-страницу, создайте новый элемент google.maps.places.BasicPlaceAutocompleteElement и добавьте его на страницу, как показано в примере ниже: 

// Request needed libraries.
const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary('places');
// Create the input HTML element and append it.
const placeAutocomplete = new BasicPlaceAutocompleteElement();
document.body.appendChild(placeAutocomplete);

Как добавить на карту элемент "Базовое автозаполнение"

Чтобы добавить на карту элемент "Базовая автозаполняемость", добавьте BasicPlaceAutocompleteElement в элемент gmp-map и задайте его положение с помощью атрибута slot, как показано в следующем примере:

<gmp-map
    zoom="12"
    center="37.4220656,-122.0840897"
    map-id="DEMO_MAP_ID">
    <gmp-basic-place-autocomplete
        slot="control-inline-start-block-start"></gmp-basic-place-autocomplete>
</gmp-map>

Как ограничить подсказки функции Autocomplete

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

В таком случае элемент "Базовое автозаполнение" будет игнорировать те результаты, которые не входят в определенную область. Довольно распространенная практика – ограничивать результаты границами карты. Если вы зададите предпочтения таким образом, элемент BasicAutocomplete будет показывать результаты только в заданной области, даже когда совпадения есть и за ее пределами.

Если границы или область просмотра не указаны, API будет определять местоположение пользователя по IP-адресу и предлагать места, расположенные поблизости. По возможности задавайте границы. В противном случае подсказки для разных пользователей могут быть неодинаковы. Также, чтобы улучшить подсказки в целом, следует выбрать подходящую область просмотра, например такую, которая устанавливается при панорамировании или масштабировании карты или задается разработчиком с учетом местоположения устройства и радиуса. Если радиус неизвестен, подходящим значением по умолчанию для элемента "Базовое автозаполнение мест" считается 5 км. Не используйте следующие области просмотра: с нулевым радиусом (точку); маленького размера (менее 100 м); охватывающую весь мир.

Как ограничить поиск мест определенными странами

Чтобы ограничить поиск мест одной или несколькими странами, с помощью свойства includedRegionCodes укажите коды стран, как показано в следующем примере кода:

const pac = new google.maps.places.BasicPlaceAutocompleteElement({
  includedRegionCodes: ['us', 'au'],
});

Как ограничить поиск мест границами карты

Чтобы ограничить поиск мест границами карты, с помощью свойства locationRestrictions добавьте границы, как показано в следующем примере кода:

const pac = new google.maps.places.BasicPlaceAutocompleteElement({
  locationRestriction: map.getBounds(),
});

При ограничении по границам карты обязательно добавьте прослушиватель, чтобы обновлять границы при их изменении:

map.addListener('bounds_changed', () => {
  autocomplete.locationRestriction = map.getBounds();
});

Чтобы свойство locationRestriction не применялось, присвойте ему значение null.

Как использовать предпочтения для результатов поиска

Чтобы отдавать предпочтения результатам в ограниченной окружностью области, используйте свойство locationBias и передайте радиус, как показано в следующем примере:

const autocomplete = new google.maps.places.BasicPlaceAutocompleteElement({
  locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}},
});

Чтобы свойство locationBias не применялось, присвойте ему значение null.

Как ограничить результаты поиска мест определенными типами

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

const autocomplete = new google.maps.places.BasicPlaceAutocompleteElement({
  includedPrimaryTypes: ['establishment'],
});

Полный список поддерживаемых типов можно найти в таблицах А и Б.

Как настроить элемент запроса места

Добавьте прослушиватель, чтобы обновлять элемент Place Request, когда пользователь выбирает подсказку: 

// Event listener for when a place is selected from the autocomplete list.
placeAutocompleteElement.addEventListener('gmp-select', (event) => {
    // Reset marker and InfoWindow, and prepare the details element.
    placeDetailsParent.appendChild(placeDetailsElement);
    placeDetailsElement.style.display = 'block';
    advancedMarkerElement.position = null;
    infoWindow.close();

    // Request details for the selected place.
    const placeDetailsRequest = placeDetailsElement.querySelector(
        'gmp-place-details-place-request'
    );
    placeDetailsRequest.place = event.place.id;
});

В этом примере показано, как добавить элемент Basic Autocomplete на карту Google.

JavaScript

const placeAutocompleteElement = document.querySelector(
    'gmp-basic-place-autocomplete'
);
const placeDetailsElement = document.querySelector('gmp-place-details-compact');
const placeDetailsParent = placeDetailsElement.parentElement;
const gmpMapElement = document.querySelector('gmp-map');

async function init() {
    // Asynchronously load required libraries from the Google Maps JS API.
    const [{ AdvancedMarkerElement }, { InfoWindow, Circle }, { Size }] =
        await Promise.all([
            google.maps.importLibrary('marker'),
            google.maps.importLibrary('maps'),
            google.maps.importLibrary('core'),
            google.maps.importLibrary('places'),
        ]);

    // Get the initial center directly from the gmp-map element's property.
    const center = gmpMapElement.center;

    // Set the initial location bias for the autocomplete element.
    placeAutocompleteElement.locationBias = center;

    // Update the map object with specified options.
    const map = gmpMapElement.innerMap;
    map.setOptions({
        clickableIcons: false,
        mapTypeControl: false,
        streetViewControl: false,
    });

    // Create an advanced marker to show the location of a selected place.
    const advancedMarkerElement = new AdvancedMarkerElement({
        map,
        collisionBehavior: 'REQUIRED_AND_HIDES_OPTIONAL',
    });

    // Create an InfoWindow to hold the place details component.
    const infoWindow = new InfoWindow({
        minWidth: 360,
        disableAutoPan: true,
        headerDisabled: true,
        pixelOffset: new Size(0, -10),
    });

    // Event listener for when a place is selected from the autocomplete list.
    placeAutocompleteElement.addEventListener('gmp-select', (event) => {
        // Reset marker and InfoWindow, and prepare the details element.
        placeDetailsParent.appendChild(placeDetailsElement);
        placeDetailsElement.style.display = 'block';
        advancedMarkerElement.position = null;
        infoWindow.close();

        // Request details for the selected place.
        const placeDetailsRequest = placeDetailsElement.querySelector(
            'gmp-place-details-place-request'
        );
        placeDetailsRequest.place = event.place.id;
    });

    // Event listener for when the place details have finished loading.
    placeDetailsElement.addEventListener('gmp-load', () => {
        const location = placeDetailsElement.place?.location;
        if (!location) {
            advancedMarkerElement.position = null;
            return;
        }

        // Position the marker and open the InfoWindow at the place's location.
        advancedMarkerElement.position = location;
        infoWindow.setContent(placeDetailsElement);
        infoWindow.open({
            map,
            anchor: advancedMarkerElement,
        });
        map.setCenter(location);
    });

    // Event listener to close the InfoWindow when the map is clicked.
    map.addListener('click', () => {
        infoWindow.close();
        advancedMarkerElement.position = null;
    });

    // Event listener for when the map finishes moving (panning or zooming).
    map.addListener('idle', () => {
        const newCenter = map.getCenter();

        // Update the autocomplete's location bias to a 10km radius around the new map center.
        placeAutocompleteElement.locationBias = new Circle({
            center: newCenter,
            radius: 10000, // 10km in meters.
        });
    });
}

void init();

CSS

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

gmp-map {
    height: 100%;
}

gmp-basic-place-autocomplete {
    position: absolute;
    height: 30px;
    width: 500px;
    top: 10px;
    left: 10px;
    box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.2);
    color-scheme: light;
    border-radius: 10px;
}

HTML

<html>
    <head>
        <title>Basic Place Autocomplete map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            zoom="12"
            center="37.4220656,-122.0840897"
            map-id="DEMO_MAP_ID">
            <gmp-basic-place-autocomplete
                slot="control-inline-start-block-start"></gmp-basic-place-autocomplete>
        </gmp-map>
        <!-- Use inline styles to configure the Place Details Compact element because
     it will be placed within the info window, and info window content is inside 
     the shadow DOM when using <gmp-map> -->
        <gmp-place-details-compact
            orientation="horizontal"
            style="
                width: 400px;
                display: none;
                border: none;
                padding: 0;
                margin: 0;
                background-color: transparent;
                color-scheme: light;
            ">
            <gmp-place-details-place-request></gmp-place-details-place-request>
            <gmp-place-standard-content></gmp-place-standard-content>
        </gmp-place-details-compact>
    </body>
</html>