高度なマーカーが iOS と Android で使用可能に: さまざまプラットフォームでマーカーを簡単にカスタマイズ

Google Cloud Japan Team
※この投稿は米国時間 2023 年 11 月 1 日に、Google Cloud blog に投稿されたものの抄訳です。
Google マップマーカーのカスタマイズ機能は、Google への要望が特に多かった機能の一つです。Google は 5 月に Maps JavaScript API 向けに高度なマーカーの一般提供を開始しました。そしてこのたび、Android と iOS がサポート対象になったことを発表いたしました。これにより、デベロッパーはさまざまなプラットフォームで一貫性のあるエクスペリエンスを構築できます。


モバイル デバイスでスポットをハイライト表示し、スポット間を移動するための、ハロウィンをテーマとしたマーカー
高度なマーカーを使用すると、カスタマイズ性に優れ、高性能なマーカーを作成して、より豊かなユーザー エクスペリエンスを実現できます。SVG、PNG、またはネイティブ ビュー(Android の場合)および UIViews(iOS の場合)を使用して Google マップのピンをカスタマイズして、カスタム マーカーを作成すると、重なった場合の動作についても制御が可能にになります。読み込み時間も従来のマーカーより短縮されます。また、バリエーションごとに PNG を作成しなくても Google マップの赤いピンをコードで直接書き換えるできるため、デベロッパーの時間とリソースを節約できます。


ハロウィンをテーマとしたマーカーにカスタマイズされた Google マップのピン
Kotlin でピンのカスタムの色とカスタムの画像を作成する方法
Kotlin でピンのカスタムの色とカスタムの画像を作成するためのコード スニペット


ピンのカスタムの色とカスタムの画像を表示する上記のコード スニペットのレンダリング
モバイルアプリ向けの高度なマーカーを使ってみる
高度なマーカーの詳細については、ウェブサイトと、Android のサポートに関するドキュメントおよび iOS のサポートに関するドキュメントをご確認ください。Android デベロッパーのために、高度なマーカーのマーカー クラスタリングも Maps SDK for Android ユーティリティ ライブラリでサポートされており、Maps Compose ライブラリには、高度なマーカー向けのコンポーズ可能な関数と、高度なマーカーの Jetpack Compose 対応マーカー クラスタリングも用意されています。利用を開始する準備ができたら、Cloud コンソールにアクセスしてください。
Jetpack Compose を使用して Android アプリのマップに高度なマーカーを追加する
Maps JavaScript API 向けの高度なマーカー ユーティリティ ライブラリ
JavaScript デベロッパー向けの高度なマーカー ユーティリティ ライブラリもリリースしました。このライブラリでは、高度なマーカーを使用する一般的なパターンを元に、更に簡略化するために、google.maps.marker.AdvancedMarkerElement および google.maps.marker.PinElement クラスのすべての機能を 1 つのインターフェースに統合し、動的プロパティをサポートしています。また、このライブラリは、色の自動選択、アイコン フォントの処理、小規模から中規模のデータセットの自動処理など、便利な機能も提供しています。
Maps JavaScript API で高度なマーカーのスケールをカスタマイズする通常の方法
動的プロパティをサポートする高度なマーカー ユーティリティ ライブラリで高度なマーカーのスケールをカスタマイズする
Google Maps Platform の詳細については、ウェブサイトをご覧ください。
- Google Maps Platform、グループ プロダクト マネージャー Colin Zhang