ポップオーバー

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

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

ポップオーバーは、指定された位置で地図の上に情報ふきだし ウィンドウを開き、コンテンツ（通常はテキストまたは画像）を表示します。ポップオーバーには、コンテンツ領域と先細の突起部分があります。突起部分の先端が、地図上の指定された場所に付着しています。

通常、ポップオーバーは マーカーに.popover 修飾子を使用してアタッチしますが、高度を指定した特定のLatLng座標 にアタッチしたり、マーカーからオフセットしたりすることもできます。

ポップオーバーを追加する

ポップオーバーを追加するには、Popover エンティティを作成し、位置や高度モードなどのオプションを設定します。位置は LatLngAltitude オブジェクトで、ポップオーバーが表示される場所を決定します。高度モードを設定すると、LatLngAltitude でアンカーを設定する際の高度の解釈方法を制御できます。マーカーにアンカーを設定する場合は、マーカーの位置が使用されます。

ポップオーバーのコンテンツは、SwiftUI Views を使用してカスタマイズできます。View ビルダー クロージャーを Popover エンティティまたは .popover 修飾子に渡すことで、カスタム レイアウトを指定できます。

重要: 最適なユーザー エクスペリエンスを提供するために、 地図上で開くポップオーバーは 1 つのみにします。複数のポップオーバーが地図上に開くと、雑然として見えます。

LatLngAltitude オブジェクトにポップオーバーを追加する

次のコードサンプルでは、LatLngAltitude オブジェクトにポップオーバーを追加しています。

import GoogleMaps3D
import SwiftUI

struct SimpleCoordinatePopover: View {
  @State private var isOpen = true
  // Alcatraz Island coordinates
  private let alcatraz = LatLngAltitude(latitude: 37.8270, longitude: -122.4230)

  var body: some View {
    Map(initialCamera: .init(latitude: 37.8270, longitude: -122.4230)) {
      Popover(
        positionAnchor: alcatraz,
        isOpen: $isOpen
      ) {
        Text("Alcatraz Island")
      }
    }
  }
}

マーカーにポップオーバーを追加する

次のコードサンプルでは、マーカーにポップオーバーを追加しています。

import GoogleMaps3D
import SwiftUI

struct SimpleMarkerPopover: View {
  @State private var isOpen = false
  // Ferry Building coordinates
  private let ferryBuilding = LatLngAltitude(latitude: 37.7955, longitude: -122.3937)

  var body: some View {
    Map(initialCamera: .init(latitude: 37.7955, longitude: -122.3937)) {
      Marker(position: ferryBuilding)
        .popover(isOpen: $isOpen) {
          Text("Ferry Building")
        }
        .onTap {
          isOpen.toggle()
        }
    }
  }
}