このページは Cloud Translation API によって翻訳されました。

空港へのナビゲーションの改善

イメージ

空港は複数のターミナルがある大規模な複合施設であり、時間どおりに到着、出発するには正確なナビゲーションが不可欠です。通常、Google Maps Geocoding API は座標（緯度/経度）を返します。ほとんどの場合、これは大規模な空港複合施設の重心になります。このアプリは、空港内の特定のターミナルや乗降場所など、大規模な複合施設内の正確な位置を特定して可視化するために特別に設計されたインタラクティブなツールです。

イメージ

仕組みは次のとおりです。

空港/会場検索: ユーザーはまず、メインの場所（例:Google Places Autocomplete 入力を使用して、インドに限定された場所（「インディラガンディー国際空港」など）を検索します。

サブロケーションの検出: メインのロケーションが選択されると、スクリプトは Google Places API を使用して詳細情報を取得します。この情報には、その場所に関連付けられている「サブロケーション」（Google のデータで利用可能な場合、ターミナル 1、ターミナル 3、特定のゲートなど）も含まれます。

Visual Mapping: スクリプトは Geocoding API を使用して、メインの場所とそのサブ目的地の座標を検索します。

次に、メインの場所が表示され、特定された各サブ目的地に、クリック可能な個別のマーカー（青い円）が地図上に表示されます。

正確な識別: サブデスティネーションマーカーをクリックすると、マーカーがハイライト表示（緑色に変化）され、名前やその他の利用可能な詳細情報（住所やタイプなど）を示す情報ウィンドウが開きます。これにより、ユーザーは正しい特定のポイントを選択したことを確認できます。コンテキストビュー: 関連するすべてのマーカー（メインの場所 + サブ目的地）がはっきりと見えるように、地図のビュー（fitBounds）が自動的に調整されます。

空港ナビゲーションアプリの Google Maps Platform API

このドキュメントでは、提供されている「Navigate to Airport」デモアプリで使用されている主な Google Maps Platform API とそのパラメータについて説明します。このアプリは、地図の表示、場所の検索、場所の詳細情報、高度な位置情報分析を提供するために、複数のサービスを活用しています。

1. 地図の初期化と表示

アプリケーションの基盤はインタラクティブな地図そのものです。

使用する API: google.maps.Map（Maps JavaScript API から）
目的: ウェブページにインタラクティブな地図を作成して表示します。
キーパラメータ:
- center: 地図の初期地理的中心を定義します。このアプリでは、初期設定でデリーの座標（{ lat: 28.461835685621395, lng: 77.05004035761647 }）に設定されています。
- zoom: 地図の初期ズームレベルを設定します。DEFAULT_ZOOM_LEVEL（15）はクローズアップビューに使用されます。
- mapId: Google Cloud コンソールで構成された地図スタイルの固有の識別子。

2. Place Search と Autocomplete

検索バーの機能は Places API を利用しています。

使用する API: google.maps.places.Autocomplete（Maps JavaScript API の Places ライブラリ）
目的: ユーザーの入力に合わせて、地理的な検索の予測テキスト補完を提供し、空港などの関連する場所を提案します。
キーパラメータ:
- input: ユーザーがクエリを入力する HTML 入力要素（#search-input）。
- componentRestrictions: 検索結果を特定の国にフィルタします。ここで、{ country: 'in' } は検索結果をインドに制限します。
- fields: 選択した場所に対して返されるデータフィールドを指定します。['place_id'] は、最初に場所の一意の識別子のみを取得するために使用され、データ転送を最適化します。
オートコンプリートの使用方法

    // Initialize Autocomplete
    const autocomplete = new google.maps.places.Autocomplete(input, {
      componentRestrictions: { country: 'in' },
      fields: ['place_id'],
    });

    // Add listener to the Autocomplete
    autocomplete.addListener('place_changed', async () => {
      const place = autocomplete.getPlace();
      if (!place.place_id) {
        return;
      }
      // Once a place is selected, fetch details
      await getPlaceDetails(place.place_id);
    });

3. 場所の詳細情報の取得とサブ目的地の処理

予測入力候補から場所が選択されると、より詳細な情報が取得されます。

使用した API: Places API（https://places.googleapis.com/v1/places/{placeId} への直接 fetch 呼び出し経由）
目的: 特定の場所に関する詳細情報（表示名、住所、種類、subDestinations（空港などの大きな複合施設内の個々のターミナルや重要なエリアなど））を取得します。
URL のキーパラメータ:
1. {placeId}: 選択した場所の固有識別子。
2. fields: 取得するデータフィールドを正確に指定します。アプリは id、displayName、subDestinations、types、formattedAddress をリクエストします。これは、費用を制御し、必要なデータのみを受信するために不可欠です。
位置情報から subDestinations を取得する方法

async function getPlaceDetails(placeId) {
  // Construct the URL for the Places API (v1) details endpoint
  // The 'fields' parameter is crucial for requesting subDestinations
  const url = `https://places.googleapis.com/v1/places/${placeId}?key=YOUR_API_KEY&fields=id,displayName,subDestinations,types,formattedAddress`;

  const response = await fetch(url);
  const data = await response.json();

  // Accessing subDestinations from the Places API response
  if (data.subDestinations && data.subDestinations.length > 0) {
    for (const subDestination of data.subDestinations) {
      // Each subDestination object contains an 'id' and 'displayName'
      console.log(`Sub-destination ID: ${subDestination.id}`);
      console.log(`Sub-destination Name: ${subDestination.displayName?.text}`);
      // This subDestination.id is then used in a geocoding call (as shown in section 4)
    }
  }
}

**Handling `subDestinations`:** When the Places API returns
`subDestinations`, the application initiates a process for each one:
1.  **Geocoding:** It uses the `google.maps.Geocoder` to convert
    each `subDestination.id` into its precise geographical coordinates
    (`lat`, `lng`).
1.  **Marker Placement:** A distinct marker is added to the map for
    each sub-destination. These markers are styled with a blue circle icon
    to differentiate them.
1.  **Map Bounds Adjustment:** The `google.maps.LatLngBounds` object
    is used to dynamically expand the map's view to encompass all retrieved
    sub-destinations, verifying they are all visible within the current map
    frame.
1.  **Interactive Information Window:** A `click` listener is
    attached to each sub-destination marker. When clicked, the marker's
    icon changes to green, and an `InfoWindow` appears, displaying the
    sub-destination's name, address, and types. This provides immediate,
    detailed context to the user.

4. ジオコーディングとリバースジオコーディング: サブデスティネーションの詳細を取得する

このアプリでは、ジオコーディングは主に、プレイス ID を座標に変換することと、座標を位置情報詳細に変換することの 2 つの目的で使用されます。このセクションでは、特に、ジオコーディングを使用してサブデスティネーションに関する詳細情報を取得する方法について説明します。

使用される API: google.maps.Geocoder（Maps JavaScript API から）と Geocoding API（https://maps.googleapis.com/maps/api/geocode/json への直接の fetch 呼び出し経由）
目的:
- google.maps.Geocoder: placeId（Autocomplete API または Places API から取得）を地理座標（lat、lng）とビューポートに変換するために使用されます。これにより、地図上で選択した場所とそのサブ目的地が正しく中央に表示され、ズームされます。
- Geocoding API（fetch）: 逆ジオコーディング（緯度と経度を人間が読める住所に変換）や、建物の輪郭やナビゲーションポイントなどの高度な位置情報を取得するために使用されます。
キーパラメータ:
- google.maps.Geocoder.geocode():
  - placeId: ジオコーディングするプレイス ID。
  - location: リバースジオコーディング用の LatLng オブジェクト。
- Geocoding API fetch 呼び出し:
  - latlng: リバースジオコーディングの緯度と経度の座標。
  - extra_computations=BUILDING_AND_ENTRANCES: この重要なパラメータは、追加のデータ（具体的には建物のフットプリントと入り口の情報）をリクエストします。このデータは、建物の輪郭とナビゲーションポイントを表示するために使用されます。

subDestination ID を使用して詳細情報（位置情報、書式設定された住所、タイプなど）を取得する方法

function geocodeAndAddMarker(subDestination, bounds) {
  return new Promise((resolve, reject) => {
    const geocoder = new google.maps.Geocoder();
    // Using the subDestination.id to geocode and get location details
    geocoder.geocode({ placeId: subDestination.id }, (results, status) => {
      if (status === "OK" && results[0]) {
        const location = results[0].geometry.location;
        const displayName = subDestination.displayName?.text || "Sub-destination";
        const formattedAddress = results[0].formatted_address; // Further detail from Geocoding
        const types = results[0].types; // Further detail from Geocoding

        const marker = new google.maps.Marker({
          map: map,
          position: location,
          title: displayName,
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            fillColor: 'blue',
            fillOpacity: 0.6,
            strokeWeight: 0,
            scale: 8
          }
        });

        marker.addListener('click', () => {
          marker.setIcon({
            path: google.maps.SymbolPath.CIRCLE,
            fillColor: 'green',
            fillOpacity: 0.6,
            strokeWeight: 0,
            scale: 8
          });
          const infowindow = new google.maps.InfoWindow({
            content: `<b>${displayName}</b><br><p>Address: ${formattedAddress}</p><p>Types: ${types.join(', ')}</p>`,
          });
          infowindow.open(map, marker);
        });
        bounds.extend(location);
        resolve(true);
      } else {
        reject(new Error(`Geocoding failed for placeId: ${subDestination.id}`));
      }
    });
  });
}

5. マーカーの表示

マーカーは、地図上の特定の場所をハイライト表示するために使用されます。

使用する API: google.maps.Marker（Maps JavaScript API から）と google.maps.marker.AdvancedMarkerElement（Maps JavaScript API の Marker Library から）google.maps.marker.PinElement
目的:
- google.maps.Marker: 初期ドラッグ可能なマーカー（提供されたコードでは draggable が false に設定されていますが、その機能の一部です）と、セクション 3 で説明されている基本的なサブ目的地マーカーに使用されます。
- AdvancedMarkerElement と PinElement: 視覚的に区別しやすいナビゲーションポイントマーカーに使用され、マーカーのピンのカスタムスタイル設定が可能です。
キーパラメータ:
- position: マーカーが配置される LatLng 座標。
- map: マーカーが表示される地図インスタンス。
- title: マーカーにカーソルを合わせたときに表示されるテキスト。
- icon: google.maps.Marker のカスタムアイコンを許可します（例:google.maps.SymbolPath.CIRCLE（カスタムカラー付き）を返します。
- content: AdvancedMarkerElement の場合、事前スタイルのピンの PinElement など、カスタム HTML コンテンツを埋め込むことができます。
- PinElement パラメータ: background、borderColor、glyphColor、scale（外観のカスタマイズ用）。

6. 建物の輪郭を表示する

アプリケーションで建物のフットプリントを視覚的に表現できます。

使用する API: google.maps.Data（Maps JavaScript API から）
目的: 建物の輪郭（Geocoding API の extra_computations から GeoJSON display_polygon として返される）などの地理的データを表示します。
キーパラメータ:
- map: データレイヤが適用される地図インスタンス。
- style: GeoJSON フィーチャーの視覚的な外観を定義します（例: strokeColor、fillColor、fillOpacity など）を使用しようとしたときにクラッシュが発生していました。
- addGeoJson(): レイヤに GeoJSON データを追加するメソッド。

7. 地図の境界とズーム

地図ビューにすべての関連する場所が含まれていることを確認します。

使用する API: google.maps.LatLngBounds（Maps JavaScript API から）
目的: 地理座標のコレクション（メインの場所とそのすべてのサブ目的地など）に合わせて地図のビューポートを動的に調整します。
主な方法:
- extend(location): 境界に LatLng ポイントを追加します。必要に応じて境界を拡大します。
- fitBounds(bounds): LatLngBounds オブジェクトで定義された領域全体が表示されるように、地図の中心とズームレベルを調整します。

これらの Google Maps Platform API を組み合わせることで、このアプリケーションは、場所の検索、詳細の表示、関連する地理情報（サブ目的地や建物の輪郭など）の可視化のための包括的でインタラクティブなエクスペリエンスを提供します。

実装に関する考慮事項 この機能は、すべての空港エリアで利用できるわけではなく、（空港ターミナル）データの可用性に左右されます。

リソース Geocoding API Places API Maps Javascript API

作成者:

空港へのナビゲーションの改善 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。