How to show a map view

Paul Hudson @twostraws June 22nd 2020

Updated for Xcode 12.0

New in iOS 14

SwiftUI’s Map lets us embed maps alongside the rest of our views, and control whether to show the user, what annotations we want, and more.

To get started, first create some sort of state that will track the coordinates being shown by the map. This uses MKCoordinateRegion, which takes a latitude/longitude pair for the center of the map, plus a coordinate span that controls how much is visible.

For example, this creates a map centered on the city of London:

import MapKit
import SwiftUI

struct ContentView: View {
    @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 51.507222, longitude: -0.1275), span: MKCoordinateSpan(latitudeDelta: 0.5, longitudeDelta: 0.5))

    var body: some View {
        Map(coordinateRegion: $region)
    }
}

Tip: You must import MapKit to get this functionality.

As the user scrolls around, the region state will update automatically.