マーカーの基本的なカスタマイズ

このプロダクトまたは機能は、pre-GA（一般提供前）の試験運用版です。pre-GA のプロダクトや機能では、サポートが限定されることがあります。また、pre-GA のプロダクトや機能の変更は、他の pre-GA バージョンには対応していない場合があります。pre-GA のサービスには、Google Maps Platform サービス固有の規約が適用されます。詳しくは、リリース ステージの説明をご覧ください。

プラットフォームを選択: Android iOS JavaScript

マーカーの外観は、pinConfiguration コンストラクタを使用してカスタマイズできます。pinConfiguration コンストラクタは、背景色と枠線の色、グリフのテキストと色、高度、使用する画像などを変更するメソッドを提供し、追加のカスタマイズのためのオプションも提供します。

次のコードサンプルは、利用可能なカスタマイズ オプションの一部を使用して、新しいマーカーを作成してスタイルを設定する方法を示しています。

map.addMarker(
 markerOptions {
   position = sanFrancisco
   style = pinConfiguration {
     backgroundColor = Color.GREEN
     borderColor = Color.GREEN
     glyph = Glyph.fromColor(Color.RED)
   }
 }
)

このページでは、マーカーを次のようにカスタマイズする方法を解説します。

• マーカーのスケールを調整する
• 背景色を変更する
• 輪郭線の色を変更する
• グリフにテキストを追加する
• 画像をマーカーとして使用する
• マーカーを削除する

マーカーのスケールを調整する

マーカーのスケールを調整するには、scale オプションを使用します。

map.addMarker(
 markerOptions {
   position = sanFrancisco
   style = pinConfiguration {
     scale = 3.14
   }
 }
)

背景色を変更する

構築中にマーカーの背景色を変更するには、PinElement.background オプションを使用します。

map.addMarker(
 markerOptions {
   position = sanFrancisco
   style = pinConfiguration {
     backgroundColor = Color.GREEN
   }
 }
)

輪郭線の色を変更する

マーカーの輪郭線の色を変更するには、構築時に markerOptions.borderColor オプションを使用します。

map.addMarker(
 markerOptions {
   position = sanFrancisco
   style = pinConfiguration {
     borderColor = Color.GREEN
   }
 }
)

グリフにテキストを追加する

デフォルトのグリフをテキスト文字に置き換えるには、markerOptions.glyph メソッドを使用します。マーカーのテキストグリフはマーカーに合わせて拡大縮小されます。

map.addMarker(
 markerOptions {
   position = sanFrancisco
   style = pinConfiguration {
     glyph = Glyph.fromText("G")
   }
 }
)

画像をマーカーとして使用する

Map.addMarker(markerOptions {
  position = latLngAltitude {
      latitude = 40.7484
      longitude = -73.9857
      altitude = 100.0
  }
  zIndex = 1
  label = "Empire State Building"
  isExtruded = true
  isDrawnWhenOccluded = true
  altitudeMode = AltitudeMode.RELATIVE_TO_MESH
  setStyle(ImageView(R.drawable.ook))
})

マーカーを削除する

Marker.remove() を使用して、地図からマーカーを削除します。

marker.remove();