高度なマーカーのご紹介：高度にカスタマイズされ、高速処理が可能なマーカーの作成を容易に

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

Google Maps Platform を初めて使用される場合、まずはマップ上にマーカーを置いてみた人も多いのではないでしょうか。多くの場合、それが Google が持つ現実世界の知見を活用し、世界中のあらゆる場所においてユーザー向けの臨場感あふれる便利なマップ エクスペリエンスの構築を実現するための第一歩となったりします。ユースケースや業界の違い、ウェブ向けなのかモバイル向けなのかにかかわらず、多くの場合、マーカーがマップベースのエクスペリエンスの中核となっています。

デベロッパー コミュニティから数多く寄せられる要望が、簡単に使用できる高度なマーカー機能でした。このたび、Google Maps Platform チームは皆様の要望にお応えすべく、Maps JavaScript API 用の「高度なマーカー」のプレビュー版をリリースいたします。これにより、高度にカスタマイズされ高速に動作するマーカーの作成が可能となり、上質なユーザー エクスペリエンスの提供、ブランドの紹介、時間とリソースの節約が実現します。

主な機能とユースケース

Google マップの赤いピンのカスタマイズ

デフォルトの赤いピンを簡単にカスタマイズする機能は、デベロッパーからの要望が特に多かった機能です。高度なマーカーの新しい「PinView」クラスでは、画像ではないため、デフォルトのピンの色、背景、アイコン、枠線をコードで直接変更できるようになります。

これにより、さまざまなユースケースが可能となります。小売店は店舗の場所を示すマーカーを、ブランドのカラーに合わせて変更することができます。旅行会社はホテル周辺の施設のカラーやアイコンを変更することで、ユーザーに周囲の環境に基づいて理想のホテルを選んでもらいやすくすることが可能です。また、ロジスティクス企業は、リアルタイムで変化する荷物または車両の状況を反映して、マーカーの色を変更することができます。

マーカーをカスタマイズする際には、アイコンや写真といった自身が保有する画像アセットを使用するという選択肢もあります。これにより、PNG や SVG といった HTML の「img」タグでサポートされた画像ファイルを使用することが可能となります。また、CSS を使用して高度なマーカーを動的にスタイル設定およびアニメーション化して、サイズ、不透明度、ポジション、カラーなどを変更することも可能で、これまで以上に簡単に Google マップへ動的なマーカー エクスペリエンスを追加できるようになります。これにより、たとえば、ロゴやその他のブランド アセットを使用して、ブランディングをより周到にマップに組み込むことができるようになります。

カスタム マーカーで生み出す、コンテキストに沿ったインタラクティブな体験

カスタマイズした高度なマーカーは、カスタムの HTML 要素を使用することでも作成できます。作成したマーカーは、ユーザーとのインタラクションにも対応し、高い柔軟性を持つ CSS のスタイルにも適用させることが可能です。この機能であれば、これまでは複雑なカスタム オーバーレイを使用しなければ構築が難しかった、美しく、魅力的で、インタラクティブなマーカー エクスペリエンスを生み出すことが可能となります。たとえば、不動産会社の場合は、ユーザーの操作に応じて物件の価格を表示させるマーカーを作成でき、それにより、物件の住所、面積、寝室や浴室の数といった追加の有益な情報を表示することができます。

デモにアクセスして、ここで紹介したユースケースやその他のユースケースをご確認ください。

向上したマーカーのパフォーマンスとアクセシビリティ

高度なマーカーは従来型のマーカーよりも 66% 読み込みが速く、より素早いパンやズームを提供します1。また、高度なマーカーでは、大量のマーカーに対する高速な読み込みもサポートしています。

さらに数多くのユーザー補助機能の改良も行いました。これにより、スクリーン リーダーやキーボードの操作を活用したユーザー向けのプロダクトを作成することが可能になりました。こうした改良により、ユーザーはマーカーをドラッグ＆ドロップで移動するという操作をすべてキーボードで行うことができます。マーカーのタイトルはスクリーン リーダーで自動的に取得され、マーカーはユーザー補助ロールにデフォルト設定されます。

高度なマーカーを使ってみる

高度なマーカーは、最近プレビュー リリースされたデータドリブンのスタイル設定と同様に、Maps JavaScript API 用 Dynamic Maps に組み込まれており、Cloud ベースのマップスタイル設定に最新の機能として追加されています。高度なマーカーの使用の開始と追加の機能についての詳細は、こちらのドキュメントと次の動画をご確認ください。

皆様が、高度なマーカーを活用して、マップ エクスペリエンスの基礎的な部分をどのように再検討されるのかを楽しみにしております。

^{1 高度なマーカーについて、500 のマーカーを配したマップを使って内部でベンチマーク テストを行いました。実際の結果は、高度なマーカーの構成、アプリケーションの実装、ブラウザ、ハードウェアの仕様などを含むさまざまな要因によって変わります。}