臨場感あふれるエクスペリエンスを構築: Maps JavaScript API の 3D Maps を利用する方法
Matt Toon
Google Maps Platform Solutions Engineer
※この投稿は米国時間 2024 年 7 月 25 日に、Google Maps Platform blog に投稿されたものの抄訳です。
Maps JavaScript API は、位置情報に基づくデータ可視化の可能性の限界を押し広げ続けてきました。今年の Google I/O で、Google Maps Platform チームは Maps JavaScript API の 3D Maps を使用して、Photorealistic 3D Maps をアプリケーションに直接統合できる機能を発表しました。
この投稿では、真に没入感の高い可視化エクスペリエンスを構築するために、この新たな機能の使用する方法をご紹介します。その他の参考情報については、新たにリリースされた Codelab もご覧ください。Maps JavaScript の Photorealistic 3D Maps を使用して 3D マップを初めて作成する方法を紹介しています。
平面から新たな次元へ
Google Earth が初めてリリースされた当時、峡谷を飛び越えたり、高層ビルの周りを旋回したりして遊んだことを覚えていますか？ 最先端の Photorealistic 3D Maps を使用すれば、この息を呑むリアルなエクスペリエンスをご使用のウェブ アプリケーションに直接組み込むことができます。今回の新たなリリースにより、都市景観、地形、ランドマークを、わずか数行のコードで驚くほど正確かつ精細にレンダリングできるようになります。
お使いのアプリケーションに 3D Maps を統合することで、以下のようなまったく新しい可能性が広がります。
-
ユーザー エンゲージメントの強化: 見慣れた周囲の環境を魅力的に表現して没入感を生み出し、アプリケーションでより深いエンゲージメントを促します。
-
直感的な探索: アプリ内のナビゲーションと探索を簡素化し、複雑な空間関係を明確化します。
-
より詳細なデータ分析情報: 3D のランドスケープの上にデータ オーバーレイを表示して、ユーザーが地理情報をより効果的かつ直感的に理解できるようにします。
利用する: 意外に低いハードル
3D Maps は、驚くほど簡単にみなさんがお使いのアプリケーションに統合できます。以下にその方法を簡単にご説明します。
-
3D Maps のウェブ コンポーネントを追加する
現行の試験運用版は、Maps JavaScript API のアルファ版チャンネルで利用することができます。このため、最初に正しいマップ ライブラリを読み込む必要があります。
ライブラリを読み込む方法は 2 つあります。1 つ目は、ライブラリ全体に直接リンクする方法です。こちらの方が、構文が大幅に簡素化されます。2 つ目は、新しい動的ライブラリ関数を使用してライブラリを参照し、実行時に必要な場合にのみクラスを読み込む方法です。こちらは、効率が優れています。どちらの方法でも、マップが有効になっているクラウド プロジェクトの特定の API キーを含め、アルファ版チャンネル（それぞれ太字で強調）が使用されていることを確認する必要があります。
スクリプトの直接読み込み
ライブラリの動的読み込み
Maps JavaScript API を読み込む方法の詳細は、こちらのドキュメントをご覧ください。
2. カメラビューを微調整する
カメラビューでの基本操作は、3D 地図オブジェクトを使用して、地球を見下ろすカメラ オブジェクトを操るように行います。下の画像に示すように、オブジェクトの視点を指定するために制御できるパラメータが複数あります。
以下の複数の値を設定して、表示される地球上のポイントを制御できます。
-
Map3DElement の center プロパティは、表示される地球上のポイントを制御します。
-
Map3DElement の range プロパティは、表示するオブジェクトとの距離を制御します。
-
Map3DElement の heading プロパティは、ポイントをどの方向から表示するかを制御します。
-
Maps3DElement の tilt プロパティは、ポイントを見下ろす角度を示します。
下のコード スニペットは、可視化される場所と、ビューの範囲および角度を指定することで、3D マップを作成する方法を示しています。前述のように、3D 地図オブジェクトは、スクリプトを直接読み込むか、動的ライブラリを読み込むことで追加できます。
スクリプトの直接読み込み
ライブラリの動的読み込み
どちらの例でも、カナダのトロントにある CN タワーが見える下のビューが表示されます。
必要に応じて、これらのプロパティをすべて組み合わせて使用します。これらのプロパティを変更して「仮想」空間のカメラを操作し、場所の移動、ユーザー操作への反応やオブジェクトに基づく表示ポイントの変更、フライスルーなどのアニメーションを実行します。
3. マップ上に対象物を追加する
ビューを制御する方法を理解したら、次のステップとして、対象物や建物を強調表示するため 3D マップにデータを追加できます。現在、この API では、ビューにラインやポリゴンを追加でき、ラインの境界におけるさまざまなレベルの色（名前と CSS を指定）と不透明度（パーセントを示す 0～1 の値）、および領域の塗りつぶし色を設定できます。
3D で作業しているため、オブジェクトの各ポイントで altitude プロパティを設定することで、ラインやポリゴンを押し出して 3 つ目の次元を加えることもできます。各ポイントは、緯度と経度のペアか、緯度、経度、高度の 3 つで構成されます。座標について詳しくは、こちらのドキュメントをご覧ください。
CN タワーの例に戻りましょう。先ほど表示されていたタワーの基部を囲むポリゴンを、マップ上に読み込むことができます。各ポイントに対して高さを指定すると、押し出されたときに地面からその高さまでのボックスが描画されます（ここでも、それぞれの利点を強調するために、直接読み込みと動的読み込みの 2 つのコード例を示します）。
直接読み込み
動的読み込み
このコードでは、実際の高さ（海抜）が使用されるよう、ポリゴンの altitudeMode プロパティを ABSOLUTE に設定します。オブジェクトの高度を処理するための複数のオプションについては、こちらのドキュメントをご覧ください。
これはポリゴンであるため、始点と終点を同じにして囲み、囲まれた空間を指定された色で塗りつぶす必要があります。ラインにはこの要件がありません。
インタラクティブなマップは、最終的にこのようになります。
この投稿では、Maps JavaScript API を使用して 3D マップを簡単に作成する方法と、プログラミング スタイルやアプリケーションのニーズに合わせて利用できるさまざまなオプションについて説明しました。
位置情報に基づくエクスペリエンスの進化
Maps JavaScript API における 3D Maps の導入は、没入型ウェブ マッピングの進化における重要なマイルストーンです。この高度な新しいツールセットを使用して、革新的で魅力的なアプリケーションが生み出されるのを楽しみにしています。
準備ができたら
追加のトレーニングをご希望の場合は、新たにリリースされた Codelab をご覧ください。Maps JavaScript API の適切なコンポーネントを読み込み、最初の 3D マップを表示してその上に対象物を描画するための基礎を学習できます。
Google は 3D マッピングの世界を深く掘り下げ、プラットフォームにさらに機能を追加していきますので、サンプルとドキュメントをぜひご確認ください。位置情報に基づくエクスペリエンスの未来を一緒に作っていきましょう。
何か問題がございましたら、Issue Tracker でメッセージをお送りください。
-Google Maps Platform ソリューション エンジニア、Matt Toon
