Info bubble

@State private var selectedMarker: MarkerState? = nil

@StateObject private var markerState = MarkerState(
    position: GeoPoint(latitude: 37.7749, longitude: -122.4194),
    extra: "San Francisco - The Golden Gate City",
    icon: DefaultMarkerIcon(fillColor: UIColor.systemBlue, label: "SF")
)

SampleMapView(
    provider: $provider,
    /* ... provider states ... */
    onMapClick: { _ in selectedMarker = nil }
) {
    Marker(state: markerState)

    if let marker = selectedMarker {
        InfoBubble(marker: marker) {
            Text(marker.extra as! String)
                .foregroundColor(.accentColor)
                .padding(4)
        }
    }
}
.onAppear {
    markerState.onClick = { marker in selectedMarker = marker }
}

const [selectedId, setSelectedId] = useState<string | null>('simple-text-bubble');

const marker = useMemo(() => createMarkerState({
  id: 'simple-text-bubble',
  position: createGeoPoint({ latitude: 37.7749, longitude: -122.4194 }),
  icon: new ColorDefaultIcon('#2563eb', { label: 'SF', labelTextColor: '#ffffff' }),
  extra: 'San Francisco - The Golden Gate City',
  onClick: state => setSelectedId(state.id),
}), []);

return (
  <MapViewContainer initialCamera={INIT_CAMERA} onMapClick={() => setSelectedId(null)}>
    <Marker state={marker} />
    {selectedId === marker.id && (
      <InfoBubble marker={marker}>
        <div className="bubble-content simple-text-bubble">
          {marker.extra as string}
        </div>
      </InfoBubble>
    )}
  </MapViewContainer>
);

@StateObject private var markerState = MarkerState(
    position: GeoPoint(latitude: 37.7694, longitude: -122.4862),
    extra: LocationInfo(
        name: "Golden Gate Park",
        description: "A large urban park with gardens, museums, ...",
        rating: 4.5
    ),
    icon: DefaultMarkerIcon(fillColor: UIColor.systemGreen, label: "P")
)

if let marker = selectedMarker,
   let info = marker.extra as? LocationInfo {
    InfoBubble(marker: marker, style: bubbleStyle()) {
        VStack(alignment: .leading, spacing: 8) {
            Text(info.name).font(.headline).fontWeight(.bold)
            Text(info.description)
                .font(.subheadline)
                .foregroundColor(.gray)
            HStack(spacing: 4) {
                ForEach(0..<5, id: \.self) { index in
                    Image(systemName: "star.fill")
                        .foregroundColor(index < Int(info.rating) ? .yellow : .gray)
                        .font(.system(size: 12))
                }
                Text(String(format: " %.1f/5", info.rating)).font(.caption)
            }
        }
        .frame(width: 200, alignment: .leading)
    }
}

interface LocationInfo extends Record<string, unknown> {
  name: string; description: string; rating: number;
}

const marker = useMemo(() => createMarkerState({
  id: 'golden-gate-park',
  position: createGeoPoint({ latitude: 37.7694, longitude: -122.4862 }),
  icon: new ColorDefaultIcon('#22c55e', { label: '🌳' }),
  extra: { name: 'Golden Gate Park', description: '…', rating: 4.5 },
  onClick: state => setSelectedId(state.id),
}), []);
const info = marker.extra as LocationInfo;

<InfoBubble
  marker={marker}
  bubbleColor="#ffffff"
  borderColor="#000000"
  contentPadding={16}
  cornerRadius={12}
>
  <div className="rich-location-bubble">
    <strong>{info.name}</strong>
    <p>{info.description}</p>
    <div className="rating-row">…</div>
  </div>
</InfoBubble>

@State private var selectedMarkers: Set<String> = []

SampleMapView(
    provider: $provider,
    /* ... provider states ... */
    onMapClick: { _ in selectedMarkers = [] }
) {
    Marker(state: markerState1)
    if selectedMarkers.contains(markerState1.id) {
        InfoBubble(marker: markerState1) {
            VStack(alignment: .leading, spacing: 4) {
                Text(markerState1.extra as? String ?? "Unknown").font(.headline)
                Text("Tap to close").font(.subheadline).foregroundColor(.gray)
            }
        }
    }
    // markerState2 and markerState3 have the same shape
}
.onAppear {
    [markerState1, markerState2, markerState3].forEach { marker in
        marker.onClick = { clicked in
            if selectedMarkers.contains(clicked.id) {
                selectedMarkers.remove(clicked.id)
            } else {
                selectedMarkers.insert(clicked.id)
            }
        }
    }
}

const [selectedIds, setSelectedIds] = useState<Set<string>>(
  () => new Set(['marker_0', 'marker_1', 'marker_2'])
);

// Toggle it in onClick
onClick: state => setSelectedIds(prev => {
  const next = new Set(prev);
  next.has(state.id) ? next.delete(state.id) : next.add(state.id);
  return next;
}),

<Markers states={markers} />
{markers.map(marker =>
  selectedIds.has(marker.id) ? (
    <InfoBubble key={marker.id} marker={marker}
      bubbleColor="#ffffff" borderColor="#000000">
      <button type="button" className="multi-bubble-content"
        onClick={() => close(marker.id)}>
        <strong>{marker.extra as string}</strong>
        <span>Tap to close</span>
      </button>
    </InfoBubble>
  ) : null
)}