編集者注 : この投稿は、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}>
<Map
defaultCenter={config.mapCenter}
defaultZoom={config.mapZoom}
>
<AdvancedMarker position={config.markerPosition} />
<MapControl position={ControlPosition.TOP_LEFT}>
<ResetMapButton />
</MapControl>
</Map>
</APIProvider>
);
};
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 プロジェクトの新しい時代が到来すると信じています。このエキサイティングな取り組みを共に体験してくださりありがとうございます。
Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。
.webp)
.webp)
