Select platform: [Android](https://developers.google.com/maps/documentation/maps-3d/android-sdk/popovers.md.txt "View this page for the Android platform docs.") [iOS](https://developers.google.com/maps/documentation/maps-3d/ios-sdk/popovers.md.txt "View this page for the iOS platform docs.") [JavaScript](https://developers.google.com/maps/documentation/javascript/3d/popovers.md.txt "View this page for the JavaScript platform docs.")

<br />

![Map of San Francisco with marker and popover over the Ferry Building.](https://developers.google.com/static/maps/documentation/maps-3d/ios-sdk/images/popovers-ios.png)

A popover displays content (usually text or images) in an info bubble window
above the map, at a given location. The popover has a content area and a
tapered stem. The tip of the stem is attached to a specified location on the
map.

Typically you will attach a popover to a
[marker](https://developers.google.com/maps/documentation/maps-3d/ios-sdk/add-a-marker.md.txt) using the `.popover`
modifier, but you can also attach a popover to a specific `LatLng` coordinate
with

altitude mode

, or offset it from
a marker.

## Add a popover

To add a popover, create a `Popover` entity and set its options, including
position and altitude mode. The position is a `LatLngAltitude` object,
determining where the popover is displayed. You can control how altitude is
interpreted when anchoring by `LatLngAltitude` by setting the altitude mode. If
anchoring to a marker, the marker's position is used instead.

The content of a popover can be customized using SwiftUI Views. You can provide
custom layouts by passing a View builder closure to the `Popover` entity or the
`.popover` modifier.

> [!IMPORTANT]
> **Important:** For the best user experience, only one popover should be open on the map at any one time. Multiple popovers make the map appear cluttered.

### Add a popover to a `LatLngAltitude` object

The following code sample adds a popover to a `LatLngAltitude` object:

```swift
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(center: .init(latitude: 37.8270, longitude: -122.4230)),
      mode: .hybrid) {
        Popover(
          positionAnchor: alcatraz,
          isOpen: $isOpen
        ) {
          Text("Alcatraz Island")
        }
      }
  }
}
```

### Add a popover to a marker

The following code sample adds a popover to a marker:

```swift
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(center: .init(latitude: 37.7955, longitude: -122.3937)),
      mode: .hybrid
    ) {
      Marker3D(position: ferryBuilding)
        .popover(isOpen: $isOpen) {
          Text("Ferry Building")
        }
        .onTap {
          isOpen.toggle()
        }
    }
  }
}
```