カメラの位置を制御する

Maps JavaScript API の 3D 地図では、cameraPosition オプションを使用してカメラのフォーカスを管理します。

主な動作:

center: 緯度と経度の座標で、カメラが向いている地図上の正確な位置を指定します。
cameraPosition: カメラ自体は、構築時に指定された座標に配置されます。そのため、特定の対象物にビューの中心を合わせることが難しい場合があります。

次の例は、center オプションを使用して地図を初期化し、特定の焦点が合うようにする方法を示しています。マーカーは、center で指定された中心点を示しています。

<html>
    <head>
        <title>3D Camera Position</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
    </head>
    <body>
        <gmp-map-3d
            center="40.7860524,-73.9634983,0"
            range="1500"
            tilt="70"
            heading="-150"
            mode="satellite">
            <gmp-marker position="40.7860524,-73.9634983" altitude-mode="clamp-to-ground"></gmp-marker>
        </gmp-map-3d>

        <script
            async
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&v=weekly&libraries=maps3d"></script>
    </body>
</html>index.html

サンプルソースコードの全文を見る

CSS

gmp-map-3d {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}style.css

HTML

<html>
    <head>
        <title>3D Camera Position</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
    </head>
    <body>
        <gmp-map-3d
            center="40.7860524,-73.9634983,0"
            range="1500"
            tilt="70"
            heading="-150"
            mode="satellite">
            <gmp-marker position="40.7860524,-73.9634983" altitude-mode="clamp-to-ground"></gmp-marker>
        </gmp-map-3d>

        <script
            async
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&v=weekly&libraries=maps3d"></script>
    </body>
</html>index.html

サンプルを試す

JSFiddle.net

画角と範囲

ビューポートに表示される地図の範囲は、range と fov の 2 つの異なるパラメータを使用して調整できます。どちらもズームレベルに影響しますが、機能は異なります。

range: カメラと中心点との間の物理的な距離を制御します。これを調整すると、カメラを地図に近づけたり遠ざけたりするのと同じ効果が得られます。
fov（画角）: カメラレンズの角度を制御します。値が大きいほど広角レンズのように周辺部が広く表示され、値が小さいほど望遠レンズのように表示されます。

次の比較は、fov スペクトルの両端にある同じ地図を示しています。左の地図では、fov は 5（狭角/望遠）に設定されています。右の地図では、80（広角）に設定されています。

ゴールデンゲートブリッジの 2 つの 3D 空撮レンダリングを並べて比較した画像。左側には、橋の全景とマリンヘッドランズの広角の鳥瞰図が表示されます。右側には、赤い吊り塔と橋桁を急な下向きの角度で極端にクローズアップした写真が写っています。