Начало работы

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

Как включить необходимые API и SDK

Чтобы использовать библиотеку локального контекста, необходимо включить Maps JavaScript API и Places API. Для этого выполните инструкции из раздела о том, как включить один или несколько API или SDK. Обратите внимание, что оба API нужно включить в одном проекте в Google Cloud Console.

Как загрузить библиотеку локального контекста

Загрузите Maps JavaScript API обычным образом и укажите перечисленные ниже параметры.

  • libraries=localContext используется для загрузки библиотеки локального контекста.
  • v=beta является обязательным для использования этого выпуска.
  • key содержит ключ API.
  • callback выполняет функцию initMap().

В следующем примере показан тег скрипта со всеми описанными выше параметрами:

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

Как создать новый режим карты с локальным контекстом

Чтобы добавить библиотеку локального контекста на веб-страницу, сначала создайте экземпляр LocalContextMapView и задайте нужные свойства:

  • element – элемент div, в котором нужно показать карту (в данном случае он называется "map").
  • placeTypePreferences – типы мест, которые должна вернуть библиотека локального контекста (до 10).
  • maxPlaceCount – максимальное число мест, которое можно показать (от 1 до 24).
  • locationRestriction (необязательный) – ограничивает поиск по местам определенным местоположением. По умолчанию соответствует видимой области карты.

После получения экземпляра LocalContextMapView вы можете задать параметры карты для внутреннего экземпляра Map. Карта, которую содержит LocalContextMapView, поддерживает те же параметры карты, что и стандартная карта Maps JavaScript API. В следующем примере показано, как создать новый экземпляр LocalContextMapView и задать несколько параметров для внутреннего объекта Map:

TypeScript

let map: google.maps.Map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [
      { type: "restaurant" },
      { type: "tourist_attraction" },
    ],
    maxPlaceCount: 12,
  });

  map = localContextMapView.map!;

  map.setOptions({
    center: { lat: 51.507307, lng: -0.08114 },
    zoom: 14,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [
      { type: "restaurant" },
      { type: "tourist_attraction" },
    ],
    maxPlaceCount: 12,
  });

  map = localContextMapView.map;
  map.setOptions({
    center: { lat: 51.507307, lng: -0.08114 },
    zoom: 14,
  });
}

window.initMap = initMap;
index.js

Как отложить загрузку данных локального контекста

Вы можете отложить загрузку данных локального контекста при инициализации, установив для параметра LocalContextMapView maxPlaceCount значение 0. Это удобно в ситуациях, когда нужно подождать, пока пользователи будут готовы увидеть данные. Когда уже можно загружать данные локального контекста, задайте для параметра maxPlaceCount значение 1 или больше. В следующем примере показано, как выполнить инициализацию карты без загрузки данных локального контекста, а затем задать maxPlaceCount, чтобы загрузить данные:

// Initialize without Local Context data.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 0, // Avoids an automatic call to load places during initialization.
  });

//...

// Show places now.
localContextMapView.maxPlaceCount = 12;

Как включить и отключить интерфейс локального контекста

Вы можете отключить отображение элементов интерфейса локального контекста, задав для параметра LocalContextMapView maxPlaceCount значение 0. Чтобы снова показать их, задайте для параметра maxPlaceCount значение 1 или больше.

Как задать минимальные размеры карты

Библиотека локального контекста настраивает область отображения в зависимости от отрисованного размера LocalContextMapView. Минимальные поддерживаемые размеры для LocalContextMapView:

  • 300 x 480 пикселей (вертикальное расположение);
  • 480 x 380 пикселей (горизонтальное расположение).

Если элемент, содержащий LocalContextMapView, становится меньше минимальных поддерживаемых размеров, элементы библиотеки локального контекста, в том числе средства выбора места и объекты инфраструктуры, скрываются. Масштаб браузера влияет на минимальные поддерживаемые размеры. Например, если окно браузера увеличено до 200 %, минимальные поддерживаемые размеры будут составлять 600 x 960 пикселей в вертикальном расположении и 960 x 760 пикселей в горизонтальном.

Рекомендации по CSS

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

  • Не используйте классы CSS библиотеки локального контекста, поскольку разработчики могут их изменить без уведомления.
  • Не настраивайте стиль, не изменяйте и не выбирайте элементы в DOM библиотеки локального контекста.

Если использовать фреймворк CSS, который вносит такие изменения, конфликтов стиля можно избежать.

Например, если вы хотите установить для всей страницы параметр box-sizing равным border-box:

  • Используйте переопределение box-sizing, которое задает для элемента <html> значение border-box.
  • Используйте box-sizing: initial для элемента, который содержит представление карты с отображением локального контекста.
  • Для все остальных элементов установите box-sizing: inherit.

В таком случае в DOM библиотеки локального контекста для параметра box-sizing будет установлено стандартное значение с селектором низкой специфичности.

Код для этого примера будет выглядеть следующим образом:

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

.container-for-google-maps {
  box-sizing: initial;
}