SwiftUI Button on top of a MKMapView does not get triggered

Question

I have a button on top of a MKMapView. But the button does not get triggered when it's tapped on. Do you know what's missing?

MapView.swift

import SwiftUI
import UIKit
import MapKit

struct MapView: UIViewRepresentable {

    func makeUIView(context: Context) -> MKMapView {
        let mkMapView = MKMapView()
        return mkMapView
    }
    
    func updateUIView(_ uiView: MKMapView, context: Context) { }
    
    func makeCoordinator() -> Coordinator {
        Coordinator()
    }
    class Coordinator: NSObject, MKMapViewDelegate { }
}

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            MapView()
            Button(action: {
                print("Tapped")
            }) {
                Image(systemName: "lock.fill")
            }
        }
    }
}

Answer 1

Give it just a bit more internal space to be better recognizable. Here is fixed & tested variant (Xcode 12 / iOS 14):

struct TestButtonWithMap: View {
    @State private var locked = true
    var body: some View {
        ZStack {
            MapView()
            Button(action: {
                print("Tapped")
                self.locked.toggle()
            }) {
                Image(systemName: locked ? "lock.fill" : "lock.open")
                    .padding()      // << here !!
            }
        }
    }
}

Answer 2

I want to mention something slightly different but potentially useful for people looking for an answer and arriving to this page.

If you have buttons (especially in a ScrollView) which are over SwiftUI's Map - the buttons tap area might not be as big as it should. What solved it for me was adding an empty .onTapGesture { } to the ScrollView.

Example:

 var body: some View {
    ZStack {
        // A Map causes an issue with buttons' tap areas
        Map(mapRect: .constant(.world))

        ScrollView([.horizontal]) {
            HStack {
                ForEach(["M", "N"]) { letter in
                    Button(letter) { }
                }
            }
        }
        .onTapGesture { } // <-- !!! Needed to avoid issue with buttons !!!
    }
}