この記事は Google Maps Platform デベロッパー マーケティング担当 Ahsan Ashraf による Google Maps Platform Blog の記事 "Google I/O '24: Introducing Gemini model capabilities for Places API, 3D Maps in the Maps JavaScript API, and open-source React components" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。

編集者注 : この投稿は、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 の AI を活用した機能により、ユーザーが最適な場所を見つけやすくする

Places API 向けの Gemini モデル機能が試験運用版でリリースされ、生成 AI による場所やエリアに関する有益な概要を表示できるようになりました。場所の概要は、レストラン、ショップ、観光スポット、公園などの場所に表示されます。ユーザーが探している場所をすばやく見つけやすくなり、場所のカスタム説明を自分で書く必要がなくなります。エリアの概要は、ある場所から徒歩圏内にあるショッピング施設、レストラン、観光スポットの概要を示して、近くでユーザーができるアクティビティーを把握しやすくします。

また、より詳しいコンテキストが提供されるため、特定の検索結果が表示される理由をユーザーが理解しやすくなります。AI を利用したコンテキスト検索結果により、「犬を同伴できるカフェ」とユーザーが検索すると、関連した食事スポットのリストが表示されます。さらに、レストランのレビューやレストランを訪れた犬の写真が目立つように表示されます。こうした新機能の詳細については、お知らせのブログをご覧ください。

ユーザーは、場所の概要によって、レストランを見つけ、選択することがより簡単になります。


Maps JavaScript API で没入型エクスペリエンスを作り出す

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 マップでアマルフィ海岸を旅することができます

React コンポーネントを使用して迅速かつ簡単に構築する

昨年の 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 に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。