進化する 3D Maps：3D 開発を効率化し、魅力あふれるエクスペリエンスを構築できる新機能が登場
Haylee Conradi
Product Manager, Google Maps Platform
※この投稿は米国時間 2024 年 9 月 25日に、Google Maps Platform blog に投稿されたものの抄訳です。
今年の Google I/O で、Maps JavaScript API の新機能として Photorealistic 3D Maps を発表しました。それ以来、皆様の 3D Maps の使い方に刺激を受け、皆様から寄せられるフィードバックを大切にしてきました。そしてこのたび発表した試験運用版の大幅なアップデートにより、没入感のある魅力的なマップ エクスペリエンスがいっそう簡単に構築できるようになりました。今回発表した、JavaScript の 3D Maps で使える一連の新機能により、デベロッパーの皆様は 3D 開発を効率化し、ユーザーにとって直感的で魅力的なエクスペリエンスを提供し、実世界のマップ エクスペリエンスのカスタマイズ性を高めるためのツールを手に入れることができます。
3D Maps JavaScript の新機能
もっと直感的に探索できるようにする
特に 3D で世界を探索する場合など、優れたユーザー エクスペリエンスのためには、スムーズで直感的なナビゲーションが非常に重要です。そうした観点から、直感的なマップ探索コントロールを 3D インターフェースに直接追加しました。これにより、デベロッパーが複雑なコードを書かなくても、ユーザーは 3D マップを簡単にパン、ズーム、回転させ、シームレスに探索できるようになりました。その結果、導入までの流れがとてもスムーズになり、デベロッパーはアプリケーションの主要部分の設計に集中できます。
ドイツ・ベルリンの 3D マップを操作できる探索コントロール
自分で作ったマーカーで 3D エクスペリエンスに注釈をつける
ポリゴンやポリラインに加えて、より没入感のある表現を実現するために、カスタマイズ可能なマーカーが 3D シーンに完全に統合されたことで 3D マップに視覚的な要素を追加できるようになりました。マーカーのカスタマイズ オプションを使えば、ブランドの外観や雰囲気を管理したり、3D マップ内のイメージを明確にすることができ、ユーザーとのインタラクションやエンゲージメント向上にもつなげることができます。
- デフォルトのピンの色は変更可能で、ピンのアイコンも独自の画像やシンボルに置き換えることができます
- 引き出し線でマーカーを視覚的に固定できます
- コリジョンとオクルージョンの動作を設定して、ユーザー ビューを最適化できます
- カスタムの UI 要素の表示や新しいカメラ アクションの開始など、クリック イベントで特定のアクションを起動できます
オーストラリア・シドニーの観光スポットに付けられたカスタムのマーカー
プリセット カメラ パスでダイナミックなトランジションを作成する
「fly to」と「fly around」機能を備えたプリセット カメラ パスを導入することで、映画のようなダイナミックなマップ エクスペリエンスもシンプルに作成できるようにしました。これらのすぐに使えるアニメーション オプションにより、複雑なカメラ スクリプトを作成する必要がなくなり、簡単にガイド ツアーを作成したり、特定の観光スポットを周回したり、シームレスなトランジションをマップに追加したりでき、貴重な開発時間や労力を節約することができます。
fly to と fly around のカメラ機能を組み合わせて作成したシームレスなマップ アニメーション
3D モデルで視覚に訴える地図を作る
新しく追加された 3D モデルのサポートにより、カスタムの 3D 要素を表示し、3D 地理空間コンテンツを視覚化できます。これにより、gITF アセットを直接 3D マップにレンダリングできるようになりました。
オーストリア・インスブルックへの到着をシミュレートしたカスタムの 3D 飛行機
注：飛行機は Poly Pizza を利用し Poly by Google [CC-BY] で作成
POI イベントで詳細な位置情報を提供する
3D Maps は Google Maps Platform の Places API と統合されています。その Places API には 2 億 5,000 万件以上の企業やスポット（POI）の情報が含まれており、日々更新されています。クリック インタラクションを拡張したことで、ベースマップの POI とラベルのイベント リスナーを有効にできるようになりました。このイベントを活用すれば、Place Details などの他の Google Maps Platform API を統合して、3D マップ内でさらに詳細な位置情報やレビュー、写真を直接提供できます。
それでは、こうした機能を組み合わせて JavaScript の 3D Maps エクスペリエンスを向上させる方法を見てみましょう。
インタラクティブ マップ：Maps JavaScript API の Photorealistic 3D Maps を使って作成したインタラクティブな 3D マップで、ボストンの名所フリーダムトレイルをバーチャルに探索できる
これからも続々と
今回ご紹介した Maps JavaScript API の Photorealistic 3D Maps で利用できる新機能は、没入感のある魅力的なウェブ エクスペリエンスをより簡単に作成できるように設計されています。3D Maps を扱うのが初めての方はデモをご覧ください。開始方法についてさらに詳しく調べたり、ドキュメントもご覧いただけます。
Google Maps Platform は、使いやすさやアクセスのしやすさ、3D のカスタマイズや可視化のためのオプションを増やすことを重視しながら、これからも JavaScript で使える 3D Maps の機能を拡張していくことをお約束します。皆様からいただくフィードバックは、かけがえのないものです。今回ご紹介した胸躍る新機能をお試しいただき、ぜひフィードバックや機能に関するご要望をお寄せください。今後、皆様がどのような 3D マップを作成されるのかをとても楽しみにしています。
-Google Maps Platform プロダクト マネージャー、Haylee Conradi
