Geocoding API v4 メソッドのデフォルトの割り当ては、1 秒あたり 25 クエリ（QPS）です。割り当ての引き上げをリクエストする方法については、[割り当ての表示と管理]をご覧ください。サービスとして [Geocoding API]を選択してください。

画像とアノテーションを表示する

欧州経済領域（EEA）のデベロッパー

Geocoding API の SearchDestinations エンドポイントは、ナビゲーションポイントや入り口などのハイパーローカルコンテキストを提供します。ユーザーエクスペリエンスを向上させるため、レスポンスには ストリートビュー Static API のパラメータを含めることができます。これにより、これらの場所に関連する画像を表示できます。

画像とアノテーションをリクエストする

画像とアノテーション情報を受け取るには、X-Goog-FieldMask ヘッダーに次のフィールドを含める必要があります。

cURL リクエストの例

curl -X POST -d '{
  "place": "places/ChIJkU89GL9ZwokRvVjWDQzhaNg"
}' \
-H 'Content-Type: application/json' \
-H "X-Goog-Api-Key: API_KEY" \
-H "X-Goog-FieldMask: destinations.navigationPoints.streetViewThumbnail,destinations.navigationPoints.entranceAnnotation,destinations.entrances.streetViewThumbnail,destinations.entrances.streetViewAnnotation" \
https://geocode.googleapis.com/v4alpha/geocode/destinations

JSON レスポンスの例

{
  "destinations": [
    {
      "entrances": [
        {
          "location": {
            "latitude": 40.7406763,
            "longitude": -74.0020733
          },
          "tags": [
            "PREFERRED"
          ],
          "place": "places/ChIJkU89GL9ZwokRvVjWDQzhaNg",
          "streetViewThumbnail": {
            "pano": "EUKaIR67fBVmpsHnXuIevA",
            "widthPx": 400,
            "heightPx": 600,
            "headingDegree": 331.06186,
            "fovDegree": 60
          },
          "streetViewAnnotation": {
            "coordinates": [
              {
                "xPx": 184.7,
                "yPx": 290.4
              },
              {
                "xPx": 213.3,
                "yPx": 289.4
              },
              {
                "xPx": 214.8,
                "yPx": 330.8
              },
              {
                "xPx": 186.0,
                "yPx": 332.5
              }
            ]
          }
        }
      ]
    }
  ]
}

注目のフィールド

レスポンスの Entrance オブジェクトと NavigationPoint オブジェクトには、次のフィールドを含む streetViewThumbnail フィールドが含まれる場合があります。

フィールド	説明	静的 API パラメータ
`pano`	特定のパノラマ ID。	`pano`
`widthPx`	画像の推奨幅。	`size`（幅部分）
`heightPx`	画像の推奨される高さ。	`size`（高さ部分）
`headingDegree`	カメラのコンパス方位（0 ～ 360）。	`heading`
`pitchDegree`	カメラの上下の角度（-90 ～ 90）。	`pitch`
`fovDegree`	水平画角（0 ～ 120）。	`fov`

画像をリクエストする

ストリートビュー画像をリクエストするには、streetViewThumbnail オブジェクトの値を使用して Street View Static API の URL を作成します。

URL の例

次の例は、構築されたストリートビュー Static API の URL です。

https://maps.googleapis.com/maps/api/streetview?size=400x600&pano=EUKaIR67fBVmpsHnXuIevA&heading=331.06186&fov=60&key=YOUR_API_KEY&signature=YOUR_SIGNATURE

サンプルコード: TypeScript

次の TypeScript 関数は、Destinations エンドポイントの出力から Static ストリートビュー API の URL を作成する方法を示しています。

interface StreetViewThumbnail {
  pano: string;
  widthPx: number;
  heightPx: number;
  headingDegree: number;
  pitchDegree: number;
  fovDegree: number;
}

function getStreetViewUrl(thumbnail: StreetViewThumbnail, apiKey: string): string {
  const params = new URLSearchParams({
    size: `${thumbnail.widthPx}x${thumbnail.heightPx}`,
    pano: thumbnail.pano,
    heading: thumbnail.headingDegree.toString(),
    pitch: thumbnail.pitchDegree.toString(),
    fov: thumbnail.fovDegree.toString(),
    key: apiKey,
  });

  return `https://maps.googleapis.com/maps/api/streetview?${params.toString()}`;
}

画像アノテーション

Entrance または NavigationPoint が返された場合、streetViewAnnotation フィールドまたは entranceAnnotation フィールドに対応するエントランスの画像アノテーションが含まれることもあります。これにより、サムネイル画像内の入り口を囲むポリゴンのピクセル座標が提供されます。

これらのアノテーションは、クライアントサイドレンダリングを目的としています。これらを使用して、Static API から返された画像の上にオーバーレイ（SVG や <canvas> などを使用）を描画できます。

アノテーション座標系

原点 (0,0) は画像の左上隅です。

xPx: 左端からの水平距離。
yPx: 上端からの垂直距離。

ポリゴンが正しく配置されるようにするには、widthPx と heightPx で指定された size を使用して、Static API から画像をリクエストする必要があります。

サンプルコード: 注釈の描画（TypeScript と SVG）

この例では、TypeScript と SVG を使用して、ストリートビュー画像に入口アノテーションポリゴンをオーバーレイする方法を示します。

TypeScript

interface Coordinate {
  xPx: number;
  yPx: number;
}

interface StreetViewAnnotation {
  coordinates: Coordinate[];
}

function drawAnnotations(annotation: StreetViewAnnotation, width: number, height: number) {
  const svg = document.getElementById('annotation-overlay') as unknown as SVGSVGElement;
  const polygon = document.getElementById('entrance-polygon') as unknown as SVGPolygonElement;

  // Set SVG dimensions to match the image
  svg.setAttribute('width', width.toString());
  svg.setAttribute('height', height.toString());
  svg.setAttribute('viewBox', `0 0 ${width} ${height}`);

  // Construct points string for the polygon
  const points = annotation.coordinates
    .map(coord => `${coord.xPx},${coord.yPx}`)
    .join(' ');

  polygon.setAttribute('points', points);
}

// Example usage:
const annotation = {
  coordinates: [
    {xPx: 184.7, yPx: 290.4},
    {xPx: 213.3, yPx: 289.4},
    {xPx: 214.8, yPx: 330.8},
    {xPx: 186.0, yPx: 332.5}
  ]
};
drawAnnotations(annotation, 400, 600);

HTML

<div style="position: relative; display: inline-block;">
  <!-- The Street View image from the previous step -->
  <img id="street-view-image" src="STREET_VIEW_IMAGE" alt="Street View" style="display: block;">

  <!-- SVG overlay for annotations -->
  <svg id="annotation-overlay" style="position: absolute; top: 0; left: 0; pointer-events: none;">
    <polygon id="entrance-polygon" points="" style="fill:rgba(0, 255, 17, 0.3);stroke:rgba(0, 255, 17, 0.9);stroke-width:3" />
  </svg>
</div>

次のように表示されます。

フィードバック

これは Geocoding API の試験運用版の機能です。フィードバックは geocoding-feedback-channel@google.com までお寄せください。