編集者注 : この投稿は、Google が毎年開催しているデベロッパー カンファレンスでの Google Maps Platform に関する最新のニュースをお伝えする、Google I/O 2024 シリーズの一部です。JavaScript で Photorealistic 3D Maps を使用して臨場感あふれる地図可視化エクスペリエンスを作り出す方法と、Places API の Gemini モデル機能を使用してエクスペリエンスを構築する方法について、詳しくは、5 月 16 日に実施したセッションに登録してご確認ください。
20 年ほど前、最初の Google Maps API が世界に向けてリリースされ、ウェブとモバイルにわたる地理空間エクスペリエンスに革命を引き起こしました。それ以来、Google Maps Platform はデベロッパー コミュニティとともに進化し、シンプルな 2D マップから高解像度の衛星画像や、現実的な 3D モデルにまで拡大してきました。マップデータを可能な限り最新の状態に保つ基盤として AI を活用し、AI とコンピュータ ビジョンがそれらのデータをすべて融合させてより没入感のあるエクスペリエンスを実現しています。
今回は、Google Maps Platform 3D データセットの可能性の限界をさらに押し広げる新機能についてお知らせします。これは、AI をデータ利用の枠を超えて初めてプロダクト領域にまで拡張し、お客様が Google のサービスを活用して容易に構築できるようにするものです。まず、Places API を皮切りに、Gemini モデルの機能を Google Maps Platform に導入していきます。また、Google が長年醸成してきたレンダリング技術を活用して、最も使われている API である Maps JavaScript に Photorealistic 3D Maps を導入します。さらに、オープンソースの React コンポーネント ライブラリのリリースにより、Google Maps Platform を使用した構築がこれまでよりも迅速かつ効率的になります。
Places API 向けの Gemini モデル機能が試験運用版でリリースされ、生成 AI による場所やエリアに関する有益な概要を表示できるようになりました。場所の概要は、レストラン、ショップ、観光スポット、公園などの場所に表示されます。ユーザーが探している場所をすばやく見つけやすくなり、場所のカスタム説明を自分で書く必要がなくなります。エリアの概要は、ある場所から徒歩圏内にあるショッピング施設、レストラン、観光スポットの概要を示して、近くでユーザーができるアクティビティーを把握しやすくします。
また、より詳しいコンテキストが提供されるため、特定の検索結果が表示される理由をユーザーが理解しやすくなります。AI を利用したコンテキスト検索結果により、「犬を同伴できるカフェ」とユーザーが検索すると、関連した食事スポットのリストが表示されます。さらに、レストランのレビューやレストランを訪れた犬の写真が目立つように表示されます。こうした新機能の詳細については、お知らせのブログをご覧ください。
Maps JavaScript API の Photorealistic 3D Maps の試験運用版リリースは、使い慣れた単一の API を通じて構築される没入型ウェブ エクスペリエンスの新時代をもたらします。デベロッパーは初めて、Google 独自のレンダリング技術を使用して Google の高解像度 3D マップにシームレスにアクセスできるようになります。これにより、デベロッパーの選択肢が増え、使いやすさが向上するため、開発を効率化してエンドユーザーに卓越したエクスペリエンスを確実に提供できます。
JavaScript の Photorealistic 3D Maps は、ネイティブのウェブ プログラミング言語で 3D データの活用を実現し、デベロッパーがレンダリング ツールを追加することなく魅力的なエクスペリエンスを生み出せるようにします。不動産のバーチャル ツアーを強化する、旅行サイトで世界中の行き先を魅力的に演出する、ハイパーリアルな都市環境を作成するなど、JavaScript の Photorealistic 3D Maps を使用すると、3D の没入型エクスペリエンスをこれまで以上に簡単に構築できます。いずれも、Google の広範囲にわたる対象地域と信頼できるインフラストラクチャによって実現されます。Maps JavaScript API を使用して 3D マッピング エクスペリエンスを構築する方法の詳細については、お知らせのブログをご覧ください。
こちらの 3D マップを覧ください。以下のインタラクティブな 3D マップを使用して、息をのむようなアマルフィ海岸を探索しましょう。海岸に沿って移動したり、ズームインして名所であるアマルフィ大聖堂を見つけたりしてください。エンドユーザーのために何を実現できるか、想像してみましょう。
インタラクティブなマップ : JavaScript の Photorealistic 3D Maps を使用して作成されたインタラクティブな 3D マップでアマルフィ海岸を旅することができます
昨年の Google I/O では、デベロッパーがマップをより迅速かつ簡単に構築できるウェブ コンポーネントのリリースを発表しました。今年は React Google Maps Library の公式 1.0 リリースを発表します。これは、React ウェブアプリに Maps JavaScript API コンポーネントを統合するためのライブラリとして Google の協力の元初めて作成されたものです。
import React from 'react';
import {createRoot} from 'react-dom/client';
import {APIProvider, Map} from '@vis.gl/react-google-maps';
const App = () => (
<APIProvider apiKey={API_KEY}>
<Map
style={{width: '100vw', height: '100vh'}}
defaultCenter={{lat: 22.54992, lng: 0}}
defaultZoom={3}
gestureHandling={'greedy'}
disableDefaultUI={true}
/>
</APIProvider>
);
const root = createRoot(document.querySelector('#app'));
root.render(
<App />
このライブラリを使用すると、デベロッパーは Maps JavaScript API によって提供されるすべての機能を React アプリケーションに簡単に統合できます。ご利用方法の詳細については、お知らせのブログをご覧ください。
上記の進歩は、マップでできることの限界を押し広げ、デベロッパーが次世代の地理空間サービスを構築できるようにするという Google の取り組みを反映しています。上記の新しいプロダクトや機能の詳細については、Google I/O テクニカル セッションをご覧ください。また、Maps Compose ライブラリに焦点を当てたワークショップが 5 月 16 日から視聴できます。皆様が構築されるサービスを楽しみにしております。
Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。
Chrome のアドレスバー（オムニボックスとも呼ばれます）は、毎日何十億回も使われているツールで、ウェブを簡単に検索できるようにしています。これを使うと、タブやブックマークをすばやく探すことも、以前にアクセスしたウェブページに戻ることも、情報を検索することもできます。
最新リリースの Chrome（M124）では、PC 版 Chrome のアドレスバーに機械学習モデルを組み込み、これまで以上に正確かつ適切にウェブページを提案できるようにしました。今後は、このモデルを使って、検索候補の関連性スコアの改善も行いたいと考えています。ここでは、今回の組み込みにつながったいくつかの重要な知見や、新しいモデルに期待されることについて、詳しくお伝えします。
アドレスバー担当チームのエンジニアリング リードである私にとって、すべてのリリースは特別なものですが、今回のリリースはとりわけ身近で大切なものです。初めて Chrome のアドレスバーに携わったとき、ユーザーに使いやすいと思ってもらうためのアイデアを周りに尋ねました。その 1 番の答えは、「スコアリング システムを改善する」でした。問題は、スコアが悪いことではありませんでした。実際、URL や検索語句を表示するアドレスバーの機能は、魔法のように感じられることがあります。問題は、それに 柔軟性がないことでした。 手作業で作成して調整する方法はうまく機能しましたが、それを改善したり、新しいシナリオに適応させたりするのは困難でした。そのため、スコアリング システムは長い間ほとんど手つかずのままでした。
その大半の期間、明らかに向かうべき方向となっていたのが、ML でトレーニングしたスコアリング モデルでした。しかし、ここにたどり着くまでに、多くの失敗を重ねることになりました。これほど長い間、この課題を解決できなかったのは、文字通り毎日何十億回も使われている機能の中核となる仕組みを置き換えるのが難しかったためです。ソフトウェア エンジニアリング プロジェクトは、「飛行機を飛ばしながら作る」と表現されることがあります。このプロジェクトは、「世界中のすべての飛行機が飛んでいる間に、すべての座席を交換する」ようなものでした。規模が非常に大きく、変更はすべてのユーザーに直接影響します。
有能で献身的なこのようなチームの努力がなければ、この野心的な取り組みは不可能でした。途中でぶつかったり、壁を突破しなければならなかったり、予期せぬ問題が発生してペースが落ちることもありましたが、ユーザーのためにどうしても正しい形でこれを行いたいという誠実な気持ちに突き動かされてきました。
ML システムで作業する楽しみの 1 つは、個人やチームでは困難または不可能な規模で、 すべての データを考慮したトレーニングを行えることです。そして、それは意外な知見につながる可能性があります。
このプロジェクトで一番驚いたのは、特定のシグナル、すなわち前回のナビゲーションからの時間のスコアリング曲線を見たときでした。このシグナルで期待されるのは、小さいほど（特定の URL に移動したのが最近であるほど）、関連性スコアが高くなることでした。
そして実際に、モデルはそのように学習しました。しかし、詳しく見てみると、驚くべきことがわかりました。ナビゲーションからの時間が非常に短い場合（数時間、数日、数週間ではなく、数秒だった場合）、モデルが算出する関連性スコアは、 減少 していたのです。トレーニング データを確認したところ、ユーザーが実際には望んでいない URL に移動し、すぐに Chrome のアドレスバーに戻って、もう一度試すパターンが記録されていることがわかりました。その場合、移動した URL は、ほぼ間違いなく、ユーザーが望んだものでは ありません。そのため、2 回目の試行との関連性スコアは低くなるはずです。
よく考えてみれば、これは当然のことです。そして、ML でスコアリングを始めていなければ、このシナリオを反映させるために、古いシステムに新しいルールを追加していたはずです。しかし、トレーニング システムは、このパターンを見つけて学習してくれました。その前には、このようなことが起きているとは、誰も想像できませんでした。
この新しい ML モデルを使って、ユーザー エクスペリエンスを向上させる多くの新しい可能性を開くことができると考えています。たとえば、1 日の中の時間帯を区別して関連性を向上させるなど、新たなシグナルを組み込むことができます。モバイル、エンタープライズ、アカデミックといったユーザーごとに、あるいは言語や地域の違いなどに応じて、特定の環境向けの特別なバージョンのモデルをトレーニングすることも模索したいと考えています。
さらに、ユーザーが Chrome のアドレスバーを操作する方法は、時間の経過とともに変化することがわかっています。そのため、関連性スコアもそれに合わせて変化させる必要があると考えています。新しいスコアリング システムを使えば、これまで以上に新鮮なシグナルを収集し、時間の経過とともに新しいモデルを定期的に再トレーニング、評価、展開することができます。
20 年近くにわたり、開発者の皆様は Google のプロダクトを利用して革新的なマップ活用サービスを生み出してきました。このたび Google は、Google Maps Platform に Gemini モデル機能を導入し、開発者の皆様がさらなるイノベーションを推進できるよう支援いたします。最初に導入されるのは Places API です。開発者の皆様は、評価、口コミ、営業時間など、2 億 5,000 万件以上の企業や場所に関する豊富な情報を利用するだけでなく、生成 AI を活用した、場所やエリアに関する有益な要約をご自身のアプリやウェブサイトに表示できるようになります。頻繁に更新されるこれらの要約では、Gemini モデルを使用して、3 億人を超える Google マップ投稿者コミュニティによる場所に関する情報やインサイトを分析しているため、できる限り最新の情報を表示するのに役立ちます。
Places API のもうひとつのアップデートは、AI を活用したコンテキスト検索結果の向上です。ユーザーがプロダクト内で場所を検索すると、検索に関連する口コミや写真を表示できるようになり、より簡単に場所を比較して意思決定を下せるようになります。これらの機能は現在、試験運用版としてすべての開発者の皆様にご利用いただけます。コンテキスト検索結果は世界中が対象となっていますが、場所とエリアの要約は米国でのみ利用可能で、今後対象国を順次増やしていく予定です。デモを試して、その仕組みをご確認ください
これらの新機能により、ユーザーはあなたのアプリやウェブサイトで、求めている情報をより素早く簡単に見つけられるようになります。また、より深いインサイトや要約が提供されるという利点もあり、その地点のカスタム説明を自ら書く必要がなくなります。
たとえば、レストラン予約アプリで、ユーザーが自分たちのグループにぴったりのレストランを把握できるようにしたいと仮定します。アプリでレストランを検索すると、名物料理やハッピーアワーの情報、お店の雰囲気など、重要なすべての情報がすぐに要約として表示されます。これにより、ユーザーは個々のレストランを詳しく調べなくても、どこに行くかを簡単に決めることができます。
製品に合わせて要約をカスタマイズできるよう、短い要約（平均約 100 文字）と長い要約（平均約 400 文字）の 2 つの長さの要約を利用できます。レストラン、ショップ、スーパーマーケット、公園、映画館など、さまざまな種類の場所で利用できます。また、今後さらに増える予定です。短い要約は、Gemini モデルを使用することでより頻繁に更新されるようになり、手作業で記述した要約と比較して、これまでよりはるかに多くの米国内の場所で利用できるようになりました。長い要約は、さらに豊富な概要を提供します。レストランのおすすめ料理、雰囲気、サービスの質など、Places API でこれまで利用できた情報よりも多くの詳細情報を含めることができます。
ときには、ある場所の周辺エリアのおすすめスポットを説明することも有効です。Gemini モデルを使用したエリアの新しい要約により、ユーザーはある場所から徒歩圏内にあるショップ、レストラン、アトラクションの概要を確認できるようになったため、その場所で何をするかを決めやすくなります。たとえば、自動車メーカーは、運転手が充電中に訪れる場所を選べるよう、カフェ、レストラン、店舗など、EV 充電スタンドの近くにある場所の要約を運転手に提供できます。
最後に、AI を活用して多くのコンテキストを含めることで、その検索結果が表示される理由をユーザーが理解しやすくしました。たとえば、地元のレストランを検索できるアプリがある場合、「犬連れ OK のレストラン」と検索すると、関連する食事スポットのリストと一緒に、関連する口コミや口コミの抜粋、レストランを訪れた犬の写真が表示されます。こうした情報は、ユーザーがより多くの情報に基づいて意思決定をするのに役立ち、提供される結果への信頼度が高まります。
新機能の概要をご紹介したので、そのうちの 1 つについて、仕組みやプロジェクトでの使用方法を技術的に詳しく見ていきましょう。
以下のレスポンス places.AreaSummary オブジェクトは、エリア内にあるおすすめスポットの包括的な概要をユーザーに提供することを目的としています。関連するトピックで場所を分類し、場所ごとに簡単な説明を提供することで、ユーザーがその近くにあるさまざまな選択肢をすばやく把握できるようにします。これは、知らない地域を探索したり、特定の関心（カフェやレストランを探すなど）に基づいて行き先を決めたりする際に特に便利です。
電気自動車充電スタンドがあるエリアの要約を見ていきましょう。付近のカフェに関するレスポンス データに特に注目します。
AreaSummary {
content_blocks: [
{
topic: "概要"
...
}
topic: "コーヒー" // コンテンツ ブロックのテーマ
content: {
text: "Acme Bread は、スープ、サラダ、サンドイッチのほか、コーヒーや焼き菓子も提供しています。Happy Coffee は人気のカフェで、特製ロースト、軽食、クイック サービスを提供しています。Perky Coffee は、コーヒー、紅茶、朝食の専門店で、ファミリー向けの健康的な環境で食事を提供しています。"
references: { } // コンテンツ ブロックの構成に使用する場所のプレイス ID
topic: "レストラン"
topic: "店舗"
]
AreaSummary オブジェクトには content_blocks というオブジェクトの配列が含まれます。個々のオブジェクトは、エリア内の特定のトピックやカテゴリを表します。類似する場所をグループ化することで、エリアに関する情報を整理します。各ブロックは以下の情報を提供します。
エリアの要約、場所の要約、コンテキスト検索結果をプロジェクトに追加する方法について詳しくは、ドキュメントをご確認ください。
試験運用中は、Places API の Gemini モデルの新機能とコンテキスト検索結果を無料でお試しいただけます。利用を開始して各機能の仕組みを把握するには、デモをご確認ください。また、公開 Issue Tracker でフィードバックや機能リクエストをお送りいただくこともできます。Places API の Gemini モデル機能を使用した地理空間エクスペリエンスの構築方法について詳しくは、I/O セッションをご覧ください。皆様が構築されるサービスを楽しみにしております。
編集者注 : この投稿は、Google が毎年開催しているデベロッパー カンファレンスでの Google Maps Platform に関する最新のニュースをお伝えする、Google I/O 2024 シリーズの一部です。最新情報の詳細を確認するには、5 月 16 日の I/O 技術セッションか、Maps Compose ライブラリのワークショップに登録してください。
これまで数か月にわたって着実な成長を遂げ、コミュニティから積極的なサポートを得てきましたが、このたび React Google Maps ライブラリのリリースを発表いたします。これは Maps JavaScript API の React インテグレーション ライブラリの公式 1.0 リリースです。 11 月の最初のアルファ版リリースから構築されたこのライブラリにより、React.js のデベロッパーは豊富な地理空間エクスペリエンスを素早く構築できるようになりました。
現在と比較してウェブの状況が大きく異なっていた 2005 年のことです。Maps JavaScript API はオンライン マッピングを一変させ、その後の数年間で、React のようなフロントエンド フレームワークはウェブ開発に革命をもたらしました。
Google は React の優位性を認識し、ラッパー ライブラリとチュートリアルを活用したサポートを開始しました。それを基に React Google Maps ライブラリのアルファ版リリースが誕生しました。これは React コンポーネントと、Maps JavaScript API を簡単に統合するためのフックを提供する、Google が資金提供した最初のライブラリです。
react-google-maps の健全で持続可能な環境を醸成するために、Google は OpenJS Foundation と提携しました。この財団は、node.js、ESLint、Jest など、重要な JavaScript プロジェクトを手掛けたことで知られています。OpenJS Foundation は、地理空間データ可視化フレームワークのスイートである vis.gl をホストしており、vis.gl は 5 年間にわたり @deck.gl/google-maps を維持してきました。vis.gl は react-google-maps にオープンなガバナンスを提供し、Google はその維持と進化に積極的に貢献します。
CARTO 社は React と Google マップを deck.gl と組み合わせてアプリケーションを構築しています。そのうちの一つが、米国で暴風雨が発生したときに保険に及ぼす影響を予測するこのアプリケーションです。
CARTO と deck.gl が提供する大規模な地理空間アプリケーションの多くは、Google Maps Platform とのインテグレーションにより、開発者にもエンドユーザーにも使い慣れた環境を提供しています。不動産や環境分野でのユースケースの可視化では、高解像度の衛星画像やストリートビューとのスムーズなインテグレーションがなければ、そのインパクトははるかに小さいものになることでしょう。
「CARTO では、React と Google Maps Platform を日常的に使用しています。このリリースが vis.gl コミュニティの他のプロジェクトに加わるのを見ると、私たちは非常に嬉しくなります。地理空間と React のエコシステム双方にとって素晴らしい未来が待っていると思います。」
- CARTO 社、プリンシパル レンダリング エンジニア、Felix Palmer 氏
最新の React と deck.gl が使用されたアプリケーションにおいて、React Google Maps ライブラリはこのインテグレーションをより簡単で、シームレスで、信頼性の高いものにします。Google マップを React コンポーネントとして扱うことで、必須である Maps JavaScript API を宣言的な UI に変換する負担がなくなります。さらに、deck.gl とのシームレスなインテグレーションにより、パフォーマンスの高い地理空間ビジュアリゼーションを簡単に作成できます。
実際に簡単な例をご紹介します。
const App = () => {
return (
<APIProvider apiKey={process.env.GOOGLE_MAPS_API_KEY}>
defaultCenter={config.mapCenter}
defaultZoom={config.mapZoom}
>
<AdvancedMarker position={config.markerPosition} />
<MapControl position={ControlPosition.TOP_LEFT}>
<ResetMapButton />
</MapControl>
</Map>
};
const ResetMapButton = () => {
const map: google.maps.Map | null = useMap();
const resetMap = useCallback(() => {
if (!map) return;
map.setCenter(config.mapCenter);
map.setZoom(config.mapZoom);
}, [map]);
return <button onClick={resetMap}>Reset Map View</button>;
ここまで見てきたように、@vis.gl/react-google-maps で利用可能なフックとコンポーネントを使用することで、貴重な開発時間を節約し、アプリケーションの複雑さを軽減できます。これにより、アプリケーションは Google マップのほとんどの機能について、メンテナンスがより容易で常に最新の状態が保たれる React のネイティブ バージョンが利用できるようになり、他のコードベースとも適合します。
ドキュメントとサンプルは React Google Maps ライブラリのウェブサイトでご覧ください。一般的なユースケース（例 : Place Autocomplete）や複雑なユースケースについて開発者をさらにサポートするために、ステップバイステップのチュートリアル codelab や、このライブラリの React コンポーネントを他のウェブ コンポーネントと統合するためのコードサンプルも提供しています。このライブラリについて他の開発者とやり取りをするには、Google Maps Platform Discord サーバーの #react チャネルに参加してください。最後に、React で Maps JavaScript API を使用するために、こちらの動画チュートリアルのプレイリストで学習されることもお薦めします。
Google は、React Google Maps ライブラリが「1.0」という一つのマイルストーンに到達したことで、React ベースの Google Maps Platform プロジェクトの新しい時代が到来すると信じています。このエキサイティングな取り組みを共に体験してくださりありがとうございます。
.webp)
.webp)
.webp)
.webp)
.webp)
.webp)
