Maps JavaScript の 3D Maps を使用すると、没入感のある 3D マップ エクスペリエンスを作成できます。地図のスタイル設定のカスタマイズ、ユーザー補助機能の改善、ユーザビリティの向上に役立つツールが用意されており、魅力的でインタラクティブなアプリケーションを開発できます。
たとえば、Maps JavaScript API の 3D 地図を使うと以下を行えます。
Maps JavaScript で 3D Maps を使用する理由
Maps JavaScript の 3D Maps では、maps3d ライブラリの Map3DElement（<gmp-map-3d>）クラスが提供されるため、さまざまなアプリケーションで Google の 3D 画像を使用できます。3D マップは組み込みの 3D レンダリング エクスペリエンスを提供し、3D の実世界環境、都市ビュー、ランドマーク ツアーを組み込んだり、テストしたりできます。
3D 地形、カメラの傾き、方角、範囲のフライオーバー、押し出し建物の 3D 表示、3D オブジェクト（Marker3DElement（<gmp-marker-3d>）など）には、3D <gmp-map-3d>（maps3d ライブラリの Map3DElement）を使用します。フラットな 2D 道路マップ、標準の 2D AdvancedMarkerElement ピン、2D ベクター スタイル設定には、2D <gmp-map>（maps ライブラリの MapElement または google.maps.Map）を使用します。
Maps JavaScript の 3D Maps でできること
- 現実世界の地図エクスペリエンスを作成する:
SATELLITEモードまたはHYBRIDモード（衛星画像にベースマップ ラベルを重ねて表示）で、都市、地形、ランドマークの写実的な 3D 航空画像をレンダリングします。または、modeプロパティを使用して、ROADMAPモードでスタイル設定された 3D ベースマップを表示します。詳細については、地図モードを変更するをご覧ください。 - 地図のスタイルをカスタマイズする:
- 3D Cloud ベースのマップのスタイル設定: 基本地図のスポットと道路の表示とスタイル設定を制御します。詳細については、3D 地図をカスタマイズするをご覧ください。
- カスタム マーカー、ポップオーバー、ポリライン、ポリゴン:
MarkerElement、Marker3DElement、Marker3DInteractiveElement、PopoverElement、Polyline3DElement、Polygon3DElementを使用して、場所を特定し、地図上に 3D ルートや境界線を描画します。詳細については、マーカー、ポップオーバー、シェイプとラインをご覧ください。 - 3D モデルと glTF アセット:
Model3DElementを使用して、建物、ランドマーク、オブジェクトのカスタム PBR glTF 3D モデルを現実世界の座標に追加します。詳細については、モデルをご覧ください。
- 没入型地図の作成:
- プリセット カメラパス:
flyCameraToとflyCameraAroundを使用して、事前定義のカメラ フライオーバーと軌道アニメーションで 3D 地図をユーザーに案内します。詳しくは、カメラパスをアニメーション化するをご覧ください。 - ユーザー操作を制御する: ユーザーが使用できるコントロールとカメラの動きをカスタマイズします。詳しくは、3D 地図の操作と探索、カメラビューと境界を制限する、カメラの位置を制御するをご覧ください。
- プリセット カメラパス:
例
maps3d ライブラリを読み込み、mode="HYBRID"、center（lat,lng,altitude）、range、tilt、heading を使用して <gmp-map-3d> 要素をレンダリングするには、次のスニペットを使用します。
<gmp-map-3d
style="height: 400px; width: 100%;"
mode="HYBRID"
center="40.7484,-73.9857,200"
range="900"
tilt="67"
heading="35">
</gmp-map-3d>
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=maps3d">
</script>
YOUR_API_KEY は、Google Maps Platform API キーに置き換えます。
Maps JavaScript で 3D Maps を使用する方法
| 1 | セットアップする | JavaScript API を設定するから始めて、その後の設定手順を完了します。 |
| 2 | Maps JavaScript API の課金方法について | 詳細については、使用量と課金をご覧ください。 |
| 3 | 地図を作成する | 詳細については、スタートガイドをご覧ください。 |
対象範囲
Photorealistic 3D の建物の 3D 表示とランドマークのメッシュは、サポートされている国と地域の一部の都市圏で利用できます。3D メッシュがカバーされていない地域（インドなど）では、<gmp-map-3d> は、3D 地形の標高に重ねられた 2D 衛星画像またはロードマップ画像をレンダリングします。建物の 3D 表示は押し出されません。3D メッシュがカバーしていないエリアのランドマークを表示するには、Model3DElement を使用して、その座標にカスタムの glTF 3D モデルを配置するか、2D の <gmp-map> を使用します。国別の提供状況（[Maps JavaScript 3D] 列）については、Google Maps Platform のサポート状況をご覧ください。