クラウドベースのマップのスタイル設定の一部として、ベクトル地図を導入しました。今後数週間以内に JavaScript API 経由で一般提供する予定です。これにより、Google マップのウェブ エクスペリエンスでおなじみの WebGL でアクセラレーションされた高パフォーマンスな地図を、初めてウェブアプリでも利用できるようになります。WebGL は低レベルのブラウザ API であり、クライアント デバイス上の GPU の処理能力とレンダリング能力をブラウザが利用できるようにすることで、複雑な 2D と 3D グラフィックスをウェブ上でレンダリング可能にします。
本日 Maps JavaScript API ベータ版の新機能として、傾斜と回転、そして WebGL Overlay View の 2 つをリリースします。これらはいずれも WebGL を利用した機能です。これらの機能の動作を確認するには、WebGL 機能のガイドツアーおよび Ubilabs の皆さんが構築した WebGL 旅行のデモをご覧ください。
チルトと回転これまで、地図の表示方法は真上から基本地図を見る 2 次元ビューに限定されていました。チルトと回転機能を使用すると、読み込み時と実行時の両方で、67.5 度の傾きと 360 度の回転が可能になり、地図のまったく新しいビューをユーザーに提供できるようになります。これは斜め視点からの 3D の建物モデルが初めてウェブアプリで表示できるようになったということでもあります。
 |
チルトと回転機能が、Maps JavaScript API のベータ版で利用可能になりました。
|
|
また、キーボードとマウスによる制御が追加され、ユーザーが地図の傾斜と回転を手動で変更できるようにもなっています。これにより、ウェブアプリでまったく新しいレベルのユーザー操作が可能になります。
WebGL Overlay View
チルトと回転を使用して基本地図を 3 次元で制御できることに興味を引かれる方であれば、WebGL Overlay View も気に入っていただけると思います。これはベクトル地図のレンダリングに使用する WebGL レンダリング表現を背景地図の上に直接重ね合わせて操作できるようにようにするという、まったく新しいマッピング エクスペリエンスの構築方法を提供します。
class google.maps.WebglOverlayView {
onAdd() {}
onRemove() {}
onContextRestored(gl) {}
onDraw(gl, coordinateTransformer) {}
onContextLost() {}
}
WebGL Overlay View により、初めて 2 次元と 3 次元のオブジェクトを基本地図に直接レンダリングできるようになりました。つまり、レンダリングされたオブジェクトが地図に表示されるだけでなく、オクルージョンとパースペクティブを備えた 3 次元空間で地図の一部としてレンダリングされます。たとえば、こちらの WebGL Overlay View による 3D マーカーの実装をご覧ください。地図が回転するとマーカーが建物に隠れてビューから非表示になり、カメラから離れるにつれてマーカーが小さくなるのを確認頂けると思います。
 |
| WebGL Overlay View（ベータ版）で基本地図に直接レンダリング
|
使用を開始するには、WebGL の Codelab とドキュメントをご参照ください。Google I/O のセッションに参加できなかった場合は、Travis McPhail のセッション Next generation Maps for the web（ウェブ向けの次世代マップ）で詳細をご覧ください。こちらは、オンデマンドで視聴できます。
JavaScript 向けのクラウドベースのマップスタイル設定が一般提供に
2020 年 6 月にクラウドベースのマップスタイル設定機能のベータ版をリリースしました。これは、Google Cloud Console から地図をカスタマイズ、管理、デプロイできる一連の新機能です。この機能には直感的な UI ベースのスタイル エディタが Cloud コンソール上に導入されており、ズームレベルのカスタマイズから商業地域のカスタム スタイル設定まで、地図の外観と動作を細かくカスタマイズできます。さらに、業界別に最適化されたマップスタイルを導入し、地図の作成後すぐに配信できるようにしました。
このたび、クラウドベースのマップスタイル設定を Maps JavaScript API と Maps Static API で正式に一般提供します。お客様のチーム全体でより良い地図を作成できるように、これまでの 11 か月間、コンソール内のエクスペリエンスと全体のパフォーマンスを改善してまいりました。
 |
クラウドベースのマップスタイル設定を使用して地図のカスタマイズや管理を行います
|
スウェーデンで業界をリードする不動産プラットフォームである Hemnet のプロダクト チームは、クラウドベースのマップスタイル設定に移行することですでにメリットを得ています。Hemnet のプロダクト マネージャーである Magnus Burell 氏は、次のように述べています。「最近、私たちのチームは、お休み中のお客様に喜んでいただくために、不動産地図のスタイルを一時的に変更しました。クラウドベースのマップスタイル設定によって、このアイデアをすばやく簡単に実現できました。さまざまなマップスタイルに繰り返し手を加えてはプレビューするという作業を数分以内で行い、デプロイしなくてもすぐに公開できました。」
 |
Hemnet は復活祭の際に地図のスタイルを変更しました。 |
クラウドベースのマップスタイル設定をベータ版でお試しいただいている皆様にお礼を申し上げます。他の Google プロダクトにおけるものも含めて、お客様からのフィードバックは一般提供を開始するうえでたいへん貴重です。カスタム地図によって毎日数千万もの新しい地図表現が配信されていることを大変嬉しく思います。
詳しくは、クラウドベースのマップスタイル設定に関する I/O 2021 セッションをご覧ください。また、Maps JavaScript API や Maps Static API のドキュメントもご確認いただけます。VCCP London がクラウドベースのマップスタイル設定を利用して「Cadbury Worldwide Hide」の仮想イースター エッグ ハントを実現した方法も、ぜひご一読ください。
次のステップ
Google は、今回ご紹介した新機能のレンダリングとパフォーマンスの改善に引き続き取り組んでおり、現実世界と同じくらい豊かなエクスペリエンスを生み出す地図の作成に絶えず努めています。そのためにはお客様のご協力が不可欠です。新しい地図機能を改善できるよう、バグレポート、機能リクエスト、フィードバックを公開バグトラッカーからお寄せくださいますよう、お願いいたします。
16 年ほど前に最初の Google Maps API を提供して以来、地図の概念を覆すお客様のあらゆる手法から刺激をいただいてきました。チルトと回転、WebGL Overlay View、クラウドベースのマップスタイル設定は、新世代のマッピング エクスペリエンスの作成を支援する取り組みの最新の成果です。お客様がどのような素晴らしい地図を作成されるのか、拝見するのを楽しみにしています。
Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やご意見はページ右上の「お問い合わせ」より承っております。
Posted by
丸山 智康 (Tomoyasu Maruyama) - Developer Relations Engineer
