Базовое представление LocalContextMapView

Ниже показано базовое представление карты с данными локального контекста без настроек. В нем указаны обязательные свойства placeTypePreferences и maxPlaceCount, относящиеся к библиотеке локального контекста, а также базовые свойства Map – center и zoom.

Посмотреть исходный код

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

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;
}
style.css

HTML

<html>
  <head>
    <title>Local Context Basic</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 id="map"></div>

    <!--
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=localContext&v=beta"
      defer
    ></script>
  </body>
</html>index.html

Примеры кода

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

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

Параметры карты с данными локального контекста

Вместо класса google.maps.Map карту с данными локального контекста представляет класс google.maps.localContext.LocalContextMapView. У конструктора LocalContextMapView три обязательных параметра: элемент в модели DOM, который будет контейнером для представления карты, список типов мест, которые нужно включить в карту, и максимальное число отображаемых результатов поиска мест.

TypeScript

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

JavaScript

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

Определение видимой области карты с данными локального контекста

Границы поиска мест locationRestriction по умолчанию зависят от видимой области карты, которая выбирается при первом вызове google.maps.localContext.LocalContextMapView.map.setOptions(), когда для загрузки карты определяются центр и масштаб.

TypeScript

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

JavaScript

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

Последующие вызовы setOptions() не приведут к обновлению мест, отображаемых библиотекой локального контекста.

Примеры кода

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell