♪ ♪ Jeff Howdy I’m Jeff I’m an engineer on the MapKit team and I’m excited to introduce you to MapKit for SwiftUI With our greatly expanded SwiftUI API it’s easier than ever to integrate Maps into you

To mark the parking spot, I’ll add an annotation to the map. I’ll create a new struct called ParkingSpot that conforms to MKAnnotation. Then, I’ll add a property for the coordinate and a title for the annotation. Finally, I’ll add the annotation to the map by creating an instance of ParkingSpot and passing it to the mapView’s addAnnotation method. Here’s the code:

struct ParkingSpot: Identifiable, MKAnnotation { var id = UUID() var coordinate: CLLocationCoordinate2D var title: String? }

struct ContentView: View { @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 42.3591, longitude: -71.0571), span: MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01)) @State private var parkingSpot = ParkingSpot(coordinate: CLLocationCoordinate2D(latitude: 42.3589, longitude: -71.0568), title: "Parking Spot")

var body: some View {
    Map(coordinateRegion: $region, annotationItems: [parkingSpot]) { spot in
        MapAnnotation(coordinate: spot.coordinate) {
            Image(systemName: "mappin.circle.fill")
                .foregroundColor(.red)
                .opacity(0.8)
                .shadow(radius: 1)
        }
    }
    .edgesIgnoringSafeArea(.all)
}

}

And here’s what the map looks like with the parking spot annotation:

[Image: Map with Parking Spot Annotation]

Next, I’ll enable selection so that when I tap on the parking spot annotation, I can learn more about it. I’ll add a property to the ParkingSpot struct for a subtitle and an info button that will display the subtitle when tapped. Then, I’ll implement the mapView’s didSelectAnnotationView method to show the info button when the annotation is selected. Here’s the updated code:

struct ParkingSpot: Identifiable, MKAnnotation { var id = UUID() var coordinate: CLLocationCoordinate2D var title: String? var subtitle: String? var infoButton: Bool = false }

struct ContentView: View { @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 42.3591, longitude: -71.0571), span: MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01)) @State private var parkingSpot = ParkingSpot(coordinate: CLLocationCoordinate2D(latitude: 42.3589, longitude: -71.0568), title: "Parking Spot", subtitle: "Near Quincy Market")

var body: some View {
    Map(coordinateRegion: $region, annotationItems: [parkingSpot]) { spot in
        MapAnnotation(coordinate: spot.coordinate) {
            ZStack {
                Image(systemName: "mappin.circle.fill")
                    .foregroundColor(.red)
                    .opacity(0.8)
                    .shadow(radius: 1)
                if spot.infoButton {
                    Button(action: {
                        // Do something when the info button is tapped
                    }) {
                        Image(systemName: "info.circle")
                            .foregroundColor(.white)
                            .font(.title3)
                    }
                }
            }
        }
        .onTapGesture {
            parkingSpot.infoButton.toggle()
        }
    }
    .edgesIgnoringSafeArea(.all)
}

}

And here’s what the map looks like with the parking spot annotation and info button:

[Image: Map with Parking Spot Annotation and Info Button]

That’s it for now. In the next post, I’ll show you how to integrate Look Around to explore some places we might want to visit. Stay tuned