基本的な 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
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <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 コンストラクタの 3 つの必須パラメータは、地図表示のコンテナとなるドキュメントオブジェクトモデル（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

ローカルコンテキストの地図のビューポートを定義する

Place Search の 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

基本的な LocalContextMapView

ソースコードを表示

TypeScript

JavaScript

CSS

HTML

サンプルを試す

コードを理解する

ローカル コンテキストの地図のオプション

TypeScript

JavaScript

ローカル コンテキストの地図のビューポートを定義する

TypeScript

JavaScript

サンプルを試す

ローカルコンテキストの地図のオプション

ローカルコンテキストの地図のビューポートを定義する