このたび、開発者が Google Maps Platform を利用するための新しい方法として、Web Components のプレビュー版を提供いたします。まずは、Google マップの機能と高度なマーカーの機能の Web Components にアクセスいただけるようになりますが、今後より多くの機能を追加していく予定です。さらに、オープンソースの Extended Component Library を立ち上げ、そこでプレイスデータの視覚的な表現など、より高度なコンポーネントを提供します。このライブラリでは、Maps JavaScript API がそのまま提供するものをさらに上回るベスト プラクティス、共通 UI / UX パターン、応答性、ユーザー補助機能がカプセル化されます。

Web Components はよく利用されている W3C 標準であり、開発者が HTML、CSS、JS を再利用可能なカスタムの HTML 要素にカプセル化できます。この再利用可能コンポーネントには、ある場所の評価を表示するような個々の機能から、より複雑なビジネス ロジックまで、さまざまなものがあります。Web Components は、あらゆる JS フレームワークと簡単に相互運用できるため、従来より習得時間が短く、コードがシンプルで、可読性が向上しており、開発者がより迅速に作業しやすくなっています。


この記事は Software Engineer, Google Maps Platform の Andrew Mackowski と Tech Lead, Maps JavaScript API の Chris J. Shull による Google Cloud Blog の記事 "Build maps faster with Web Components" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。


このたび、開発者が Google Maps Platform を利用するための新しい方法として、Web Components のプレビュー版を提供いたします。まずは、Google マップの機能と高度なマーカーの機能の Web Components にアクセスいただけるようになりますが、今後より多くの機能を追加していく予定です。さらに、オープンソースの Extended Component Library を立ち上げ、そこでプレイスデータの視覚的な表現など、より高度なコンポーネントを提供します。このライブラリでは、Maps JavaScript API がそのまま提供するものをさらに上回るベスト プラクティス、共通 UI / UX パターン、応答性、ユーザー補助機能がカプセル化されます。

Web Components はよく利用されている W3C 標準であり、開発者が HTML、CSS、JS を再利用可能なカスタムの HTML 要素にカプセル化できます。この再利用可能コンポーネントには、ある場所の評価を表示するような個々の機能から、より複雑なビジネス ロジックまで、さまざまなものがあります。Web Components は、あらゆる JS フレームワークと簡単に相互運用できるため、従来より習得時間が短く、コードがシンプルで、可読性が向上しており、開発者がより迅速に作業しやすくなっています。

Maps JavaScript API の Web Components

開発者は、Maps JavaScript API から直接 Google マップと高度なマーカーの Web Components にアクセスできるので、JavaScript をほとんど、またはまったく使用せずこれらの UI 機能を簡単、迅速に統合できます。Google Maps Platform API キーを取得し（高度なマーカーを使用するには、マップ ID を持つマップも必要です）、ドキュメントをご確認ください。

Map コンポーネントは、ウェブページ上に地図を表示し、HTML で Map コンポーネントの内部にマップ関連の追加要素（高度なマーカーなど）を表示できます。また、マップ ID を適用することで、Cloud ベースのマップのスタイル設定を使用してマップのデザインを変更できます。

カリフォルニア州マウンテンビューに赤いマーカーを表示している Google マップ


Maps JavaScript API の Web Components はプレビュー版ですが、Beta チャンネルからお試しいただけます。

<html>

<body>

 <script async

         src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps&v=beta&callback=initMap"></script>

 <gmp-map style="height: 500px;"

          center="41.081736,29.009206"

          zoom="10">

 </gmp-map>

 <script>

   function initMap() { console.log('Maps JavaScript API loaded.'); }

 </script>

</body>

</html>

HTML のコードサンプル

高度なマーカーのコンポーネントを使用すると、マップ上にマーカーを表示できます。マーカー ライブラリをスクリプト ローダーに、マップ ID をマップ要素にそれぞれ追加すると、高度なマーカーを使用できるようになります。

<script async

       src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker&v=beta&callback=initMap"></script>

<gmp-map style="height: 500px;"

        center="41.081736,29.009206"

        zoom="10"

        map-id="DEMO_MAP_ID">

 <gmp-advanced-marker position="41.081736,29.009206"

                      title="Istanbul"></gmp-advanced-marker>

</gmp-map>

HTML のコードサンプル

オープンソースの Extended Component Library

Google Maps Platform では、優れた地理空間データを提供していますが、そのデータをさまざまなスタイルが適用された UI 要素で表示するには、何行もの複雑なコードが必要になることがあります。Google は、Maps JavaScript API 用の Extended Component Library により、数行の HTML を記述するだけでアクセス、カスタマイズ、作成が可能な Google レベルの構成要素を各開発者に提供することを目指しています。このオープンソース ライブラリは、Maps JavaScript API から利用可能な Web Components を基に構築されたもので、定型文を減らし、ベスト プラクティスと共通 UI / UX パターンをカプセル化し、すぐにモバイルにも対応できます。また、各コンポーネントを簡単にカスタマイズして、自社ブランドのように見せられるグローバル スタイル設定トークンを備えています。スタイル設定、場所の詳細、オートコンプリートなどのためのさまざまコンポーネントも別途用意されています。

Web Components を使用すると、プレイスの美しい視覚表現を素早く作成できます


場所の概要の表示方法

以下の 3 行のコードで、特定の場所に関する詳細を表示できます。

<!-- unpkg.com は Google と提携していません-->

<script async type="module"

       src="https://unpkg.com/@googlemaps/extended-component-library@~0.1">

</script>

<gmpx-api-loader key="YOUR_API_KEY"></gmpx-api-loader>

<gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw"></gmpx-place-overview>

HTML のコードサンプル

場所の ID を見つけるには、Place ID Finder デモまたは Places API の Find Place 検索を使用します。

これらのコンポーネントには、優れたカスタマイズ機能と拡張機能が組み込まれています。たとえば、以下のように Place Overview コンポーネントでルートボタンを指定すると、その場所へのルート案内を開始するボタンが生成されます。

<gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw"

                    size="medium">

 <gmpx-place-directions-button slot="action">

   ルート

 </gmpx-place-directions-button>

</gmpx-place-overview>

HTML のコードサンプル

使ってみる

Extended Component Library の使用を開始するには、GitHub と npm をご確認ください。

今後も、HTML だけで地理空間ウェブ エクスペリエンスを作成するための新しい Web Components をお届けしていきます。Maps JavaScript API の Web Components を使用するための最新情報とその他のサンプルについては、こちらのドキュメントをご覧ください。皆様が Web Components を使用して何を作成されるかを楽しみにしております。

Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。



Reviewed by 丸山 智康 (Tomoyasu Maruyama) - Developer Relations Engineer 

コミュニティから寄せられる要望で多かった機能の 1 つが、より高度なマーカーとスタイル設定の機能です。このたび、Maps JavaScript API 向けに、地理空間データセットのデータドリブンなスタイル設定機能のプレビュー リリースを開始します。この機能により、Google Cloud コンソールにおける地理空間情報データのインポート、保存、管理をサーバーサイドで行えるようになるほか、地理空間情報データをマップ上のポイント、ライン、ポリゴンとして可視化し、スタイル設定することもできます。また、Cloud ベースのマップのスタイル設定に新しく追加された 2 つの機能、行政界情報などの境界線のデータドリブンなスタイル設定と高度なマーカーが、Maps JavaScript API で一般提供になりました。

データセットのデータドリブンなスタイル設定で地理空間情報データをインポート、可視化、スタイル設定

これまで、地理空間情報データを可視化するには、クライアント サイドで大規模なデータセットを管理、保存する必要がありました。このため、インフラストラクチャの費用が高くなり、また、データを表示するにあたっては前処理が必要でした。また、カスタム オーバーレイを介して地理空間データセットを追加すると、マップのパフォーマンスが低下し、ユーザーがマップ上で移動やズームをするときにデータの読み込みに遅延が生じます。

データドリブンなスタイル設定をデータセットに使用すると、GeoJSON、CSV、KML 形式の地理空間データを、地図上のポイント、ライン、ポリゴンとして簡単にスタイル設定して可視化できるようになります。この機能により、インタラクティブで情報豊かな視覚的エクスペリエンスの構築が容易になり、より多くのコンテキストをユーザーに提供できます。新しい Maps Datasets API を使用すると、Google Cloud コンソール経由で地理空間データをサーバーサイドにインポート、保存、管理でき、インフラストラクチャ費用の削減に効果的です。加えて、データアクセスの管理や、地理空間データの更新を常時どこからでも行えるようになります。データセットのデータドリブンなスタイル設定について詳しくは、ドキュメントまたはデモをご覧ください。


シアトルの緑地がスタイル設定によってマップ上にポイントとして表示されている


「当社のクライアントはたいてい、大量の地理空間データを管理しなければなりません。その取り扱いは難しく、特別な技術的知識を要します。データセットのデータドリブンなスタイル設定と Maps Datasets API により、このプロセスが簡単になります。クライアントは費用がかさむインフラストラクチャやカスタムコードを使用せずに、複雑な地理空間データを管理、表示、スタイル設定できるようになり、その結果、費用の削減とより良いユーザー エクスペリエンスを実現できます。」

Google Maps Platform パートナー、Ubilabs 共同創設者、Martin Kleppe 氏


この記事は Engineering Lead, Google Maps Platform の Travis McPhail と Product Manager, Google Maps Platform の Alicia Sullivan による Google Cloud Blog の記事 "The latest on maps customization" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

編集者注 : この投稿は、Google が毎年開催しているデベロッパー カンファレンスでの Google Maps Platform に関する最新のニュースをお伝えする、Google I/O 2023 シリーズの一部です。マップのカスタマイズに関する プロダクトの詳細については、 I/O セッションをご覧ください。

コミュニティから寄せられる要望で多かった機能の 1 つが、より高度なマーカーとスタイル設定の機能です。このたび、Maps JavaScript API 向けに、地理空間データセットのデータドリブンなスタイル設定機能のプレビュー リリースを開始します。この機能により、Google Cloud コンソールにおける地理空間情報データのインポート、保存、管理をサーバーサイドで行えるようになるほか、地理空間情報データをマップ上のポイント、ライン、ポリゴンとして可視化し、スタイル設定することもできます。また、Cloud ベースのマップのスタイル設定に新しく追加された 2 つの機能、行政界情報などの境界線のデータドリブンなスタイル設定と高度なマーカーが、Maps JavaScript API で一般提供になりました。

データセットのデータドリブンなスタイル設定で地理空間情報データをインポート、可視化、スタイル設定

これまで、地理空間情報データを可視化するには、クライアント サイドで大規模なデータセットを管理、保存する必要がありました。このため、インフラストラクチャの費用が高くなり、また、データを表示するにあたっては前処理が必要でした。また、カスタム オーバーレイを介して地理空間データセットを追加すると、マップのパフォーマンスが低下し、ユーザーがマップ上で移動やズームをするときにデータの読み込みに遅延が生じます。

データドリブンなスタイル設定をデータセットに使用すると、GeoJSON、CSV、KML 形式の地理空間データを、地図上のポイント、ライン、ポリゴンとして簡単にスタイル設定して可視化できるようになります。この機能により、インタラクティブで情報豊かな視覚的エクスペリエンスの構築が容易になり、より多くのコンテキストをユーザーに提供できます。新しい Maps Datasets API を使用すると、Google Cloud コンソール経由で地理空間データをサーバーサイドにインポート、保存、管理でき、インフラストラクチャ費用の削減に効果的です。加えて、データアクセスの管理や、地理空間データの更新を常時どこからでも行えるようになります。データセットのデータドリブンなスタイル設定について詳しくは、ドキュメントまたはデモをご覧ください。


シアトルの緑地がスタイル設定によってマップ上にポイントとして表示されている


「当社のクライアントはたいてい、大量の地理空間データを管理しなければなりません。その取り扱いは難しく、特別な技術的知識を要します。データセットのデータドリブンなスタイル設定と Maps Datasets API により、このプロセスが簡単になります。クライアントは費用がかさむインフラストラクチャやカスタムコードを使用せずに、複雑な地理空間データを管理、表示、スタイル設定できるようになり、その結果、費用の削減とより良いユーザー エクスペリエンスを実現できます。」

Google Maps Platform パートナー、Ubilabs 共同創設者、Martin Kleppe 氏

 

少ない労力で分析情報を可視化

行政界情報などの境界線のデータドリブンなスタイル設定では、Google マップで使用されているのと同じ行政界情報とポリゴンを使用して地図を作成できます。行政界情報のデータドリブンなスタイル設定のプレビュー リリース以来、この機能を使用して、不動産、旅行、行政機関、医療、教育など、さまざまな業界の幅広いユースケースを実現してきました。行政界情報のデータドリブンなスタイル設定について詳しくは、ドキュメントまたはデモをご覧ください。

不動産業者向けに構築された米国を拠点とするデータ プラットフォームの Realtors Property Resource（RPR）は、データドリブンなスタイル設定を使用して、不動産業者が市場動向を地図上で簡単に可視化できるようにすることで、住宅購入者へのサービス向上を後押ししています。

RPR はデータドリブンなスタイル設定を使用して市場動向をわかりやすく可視化


「REALTORS® は、住宅購入者のために適切な物件を見つけることに尽力しており、市場動向を地図上で明確に把握できることは有益です。データドリブンなスタイル設定により、市場動向の検索と地図上での可視化が容易になり、顧客へより良いサービスを提供できるようになりました。データドリブンなスタイル設定で強化された当社の全国規模の不動産データベースは、最小限の労力で有用な分析情報を生成できます。今後もデータドリブンなスタイル設定の活用を拡大し、地図のさらなる充実を図っていく予定です。」

Realtors Property Resource、プロダクト担当シニア バイス プレジデント、Janine Sieja 氏

 

カスタマイズされたマーカーを簡単に作成

高度なマーカーを使用すると、カスタマイズされた高性能なマーカーを簡単に作成できます。プレビュー版のリリース以来、さまざまな業界のお客様が高度なマーカーを使用して、ブランドの紹介や重要な物流情報の表示など、カスタマイズされたエクスペリエンスを創出しています。高度なマーカーについて詳しくは、ドキュメントとデモをご覧ください。


Rocket Entertainment

Rocket Entertainment は、エルトン ジョンの最後の北米ツアーを記念し、臨場感あふれる L.A. のマップ エクスペリエンスを作成しました。これに、高度なマーカーと新しい Aerial View API が使用されています。


高度なマーカーを使用したエルトン ジョンの L.A. マップ エクスペリエンス

 

「私たちは、エルトンがロサンゼルスとのつながりをファンと分かち合えるような、没入感のあるエクスペリエンスを構築したいと考えました。Google Maps Platform を使用することで、ベースマップのスタイル設定、高度なマーカーの追加、WebGL を利用した地図機能などを実現し、L.A. に用意しているさまざまなエクスペリエンスのビジュアル デザインと地図を完全に一致させることができました。エルトンのファンに気に入ってもらえると確信しています。」

Rocket Entertainment、デジタル責任者、Rory Newton Dunn 氏

 

Fr8app

Fr8app は、国際陸路輸送を簡素化するクラウドベースのマーケットプレイスで、トラック輸送パートナーに関する重要な情報を表示するために高度なマーカーを使用しています。

Fr8app は高度なマーカーを使用してトラック輸送パートナーに関する重要な情報を表示

 

「Google Maps Platform は、その使いやすさと信頼性から、Fr8app の地理空間プロバイダとして群を抜いた存在でした。当社では、トラック輸送パートナーに関する重要な情報を表示するために高度なマーカーを、大量のデータを管理するためにマーカー クラスタリングを使用しています。これまでのマッピング ソリューションでは、カスタマイズやデータ マネジメントが課題でした。高度なマーカーの導入によってユーザー エクスペリエンスを改善し、ワークフローを合理化することができ、結果としてエンゲージメントを高めることに成功しました。」

Fr8Tech、IT 担当ディレクター、Alvaro Garrido 氏

 

データドリブンなスタイル設定と高度なマーカーを使ってみる

データドリブンなスタイル設定と高度なマーカーは、Maps JavaScript API 向けの Dynamic Maps に含まれる Cloud ベースのマップのスタイル設定に追加された新機能です。これらの新機能を使用してカスタマイズされた地図可視化エクスペリエンスを作成する方法について、詳しくは I/O セッションをご視聴ください。

外出先でのユースケースに対応するため、高度なマーカーとデータドリブンなスタイル設定を Android と iOS のネイティブ アプリに拡張する予定ですので、引き続きご注目ください。この機能により開かれるマップスタイル設定の新たな可能性に期待したいと思います。


Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。


この記事は Product Manager, Google Maps Platform の Matt Brightman による Google Cloud Blog の記事 "Create immersive cinematic video experiences with Aerial View API" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。 ...

この記事は Product Manager, Google Maps Platform の Matt Brightman による Google Cloud Blog の記事 "Create immersive cinematic video experiences with Aerial View API" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

編集者注 : この投稿は、Google が毎年開催しているデベロッパー カンファレンスでの Google Maps Platform に関する最新のニュースをお伝えする、Google I/O 2023 シリーズの一部です。臨場感あふれるエクスペリエンスを提供する Google の新しいサービスについて詳しくは、I/O セッションをご覧ください。

この記事では、Aerial View API のプレビュー リリースについてお知らせします。この API を使用すると、地図上の特定の場所を捉えた、Google Earth で使用されているのと同じ 3D 地図ソースで構築された映画のような動画にプログラム経由でアクセスできます。Aerial View を使用すると、デベロッパーはホテル、観光スポット、ショップなどの場所を簡単に目立たせることができるので、人々が場所に関する十分な情報に基づいてバーチャルに意思決定をするのに役立ちます。


ロサンゼルスのドジャー スタジアムからシカゴのアドラー プラネタリウムまで、全米各地の構造物を俯瞰で表現

臨場感のあるユーザー エクスペリエンスを作成

Aerial View の動画では、近隣地域レベルで上から見下ろした様子が Google の衛星画像を使い 3 次元的に提供されるので、ユーザーは実際にそこを訪れているような感覚で周辺地域を把握できます。Aerial View の動画を使用した新しい魅力的な方法で場所を表示することにより、ユーザーの興味を引き、好奇心を刺激することができます。空からの圧巻の景色を捉えることで、スケール感や遠近感を演出できます。また、その場所についてもっと知りたい、その地域について調べたい、世界をもっと探検したいなど、ユーザーの行動を喚起することにも繋がります。

簡単にスケールし、市場投入までの時間を短縮

カメラ搭載のドローンで撮影した空撮映像を手動で作成、管理するには、時間も費用もかかります。Aerial View では、高解像度の映画のような動画をプログラムにより API ベースで作成することができるので、企業は YouTube 動画を埋め込むのと同じように、それらの動画を自社のウェブサイトやアプリケーションに簡単に埋め込むことができます。処理、保存、配信といった面倒な作業はすべて API が行います。

Rent. は Aerial View を使用してユーザー エクスペリエンスを簡素化

新しいマンション探しは楽しい反面、困難で負担のかかるプロセスでもあります。賃貸の場合、入居日までに実際にその場所に行くことができず、近隣の様子をイメージできない方も多いでしょう。Rent. では、Aerial View の動画で物件を紹介することで、周辺の環境や近隣の状況をよりわかりやすく伝えています。また、空撮映像を含めることで、不動産のエージェントやオーナーが独自に費用のかかるドローン撮影を実施して物件を紹介する必要性も低減します。

「Rent. が新しく追加した俯瞰機能により、借りる側は候補となる物件をまったく新しい視点からはっきりと確認できるようになりました。このような臨場感のあるツールは大きな効果を発揮します。借りる側は優れたエクスペリエンスを通して、十分な情報を得たうえで自信をもって次の住まいを選ぶことができるようになります。」

Rent.、最高製品責任者 Nishant Phadnis 氏


Rent. は Aerial View を使用して物件の詳細な周辺情報を消費者に提供

Aerial View を使ってみる

Cloud コンソールにアクセスして、Aerial View の使用を開始し、映画のような 3D 動画をアプリケーションに組み込みましょう。現時点では米国の住所に対応しており、今後さらに多くの国に対応する予定です。

よりカスタマイズ性の高いインタラクティブで臨場感のあるエクスペリエンスを求める場合や、より広い地域をカバーしたい場合は、Photorealistic 3D Tiles をご覧ください。Photorealistic 3D Tiles と Aerial View を使用して臨場感のある地図可視化エクスペリエンスを作成する方法について詳しくは、I/O セッションをご覧ください。ぜひこれらの新しい 3D 機能をご活用ください。

Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。


Reviewed by 丸山 智康 (Tomoyasu Maruyama) - Developer Relations Engineer


この記事は Product Management の Mohit Moondra による Google Cloud Blog の記事 "Routes API is now generally available" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。 ...

この記事は Product Management の Mohit Moondra による Google Cloud Blog の記事 "Routes API is now generally available" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

昨年 9 月、Google は Routes API のプレビュー リリースを発表いたしました。Routes API は、Directions API と Distance Matrix API の拡張 API で、より有益で柔軟なルートをユーザーに提供することができます。

このたび、Routes API の一般提供を開始しました。Routes API は、Directions API と Distance Matrix API の基本機能に基づいて構築され、たとえば、リアルタイムの交通量を包括的に反映する最新のルート選択や、複数の出発地と目的地を組み合わせた距離行列から計算される到着予定時刻の提供など、ビジネスにおいて重要な役割を果たしています。さらに、従来より有益で柔軟なルートを提供し、到着予想時刻の精度を向上させるために、次のような高度な新機能も備えています。 

  • ルートの費用をより正確に算出するための通行料金データ（利用可能な地域）
  • ルートの各区間のリアルタイム交通情報
  • 地点に通過地点と停止地点のいずれかを選択可能
  • レイテンシを低減するためのきめ細かいコントロール

二輪車（オートバイ）用ートと通行料金データの表示例

 

「当社では、ルート検索や距離および移動時間の計算機能を使って、お客様の多様なニーズに応えています。Routes API によって、お客様の要望にきめ細かく応えられるようになっただけでなく、実装もさらに簡単になりました。たとえば、ポリライン機能の改善により、ズームレベルを高くしたときでも高解像度のポリラインを維持したいと考えるお客様のニーズに応えられるようになりました。また、Compute Route Matrix で返される要素の総数が増えたことにより、幅広いユースケースに対応することが可能になっています。」

Google Cloud パートナー、株式会社ゴーガ 代表取締役 今関 雄人氏


Routes API の一般提供の開始後も、既存の Directions API と Distance Matrix API にも引き続きアクセスできますが、Routes API には Compute Routes や Compute Route Matrix をはじめとする新機能が追加されており、パフォーマンスも強化されています。

まずは、ウェブページ、ドキュメント、移行ガイドをご覧ください。実際にお試しいただく場合や、詳細を確認したい場合は、ライブデモをご覧ください。

Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。



この記事は Product Management Director, Google Maps Platform の Amit Litsur と Bonnie Pericolosi による Google Cloud Blog の記事 "Google I/O Preview: Introducing new 3D imagery, map customization, and routing products" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。 ...
この記事は Product Management Director, Google Maps Platform の Amit Litsur と Bonnie Pericolosi による Google Cloud Blog の記事 "Google I/O Preview: Introducing new 3D imagery, map customization, and routing products" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

編集者注 : この投稿は、Google が毎年開催しているデベロッパー カンファレンス Google I/O 2023 において発表された Google Maps Platform に関する最新のニュースをお伝えするシリーズの一部です。新製品についてさらに詳しく知りたい場合は、没入型体験のセッションと地図のカスタマイズのセッションも併せてご覧ください。

Google Maps Platform は、15 年以上にわたり、2D 地図、高解像度の衛星画像、歩行者視点のストリートビューを表示できるサービスとして発展してまいりました。このたび、最先端の AI とコンピュータ ビジョンを活用してこうした要素すべてを統合した没入型体験機能をリリースいたします。これまで Google は、基盤となる地理空間テクノロジーの向上に努めてまいりました。その結果、現実の体験を再現した、利用時のコンテキストに沿ったデジタルの視覚体験に対するユーザーの期待も、日に日に高まっています。このたび、Google I/O 2023 にて、3D 画像、地図のカスタマイズ、ルート案内のための新しいプロダクトと機能を発表しました。こうしたプロダクトや機能により、デベロッパーは、ユーザーの期待する体験を構築できるようになります。

Aerial View API と Photorealistic 3D Tiles を使用して没入型体験を構築する

このたびリリースする 2 つの新プロダクトでは、Google Earth で使用されているのと同じ 3D 地図のソースを使用できます。このため、従来の地図の枠組みを超えた没入型体験をユーザーに提供できるようになります。

Aerial View API は、現在プレビュー版としてご利用いただけます。
Aerial View では、簡単な API 呼び出しにより、特定の場所、ランドマーク、スポットからのパノラマ動画を使用することができます。Aerial View を使用すると、空中から撮影した画像を通して、エンドユーザーに特定の地域の様子（水域、学校、主要道路など）を簡単に素早く伝えることができます。動画のレンダリング、ホスティング、配信は、Google がバックエンドで YouTube のインフラストラクチャを介して行います。米国の住所に対しては、5 月 11 日より、空中から撮影した高解像度の動画をリクエストすることができます（他の地域にも近日対応予定）。Aerial View の詳しい説明は、こちらのブログをご覧ください。

シアトルの住居用不動産の空中写真


Photorealistic 3D Tiles の試験運用版がリリース

新しい地理データ プロダクトである Photorealistic 3D Tiles は、現実世界をモデル化して直接アプリに取り込める、高度にカスタマイズされた 3D ビジュアリゼーション エクスぺリンスの作成を支援するもので、Map Tiles API を通じて利用可能です。高精細 3D 画像を使って、ユーザーの現在位置周辺のの情報を調べたり見て回ったりできるようにする、または空間にまつわる諸問題を仮想的に解決することができます。より直感的な方法で地理情報を伝えることで、ブランドを差別化し 3D 画像でユーザーを楽しますことができるほか、決断を下す前にユーザーが場所について離れたところにいても調べられるようにすることができます。詳しくは、こちらのブログをご覧ください。

Photorealistic 3D Tiles によるビル、名所、地形


Aerial View と Photorealistic 3D Tiles は、どちらも没入型体験の構築を支援するものですが、ユースケースに基づいてどちらがご自身のプロジェクトに適しているかをすぐに判断できます。空中から撮影した画像を使って特定の場所の動画を迅速に作るためのすぐに使える API が必要なケースでは、Aerial View が適しています。あらゆる角度（歩行者の目線、任意の高さからの眺め、上空から下方に移動していく、など）から見たより広い区域（街区、近隣地域、市、州など）の、高度にカスタマイズされたインタラクティブな 3D ビジュアリゼーションを開発する場合は、Photorealistic 3D Tiles が適しています。

よりカスタマイズされたマップやルートを構築 

地理空間アプリケーションをきめ細かくカスタマイズし、より状況に即した情報を表示できるようにするため、マップやルートの高度なカスタマイズに関するいくつかの新機能と、カスタムマップの構築を高速化する再利用可能なウェブ コンポーネントをリリースします。

データドリブンな新しいスタイル設定機能が、データを活用したマップのカスタマイズを可能に
Maps JavaScript API のデータセットで利用できるデータドリブン型スタイル設定機能のプレビュー リリース版を利用することで、地理空間データをマップ上の地点、ライン、ポリゴンとして可視化し、スタイル設定できます。また、マップの Dataset API を利用すると、Google Cloud コンソールにおける地理空間データのインポート、保存、管理をサーバーサイドで行えます。

シアトルの緑地がマップ上の場所として表示され、実際の場所における緑地の密度をわかりやすく示している

さらに、行政界情報などの境界線のデータドリブンなスタイル設定機能が、Maps JavaScript API で一般に利用可能になりました。データドリブンなスタイル設定機能により、行政界を表す Google のポリゴンを簡単に表示できるようになります。また、Google の行政界を使用してお客様独自の表形式ビジネスデータを強化し、ポリゴンのスタイル設定や、多彩でカスタマイズされた階級区分図の作成ができるようになります。

カスタマイズされたユーザー エクスペリエンスを高度なマーカーで実現（一般提供中）

Maps JavaScript API の高度なマーカーを利用すると、カスタマイズ性の高い高性能なマーカーを作成できます。この機能を活用することで、マーカーとして自社のブランドをアピールすることもでき、開発時間を短縮できます。

マップのカスタマイズに関する更新について詳しくは、お知らせのブログをご覧ください。

エルトン ジョンの L.A. マップアプリでは、彼のお気に入りの場所にちなんだアイコンを高度なマーカーで表示し、ファンが実際の場所で体験できることを視覚的に示している


Routes API を使用して状況に応じて的確なルートを柔軟に提示（一般提供中）

Routes API を使用すると、高度な機能により、ルートをより的確かつ柔軟に提示できます。また、到着予定時刻の予測精度も高まります。新機能には、二輪車（オートバイ）向けのルート案内、通行料金データの表示、ルートの各区間におけるリアルタイムの交通情報の提供、環境に優しいルート選択（プレビュー版）などがあります。Routes API は、Directions API と Distance Matrix API の基本機能に基づいて構築されています。たとえば、リアルタイムの交通量を包括的に反映する最新のルート選択や、出発地と目的地を組み合わせた距離行列から計算される距離や到着予定時刻などです。詳しくは、こちらのブログをご覧ください。


ウェブ コンポーネントがプレビュー版で利用可能に

このたび、再利用可能なウェブ コンポーネントが利用可能になりました。これにより、開発者は高品質な地図をより迅速かつ簡単に構築できます。一般的な W3C 標準で構築することで、開発者はマップや高度なマーカーのウェブ コンポーネントを利用し、Maps JavaScript API にある既存のマップ機能を再利用できます。さらに、より大規模なウェブ コンポーネントのオープンソースの Extended Component Library を GitHub や npm にてリリースしています。詳しくは、こちらのブログ投稿をご覧ください。

新しいプロダクトや機能の詳細については、没入型体験や高度な地図のカスタマイズに関する Google I/O テクニカル セッションをご覧ください。皆様が構築されるサービスを楽しみにしております。

Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。


この記事は Product Manager, Google Maps Platform の Ilya Bezdelev による Google Cloud Blog の記事 "Learn about our updated renderer for the Maps SDK for Android" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

Google は、Android における Google Maps Platform の開発体験を向上させる方法を常に模索しています。そのため、Maps SDK for Android のレンダラを更新し、より多くの機能とより優れたパフォーマンスを提供できるよう取り組んでいます。


この記事は Product Manager, Google Maps Platform の Ilya Bezdelev による Google Cloud Blog の記事 "Learn about our updated renderer for the Maps SDK for Android" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

Google は、Android における Google Maps Platform の開発体験を向上させる方法を常に模索しています。そのため、Maps SDK for Android のレンダラを更新し、より多くの機能とより優れたパフォーマンスを提供できるよう取り組んでいます。

2021 年 10 月に更新したレンダラをご利用いただいているデベロッパーの皆様に感謝申し上げます。最新バージョンには、良い点や改善案などの皆様からのフィードバックに基づいた改良が施されており、すぐにお試しいただけます。アップグレードされたマップレンダラは、Maps SDK for Android のバージョン 18.0.0 以降でご利用いただけます。オプトインしてご利用のうえ、機能の不具合報告については適宜お知らせいただければ幸いです。

新しいマップレンダラの利点は次のとおりです。

  • ネットワーク負荷、処理要求、メモリ使用量の軽減
  • 以前のレンダラよりも高速なコールド スタート
  • 安定性とユーザー エクスペリエンスの向上
  • 操作処理の改良により、アニメーションの質が向上し、パンとズームがより滑らかに
  • 画面の切り替えをより滑らかにし、地図ラベルの位置もさらに鮮明に
新しいレンダラを使用できるデバイス :
  • Android 5.0（API レベル 21）以降
  • 2 GB 以上のデータ ストレージ
  • Google Play 開発者サービス バージョン 21.39.14 以降の使用
デバイスで Android 4.4W（API レベル 20）以前を使用している場合、デバイスのデータ ストレージが 2 GB 未満の場合、またはデバイスでバージョン 21.39.13 以前の Google Play 開発者サービスを使用している場合は、従来のレンダラを引き続きご利用ください。

新しいマップレンダラにアップグレードする方法

例

MapsInitializer.initialize() を呼び出してレンダラ バージョンをリクエストする方法について 2 つのコードサンプルを次に示します。

import com.google.android.gms.maps.MapsInitializer;

import com.google.android.gms.maps.MapsInitializer.Renderer;

import com.google.android.gms.maps.OnMapsSdkInitializedCallback;

class MapRendererOptInApplication extends Application implements OnMapsSdkInitializedCallback {

 @Override

 public void onCreate() {

   super.onCreate();

   MapsInitializer.initialize(getApplicationContext(), Renderer.LATEST, this);

 }

 @Override

 public void onMapsSdkInitialized(MapsInitializer.Renderer renderer) {

   switch (renderer) {

     case LATEST:

       Log.d("MapsDemo", "The latest version of the renderer is used.");

       break;

     case LEGACY:

       Log.d("MapsDemo", "The legacy version of the renderer is used.");

       break;

   }

 }

}

Java のコードサンプル

import com.google.android.gms.maps.MapsInitializer

import com.google.android.gms.maps.MapsInitializer.Renderer

import com.google.android.gms.maps.OnMapsSdkInitializedCallback

internal class MapRendererOptInApplication : Application(), OnMapsSdkInitializedCallback {

 override fun onCreate() {

   super.onCreate()

   MapsInitializer.initialize(applicationContext, Renderer.LATEST, this)

 }

 override fun onMapsSdkInitialized(renderer: MapsInitializer.Renderer) {

   when (renderer) {

     Renderer.LATEST -> Log.d("MapsDemo", "The latest version of the renderer is used.")

     Renderer.LEGACY -> Log.d("MapsDemo", "The legacy version of the renderer is used.")

   }

 }

}

Kotlin のコードサンプル

お問い合わせ

レンダラがうまく機能せずお困りの場合、Issue Tracker に問題点を登録してください。できる限り早急に対応いたします。Android 用の新しいマップレンダラをオプトインして使用を開始する方法については、こちらのドキュメントをご覧ください。機能の具合について、皆様からのフィードバックをお待ちしております。すでに新しいレンダラにアップグレードされた方には、今後のサービス向上のため簡単なアンケートにご回答いただいております。ご協力のほどよろしくお願いいたします。

Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。 

Posted by 丸山 智康 (Tomoyasu Maruyama) - Developer Relations Engineer