新しいGoogle Maps Web Componentsの機能とメリットを解説し、地図機能の開発を加速する方法をご紹介します。
Google Maps Platformを使えば、地図・場所・ルートに関する膨大で正確、かつ最新の地理データにアクセスできます。とはいえ、それらを見栄えの良いUIで表示しようとすると、コード量も開発工数もかさみがちです。
本記事では、Webアプリケーション開発で活躍する新しいGoogle Maps Web Componentsについて、その機能とメリットを掘り下げていきます。
Google Maps Web Componentsとは?
Google Maps Platformチームは先日、Web開発者がGoogle Maps Platformの機能をよりシンプルかつスピーディーに利用できる新しい手段として、Web Componentsを公開しました。JavaScriptの知識がそれほどなくても、わずか数行のコードで地図を表示できます。実装後は、他のHTML要素と同じ感覚でコードを書ける点も魅力です。Typescript、Javascript、CSS、HTMLによるMaps Web Componentの実装サンプルはこちらからご覧いただけます。
Web ComponentsはW3Cで標準化された広く使われている仕様で、HTML・CSS・JavaScriptを独自の再利用可能なHTML要素としてカプセル化できます。場所の星評価を表示するといった小さな機能から、ECの配送先住所入力フォームや、カスタムマーカー・ポリラインスタイルを用いたルート表示など複雑なビジネスロジックまで、幅広い用途に対応可能です。あらゆるJavaScriptフレームワークと容易に連携でき、学習コストを抑えつつ、コードをシンプルで読みやすく保てるため、Web開発者の生産性向上に直結します。
Google Maps Platformでは、オープンソースのExtended Component Libraryを通じてWeb Componentsを利用できます。このライブラリには、Maps JavaScript APIが標準で備える機能を超えたベストプラクティス、定型コード、一般的なUX/UIパターン、レスポンシブ対応、アクセシビリティが組み込まれており、複雑な地図UIを実質的に1つのHTML要素にまで凝縮します。
Google Maps Web Components要素の実装
地図やAdvanced MarkerのWeb ComponentsはMaps JavaScript APIから直接呼び出せるため、ごくわずかなJavaScriptでこれらのUI機能を素早く組み込めます。地図コンポーネントはWebページ上に地図を表示するだけでなく、HTML内の地図コンポーネントに含まれるAdvanced Markerなど、地図に関連する追加要素にもアクセスできます。さらにGoogle Mapsのクラウドベースのマップスタイリングを使えば、GCPコンソールのGoogle MapsセクションでMap IDを適用するだけで、ユースケースやブランドに合わせて地図の見た目を自由にカスタマイズできます。
次の例は、HTMLだけで地図上に場所の情報を表示する方法を示しています。
Google Maps Web Components関連リソース
Google Maps Javascript API Web Componentのドキュメントはこちらから、オープンソースのGoogle Maps Extended Component LibraryはGitHubまたはNPMからご利用いただけます。これらのリソースを活用すれば、わずか数行のHTMLで呼び出し・カスタマイズ・組み合わせが可能な再利用可能なビルディングブロックを構築でき、Google Maps Javascript APIの実装が格段にシンプル・高速になり、コスト効率も大きく向上します。Google Maps PlatformやWeb Componentsについて詳しく知りたい方は、[email protected]までお気軽にご連絡ください。