Пример: карта для жителей района

В этом примере мы добавили строку поиска с подсказками, чтобы пользователи могли быстро найти и ввести нужный адрес и увидеть расположенные рядом с ним места. В расчете на локальную аудиторию мы настроили с помощью placeTypePreferences показ мест, связанных с повседневными интересами. В качестве подсказок в этом примере даются только адреса в США.

Как читать код

Плотность мест разных типов

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

TypeScript

placeTypePreferences: [
  { type: "bakery", weight: 1 },
  { type: "bank", weight: 1 },
  { type: "cafe", weight: 2 },
  { type: "department_store", weight: 1 },
  { type: "drugstore", weight: 1 },
  { type: "park", weight: 3 },
  { type: "restaurant", weight: 2 },
  { type: "primary_school", weight: 3 },
  { type: "secondary_school", weight: 3 },
  { type: "supermarket", weight: 2 },
],

JavaScript

placeTypePreferences: [
  { type: "bakery", weight: 1 },
  { type: "bank", weight: 1 },
  { type: "cafe", weight: 2 },
  { type: "department_store", weight: 1 },
  { type: "drugstore", weight: 1 },
  { type: "park", weight: 3 },
  { type: "restaurant", weight: 2 },
  { type: "primary_school", weight: 3 },
  { type: "secondary_school", weight: 3 },
  { type: "supermarket", weight: 2 },
],

Place Autocomplete

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

  1. Активируйте Places API в вашем проекте.
  2. Помимо библиотеки местной среды, загрузите библиотеку Places и JavaScript API.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=localContext,places&v=beta&callback=initMap">
</script>

  1. Следуя документации по функции Autocomplete, изучите примеры кода, чтобы понять, как добавить на карту строку поиска мест с подсказками. Посмотрите, как это сделать, в примере ниже.

TypeScript

// Build and add the Autocomplete search bar
const input = document.getElementById("input")! as HTMLInputElement;
const options = {
  types: ["address"],
  componentRestrictions: {
    country: "us",
  },
  fields: ["address_components", "geometry", "name"],
};
const autocomplete = new google.maps.places.Autocomplete(input, options);

JavaScript

// Build and add the Autocomplete search bar
const input = document.getElementById("input");
const options = {
  types: ["address"],
  componentRestrictions: {
    country: "us",
  },
  fields: ["address_components", "geometry", "name"],
};
const autocomplete = new google.maps.places.Autocomplete(input, options);

Примеры кода