Web Components を使用してマップ作成時間を短縮

※この投稿は米国時間 2023 年 5 月 11 日に、Google Cloud blog に投稿されたものの抄訳です。

このたび、開発者が 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 を持つマップも必要です）、ドキュメントをご確認ください。  

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

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

オープンソースの Extended Component Library

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

場所の概要の表示方法

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

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

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

使ってみる

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

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