Подсказки мест (экспериментальная функция)

В этой статье описан экспериментальный выпуск новой и усовершенствованной версии Place Autocomplete. Автозаполнение (Autocomplete) – это функция библиотеки Places в Maps JavaScript API, которую можно добавить в приложение, чтобы оно выводило варианты названий мест при вводе текста в поле поиска Google Карт. Сервис автозаполнения может обрабатывать полные слова и их части, предлагая подходящие названия мест, адреса и коды Plus Code. Пока пользователь вводит текст, приложение может передавать запросы и сразу же предлагать похожие варианты.

Требования

В этой статье описан экспериментальный выпуск новой версии Place Autocomplete. Чтобы использовать текстовый поиск, включите Places API в проекте Google Cloud и укажите альфа-канал (v: "alpha") во встроенном загрузчике. Подробнее о начале работы…

Что нового

Вот в чем заключаются отличия экспериментальной версии Place Autocomplete:

Интерфейс виджета Autocomplete поддерживает региональную локализацию (в том числе языки с написанием справа налево) плейсхолдера ввода текста, логотипа списка подсказок, а также отображаемых подсказок.
Расширенные специальные возможности, в том числе поддержка программ чтения с экрана и взаимодействие с помощью клавиатуры.
Виджет Autocomplete возвращает новый класс Place, который помогает упростить обработку возвращаемого объекта.
Улучшенная поддержка мобильных устройств и небольших экранов.
Повышенная производительность и усовершенствованный визуальный дизайн.

Виджет Autocomplete можно добавить на веб-страницу или карту Google. Он создает на веб-странице текстовое поле, создает в интерфейсе список с подсказками мест, которые пользователь может выбрать, а в ответ на клик пользователя (определяется с помощью прослушивателя gmp-placeselect) возвращает данные о выбранном месте. В этом разделе показано, как добавить виджет Autocomplete на веб-страницу или карту Google.

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

TypeScript

// Request needed libraries.
//@ts-ignore
const [{ Map }] = await Promise.all([
    google.maps.importLibrary("places"),
]);
// Create the input HTML element, and append it.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
document.body.appendChild(placeAutocomplete);index.ts

JavaScript

// Request needed libraries.
//@ts-ignore
const [{ Map }] = await Promise.all([google.maps.importLibrary("places")]);
// Create the input HTML element, and append it.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

//@ts-ignore
document.body.appendChild(placeAutocomplete);
index.js

Ознакомьтесь полным примером кода.

Чтобы добавить виджет Autocomplete на карту, создайте новый элемент input, а затем на его основе создайте экземпляр google.maps.places.PlaceAutocompleteElement. Добавьте PlaceAutocompleteElement в div и передайте на карту в виде пользовательского элемента управления, как показано в примере ниже:

TypeScript

//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
placeAutocomplete.id = 'place-autocomplete-input';

const card = document.getElementById('place-autocomplete-card') as HTMLElement;
//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);index.ts

JavaScript

//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

//@ts-ignore
placeAutocomplete.id = "place-autocomplete-input";

const card = document.getElementById("place-autocomplete-card");

//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);index.js

Ознакомьтесь полным примером кода.

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

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

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

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

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

const pac = new google.maps.places.PlaceAutocompleteElement({
  inputElement: input,
  componentRestrictions: {country: ['us', 'au']},
});

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

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

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

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

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

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

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

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

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

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

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

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

const autocomplete = new google.maps.places.PlaceAutocompleteElement({
  inputElement: input,
  types: ['establishment'],
});

Полный список поддерживаемых типов можно найти в разделе Таблица 3. Типы, которые можно использовать в запросах подсказок мест.

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

Чтобы получить сведения о выбранном месте, добавьте прослушиватель gmp-place-select в экземпляр PlaceAutocompleteElement, как показано в следующем примере:

TypeScript

// Add the gmp-placeselect listener, and display the results.
//@ts-ignore
placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
    await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });

    selectedPlaceTitle.textContent = 'Selected Place:';
    selectedPlaceInfo.textContent = JSON.stringify(
        place.toJSON(), /* replacer */ null, /* space */ 2);
});index.ts

JavaScript

// Add the gmp-placeselect listener, and display the results.
//@ts-ignore
placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });
  selectedPlaceTitle.textContent = "Selected Place:";
  selectedPlaceInfo.textContent = JSON.stringify(
    place.toJSON(),
    /* replacer */ null,
    /* space */ 2,
  );
});index.js

Ознакомьтесь полным примером кода.

В примере выше прослушиватель событий возвращает объект класса Place. Вызовите place.fetchFields(), чтобы получить необходимые для вашего приложения поля данных Place Details.

Прослушиватель в примере ниже запрашивает информацию о месте и показывает ее на карте.

TypeScript

// Add the gmp-placeselect listener, and display the results on the map.
//@ts-ignore
placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
    await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });

    // If the place has a geometry, then present it on a map.
    if (place.viewport) {
        map.fitBounds(place.viewport);
    } else {
        map.setCenter(place.location);
        map.setZoom(17);
    }

    let content = '<div id="infowindow-content">' +
    '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
    '<span id="place-address">' + place.formattedAddress + '</span>' +
    '</div>';

    updateInfoWindow(content, place.location);
    marker.position = place.location;
});index.ts

JavaScript

// Add the gmp-placeselect listener, and display the results on the map.
//@ts-ignore
placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });
  // If the place has a geometry, then present it on a map.
  if (place.viewport) {
    map.fitBounds(place.viewport);
  } else {
    map.setCenter(place.location);
    map.setZoom(17);
  }

  let content =
    '<div id="infowindow-content">' +
    '<span id="place-displayname" class="title">' +
    place.displayName +
    "</span><br />" +
    '<span id="place-address">' +
    place.formattedAddress +
    "</span>" +
    "</div>";

  updateInfoWindow(content, place.location);
  marker.position = place.location;
});index.js

Ознакомьтесь полным примером кода.

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

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

const map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 50.064192, lng: -130.605469},
  zoom: 3,
});

const marker = new google.maps.Marker({map});
const inputElement = document.getElementById('pac-input');
const autocomplete = new google.maps.places.PlaceAutocompleteElement({inputElement});
const geocoder = new google.maps.Geocoder();

autocomplete.addListener('gmp-placeselect', async ({prediction: place}) => {
  const results = await geocoder.geocode({place.id});
  marker.setPlace({
    placeId: place.id,
    location: results[0].geometry.location,
  });
});

Примеры карт

В этом разделе приведен полный код для примеров карт, используемых на этой странице.

Элемент Autocomplete

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

TypeScript

async function initMap(): Promise<void> {
    // Request needed libraries.
    //@ts-ignore
    const [{ Map }] = await Promise.all([
        google.maps.importLibrary("places"),
    ]);
    // Create the input HTML element, and append it.
    //@ts-ignore
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
    //@ts-ignore
    document.body.appendChild(placeAutocomplete);

    // Inject HTML UI.
    const selectedPlaceTitle = document.createElement('p');
    selectedPlaceTitle.textContent = '';
    document.body.appendChild(selectedPlaceTitle);

    const selectedPlaceInfo = document.createElement('pre');
    selectedPlaceInfo.textContent = '';
    document.body.appendChild(selectedPlaceInfo);

    // Add the gmp-placeselect listener, and display the results.
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });

        selectedPlaceTitle.textContent = 'Selected Place:';
        selectedPlaceInfo.textContent = JSON.stringify(
            place.toJSON(), /* replacer */ null, /* space */ 2);
    });
}

initMap();index.ts

JavaScript

async function initMap() {
  // Request needed libraries.
  //@ts-ignore
  const [{ Map }] = await Promise.all([google.maps.importLibrary("places")]);
  // Create the input HTML element, and append it.
  //@ts-ignore
  const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

  //@ts-ignore
  document.body.appendChild(placeAutocomplete);

  // Inject HTML UI.
  const selectedPlaceTitle = document.createElement("p");

  selectedPlaceTitle.textContent = "";
  document.body.appendChild(selectedPlaceTitle);

  const selectedPlaceInfo = document.createElement("pre");

  selectedPlaceInfo.textContent = "";
  document.body.appendChild(selectedPlaceInfo);
  // Add the gmp-placeselect listener, and display the results.
  //@ts-ignore
  placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
    await place.fetchFields({
      fields: ["displayName", "formattedAddress", "location"],
    });
    selectedPlaceTitle.textContent = "Selected Place:";
    selectedPlaceInfo.textContent = JSON.stringify(
      place.toJSON(),
      /* replacer */ null,
      /* space */ 2,
    );
  });
}

initMap();index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

p {
  font-family: Roboto, sans-serif;
  font-weight: bold;
}
style.css

HTML

<html>
  <head>
    <title>Place Autocomplete element</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <p style="font-family: roboto, sans-serif">Search for a place here:</p>

    <!-- prettier-ignore -->
    <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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "alpha"});</script>
  </body>
</html>index.html

Примеры кода

JSFiddle.net Google Cloud Shell

Карта с виджетом Autocomplete

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

TypeScript

let map: google.maps.Map;
let marker: google.maps.marker.AdvancedMarkerElement;
let infoWindow: google.maps.InfoWindow;
async function initMap(): Promise<void> {
    // Request needed libraries.
    //@ts-ignore
    const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary("marker"),
        google.maps.importLibrary("places")
      ]);

    // Initialize the map.
    map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
        center: { lat: 40.749933, lng: -73.98633 },
        zoom: 13,
        mapId: '4504f8b37365c3d0',
        mapTypeControl: false,
    });
    //@ts-ignore
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
    //@ts-ignore
    placeAutocomplete.id = 'place-autocomplete-input';

    const card = document.getElementById('place-autocomplete-card') as HTMLElement;
    //@ts-ignore
    card.appendChild(placeAutocomplete);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

    // Create the marker and infowindow
    marker = new google.maps.marker.AdvancedMarkerElement({
        map,
    });

    infoWindow = new google.maps.InfoWindow({});

    // Add the gmp-placeselect listener, and display the results on the map.
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });

        // If the place has a geometry, then present it on a map.
        if (place.viewport) {
            map.fitBounds(place.viewport);
        } else {
            map.setCenter(place.location);
            map.setZoom(17);
        }

        let content = '<div id="infowindow-content">' +
        '<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
        '<span id="place-address">' + place.formattedAddress + '</span>' +
        '</div>';

        updateInfoWindow(content, place.location);
        marker.position = place.location;
    });
}

// Helper function to create an info window.
function updateInfoWindow(content, center) {
    infoWindow.setContent(content);
    infoWindow.setPosition(center);
    infoWindow.open({
        map,
        anchor: marker,
        shouldFocus: false,
    });
}

initMap();index.ts

JavaScript

let map;
let marker;
let infoWindow;

async function initMap() {
  // Request needed libraries.
  //@ts-ignore
  const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
    google.maps.importLibrary("marker"),
    google.maps.importLibrary("places"),
  ]);

  // Initialize the map.
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.749933, lng: -73.98633 },
    zoom: 13,
    mapId: "4504f8b37365c3d0",
    mapTypeControl: false,
  });

  //@ts-ignore
  const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

  //@ts-ignore
  placeAutocomplete.id = "place-autocomplete-input";

  const card = document.getElementById("place-autocomplete-card");

  //@ts-ignore
  card.appendChild(placeAutocomplete);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
  // Create the marker and infowindow
  marker = new google.maps.marker.AdvancedMarkerElement({
    map,
  });
  infoWindow = new google.maps.InfoWindow({});
  // Add the gmp-placeselect listener, and display the results on the map.
  //@ts-ignore
  placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
    await place.fetchFields({
      fields: ["displayName", "formattedAddress", "location"],
    });
    // If the place has a geometry, then present it on a map.
    if (place.viewport) {
      map.fitBounds(place.viewport);
    } else {
      map.setCenter(place.location);
      map.setZoom(17);
    }

    let content =
      '<div id="infowindow-content">' +
      '<span id="place-displayname" class="title">' +
      place.displayName +
      "</span><br />" +
      '<span id="place-address">' +
      place.formattedAddress +
      "</span>" +
      "</div>";

    updateInfoWindow(content, place.location);
    marker.position = place.location;
  });
}

// Helper function to create an info window.
function updateInfoWindow(content, center) {
  infoWindow.setContent(content);
  infoWindow.setPosition(center);
  infoWindow.open({
    map,
    anchor: marker,
    shouldFocus: false,
  });
}

initMap();index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#place-autocomplete-card {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  margin: 10px;
  padding: 5px;
  font-family: Roboto, sans-serif;
  font-size: large;
  font-weight: bold;
}

#place-autocomplete {
  width: 250px;
}

#infowindow-content .title {
  font-weight: bold;
}

#map #infowindow-content {
  display: inline;
}
style.css

HTML

<html>
  <head>
    <title>Place Autocomplete map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div class="place-autocomplete-card" id="place-autocomplete-card">
      <p>Search for a place here:</p>
    </div>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "alpha"});</script>
  </body>
</html>index.html

Примеры кода

JSFiddle.net Google Cloud Shell

Подсказки мест (экспериментальная функция)

Требования

Что нового

Добавление виджета Autocomplete

Как добавить виджет Autocomplete на веб-страницу

TypeScript

JavaScript

Как добавить виджет Autocomplete на карту

TypeScript

JavaScript

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

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

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

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

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

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

TypeScript

JavaScript

TypeScript

JavaScript

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

Примеры карт

Элемент Autocomplete

TypeScript

JavaScript

CSS

HTML

Примеры кода

Карта с виджетом Autocomplete

TypeScript

JavaScript

CSS

HTML

Примеры кода