ポップオーバー

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

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

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

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

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

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

ポップオーバーのコンテンツは SwiftUI ビューを使用してカスタマイズできます。カスタム レイアウトは、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()
        }
    }
  }
}