HTML とベクトルモード API による簡単なウェブマップ

※この投稿は米国時間 2025 年 5 月 8 日に、Google Maps Platform blog に投稿されたものの抄訳です。

昨年、Google は Maps JavaScript API において 2 つの重要な更新を行い、最新かつ卓越したマップをより簡単に導入できるようにしました。それは、HTML マップとベクトルモード API です。

HTML マップ

このたび、標準ベースのウェブ コンポーネントを活用した、当社初となる HTML ベースの API セットの一般提供を開始しました。これにより、わずか数行のコードで、インタラクティブなマップを HTML 対応の環境に埋め込めるようになり、React ウェブアプリでの JSX へのインラインなども利用できます。<gmp-map> 要素を使用すると、すぐに使い始めることができます。

基本的な例を以下に示します。

高度なマーカーなどの追加コンテンツも、HTML を介して直接追加できます。

詳細については、マーカーが配置された Google マップを HTML を使って追加するのガイドと HTML を使用してイベント付きマップを追加するのコードサンプルをご覧ください。また、リファレンス ドキュメントで MapElement API の詳細も併せてご確認ください。

既存の google.maps.Map との下位互換を維持するために、<gmp-map> が新しい google.maps.MapElement クラスとして導入されました。現時点では、すべてのマップ機能が HTML で利用できるわけではありません。今後の開発の優先順位付けのために、ぜひ機能リクエストをお寄せください。<gmp-map> のすべてのマップ機能には、MapElement.innerMap プロパティを介して JavaScript から引き続きアクセスできます。

注: Maps JavaScript API の <script> タグは、ページに 1 回だけ含めるか、ライブラリの動的インポートを使用してください。

ベクトルモード API

新しい <gmp-map> 要素はデフォルトでベクトル レンダリングを使用するため、最新のマップ テクノロジーをすぐに使用できます。

また、既存のマップコードをベクトル レンダリングに対応させるアップグレードもさらに簡単になりました。これは、以下の例のように、マップのインスタンス化に「renderingType: "VECTOR"」を追加するだけで実行できます。

ベクトル レンダリングには多くの違いがあるため、この変更を加える際には徹底的にテストすることをおすすめします。最も顕著な違いは、コード内の JSON スタイル設定が機能しなくなることです。ただし、その代わりに Cloud ベースのマップのスタイル設定を使用できます。

未来を見据えて

Google は、Maps JavaScript API に次世代の 3D マップを導入する取り組みを進めています。これは HTML での開発にも対応しており、わずか 2 行のコードで開始できます。

詳細については、デベロッパー ガイドをご覧ください。また、プロダクトの改善のために、機能リクエストや問題レポートをお寄せくださいますようお願いいたします。

-Maps JavaScript API、Google Maps Platform 担当テクニカル リーダー、Chris J. Shull