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

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

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

PinStyle オブジェクトを構成することで、マーカーの外観をカスタマイズできます。PinStyle 型は、背景色と枠線の色、グリフのテキストと色、高度、使用する画像などを変更するオプションと、追加のカスタマイズを行うためのオプションを提供します。

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

Map(mode: .hybrid) {
  Marker(
      position: .init(latitude: 51.5074, longitude: -0.1278, altitude: 0.0),
      label: "London",
      style: .pin(.init(scale: 2.0))
  )
}

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

• マーカーのスケールを調整する
• 背景色を変更する
• 輪郭線の色を変更する
• グリフにテキストを追加する

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

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

Map(mode: .hybrid) {
  Marker(
      position: .init(latitude: 35.6762, longitude: 139.6503, altitude: 0.0),
        label: "Tokyo",
        style: .pin(
          .init(
            backgroundColor: .blue,
            borderColor: .yellow,
            scale: 2.0
            ) {Text("G").minimumScaleFactor(0.01)}
        )
  )
}

背景色を変更する

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

Map(mode: .hybrid){
  Marker(
    position: .init(latitude: 48.8566, longitude: 2.3522, altitude: 0.0),
    label: "Paris",
    style: .pin(.init(backgroundColor: .yellow)) // Changes the pin's background color
  )
}

輪郭線の色を変更する

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

Map(mode: .hybrid){
  Marker(
    position: .init(latitude: -22.9068, longitude: -43.1729, altitude: 0.0),
    label: "Rio de Janeiro",
    style: .pin(.init(backgroundColor: .green, borderColor: .brown)) // Customizes the pin border
  )
}

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

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

Map(mode: .hybrid){
  Marker(
    position: .init(latitude: 25.2048, longitude: 55.2708, altitude: 0.0),
    label: "Dubai",
    style: .pin(.init(backgroundColor: .green)) {
        Text("D") // Adds text inside the marker glyph
    }
  )
}