title: How do I make a clickable pin in SwiftUI's new Map view?
body: <p>I'm using SwiftUI new Map view to display pins for annotations, and would like the pins, when clicked, to display a view for editing the annotation's name and description.</p>
  <p>I've tried to use MapAnnotation with a view that contains a button with a pin image. The image displays correctly, but the button doesn't work.</p>
  <p>Is it possible to do this without falling back to a UIViewRepresentable of MKMapView?</p>
  <pre><code>import SwiftUI
  import MapKit
  
  struct ContentView: View {
      @State private var showingEditScreen = false
  
      @State private var region = MKCoordinateRegion(
          center: CLLocationCoordinate2D(latitude: 37.334722,
                                         longitude: -122.008889),
          span: MKCoordinateSpan(latitudeDelta: 1,
                                 longitudeDelta: 1)
      )
  
      @State private var pins: [Pin] = [
          Pin(name: &quot;Apple Park&quot;,
              description: &quot;Apple Inc. headquarters&quot;,
              coordinate: CLLocationCoordinate2D(latitude: 37.334722,
                                                 longitude:-122.008889))
      ]
  
      var body: some View {
          Map(coordinateRegion: $region,
              interactionModes: .all,
              annotationItems: pins,
              annotationContent: { pin in
                  MapAnnotation(coordinate: pin.coordinate,
                                content: {
                                  PinButtonView(pin: pin)
                                })
              })
      }
  }
  </code></pre>
  <p>My Pin definition:</p>
  <pre><code>struct Pin: Identifiable {
      let id = UUID()
      var name: String
      var description: String
      var coordinate: CLLocationCoordinate2D
  
  }
  </code></pre>
  <p>The view with the button and pin image:</p>
  <pre><code>struct PinButtonView: View {
      @State private var showingEditScreen = false
      @State var pin: Pin
  
      var body: some View {
          Button(action: {
              showingEditScreen.toggle()
          }) {
              Image(systemName: &quot;mappin&quot;)
                  .padding()
                  .foregroundColor(.red)
                  .font(.title)
          }
          .sheet(isPresented: $showingEditScreen,
                 content: {
                  EditView(pin: self.$pin)
                 })
      }
  }
  </code></pre>
  <p>Editing view:</p>
  <pre><code>struct EditView: View {
      @Environment(\.presentationMode) var presentationMode
  
      @Binding var pin: Pin
  
      var body: some View {
          NavigationView {
              Form {
                      TextField(&quot;Place name&quot;, text: $pin.name)
  
                      TextField(&quot;Description&quot;, text: $pin.description)
              }
              .navigationTitle(&quot;Edit place&quot;)
              .navigationBarItems(trailing: Button(&quot;Done&quot;) {
                  self.presentationMode.wrappedValue.dismiss()
              })
          }
      }
  }
  </code></pre>