ローカルコンテキストの検索範囲の調整

LocalContextMapView スポット検索の locationRestriction パラメータを、デフォルトの状態（地図ビューポートにより厳密に固定）から変更することができます。このサンプルでは、locationRestriction の範囲を地図の最初のビューポートよりも大きく設定しています。スポット選択ツールでスポットをクリックすると、地図が移動し、選択したスポットが表示されることを確認してみましょう。

ソースコードを表示

TypeScript

let map: google.maps.Map;

function initMap() {
  const center = { lat: 37.4219998, lng: -122.0840572 };
  const bigBounds = {
    north: 37.432,
    south: 37.412,
    west: -122.094,
    east: -122.074,
  };
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [{ type: "restaurant" }],
    maxPlaceCount: 12,
    locationRestriction: bigBounds,
    directionsOptions: { origin: center },
  });

  map = localContextMapView.map!;

  new google.maps.Marker({ position: center, map: map });

  map.setOptions({
    center: center,
    zoom: 16,
  });
}index.ts

JavaScript

let map;

function initMap() {
  const center = { lat: 37.4219998, lng: -122.0840572 };
  const bigBounds = {
    north: 37.432,
    south: 37.412,
    west: -122.094,
    east: -122.074,
  };
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: [{ type: "restaurant" }],
    maxPlaceCount: 12,
    locationRestriction: bigBounds,
    directionsOptions: { origin: center },
  });

  map = localContextMapView.map;
  new google.maps.Marker({ position: center, map: map });
  map.setOptions({
    center: center,
    zoom: 16,
  });
}
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

<!DOCTYPE html>
<html>
  <head>
    <title>Local Context Restrictions</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=localContext&v=beta"
      async
    ></script>
  </body>
</html>sample.html

let map; function initMap() { const center = { lat: 37.4219998, lng: -122.0840572 }; const bigBounds = { north: 37.432, south: 37.412, west: -122.094, east: -122.074, }; const localContextMapView = new google.maps.localContext.LocalContextMapView({ element: document.getElementById("map"), placeTypePreferences: [{ type: "restaurant" }], maxPlaceCount: 12, locationRestriction: bigBounds, directionsOptions: { origin: center }, }); map = localContextMapView.map; new google.maps.Marker({ position: center, map: map }); map.setOptions({ center: center, zoom: 16, }); }

/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* 省略可: サンプルページをウィンドウ全体に表示します。*/ html, body { height: 100%; margin: 0; padding: 0; }

<!DOCTYPE html> <html> <head> <title>Local Context Restrictions</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>  </head> <body> <div id="map"></div>  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=localContext&v=beta&channel=2" async ></script> </body> </html>

サンプルを試す

CodeSandbox.io

Stackblitz.com

GitPod.io

Google Cloud Shell

コードを理解する

ローカルコンテキストの検索範囲の指定

LatLngBounds プロパティで locationRestriction の厳密に固定した検索範囲を定義します。このサンプルでは、LatLngBoundsLiteral インターフェースを使用して LatLngBounds オブジェクトを作成します。

TypeScript

const bigBounds = {
  north: 37.432,
  south: 37.412,
  west: -122.094,
  east: -122.074,
};
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [{ type: "restaurant" }],
  maxPlaceCount: 12,
  locationRestriction: bigBounds,
  directionsOptions: { origin: center },
});index.ts

JavaScript

const bigBounds = {
  north: 37.432,
  south: 37.412,
  west: -122.094,
  east: -122.074,
};
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  element: document.getElementById("map"),
  placeTypePreferences: [{ type: "restaurant" }],
  maxPlaceCount: 12,
  locationRestriction: bigBounds,
  directionsOptions: { origin: center },
});
index.js

ローカルコンテキストを使った地図のビューポートと `directionsOptions` の関係

選択したスポット（POI）が現在のビューポートから外れると、ローカルコンテキストを使った地図表示が自動的に移動して、そのスポットが可視範囲内に表示されます。その際、地図を管理するコードは必要ありません。

LocalContextMapView の directionsOptions プロパティに原点を指定しない場合、選択したスポットのみを表示するようマップが移動します。

原点に directionsOptions を指定すると、地図には起点と選択したスポットの両方に加え、2 つの地点間の徒歩ルートも示されます。

TypeScript

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

JavaScript

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

ローカル コンテキストの検索範囲の調整

ソースコードを表示

TypeScript

JavaScript

CSS

HTML

サンプルを試す

コードを理解する

ローカル コンテキストの検索範囲の指定

TypeScript

JavaScript

ローカル コンテキストを使った地図のビューポートと directionsOptions の関係

TypeScript

JavaScript

サンプルを試す

ローカルコンテキストの検索範囲の調整

ローカルコンテキストの検索範囲の指定

ローカルコンテキストを使った地図のビューポートと `directionsOptions` の関係