NEW: Start my new Ultimate Portfolio App course with a free Hacking with Swift+ trial! >>

How to show a Map view

Paul Hudson    @twostraws   

Updated for Xcode 12.5

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:

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)
            .frame(width: 400, height: 300)
    }
}

Tip: You must import MapKit to get this functionality.

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

If you want, you can restrict how much control the user has over the map by providing a separate interactionModes parameter to your map. For example, if you wanted the map to always show exactly the same spot, you would use this:

Map(coordinateRegion: .constant(MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 51.507222, longitude: -0.1275), span: MKCoordinateSpan(latitudeDelta: 0.5, longitudeDelta: 0.5))), interactionModes: [])
    .frame(width: 400, height: 300)

Or if you wanted the user to be able to zoom in and out, but not pan around to new locations, you would use this: [.zoom] for your interaction modes.

Finally, you can ask the map to show the user’s location – and even follow them as they move – by providing values for showsUserLocation and userTrackingMode.

For example, this will show the user on the map and always keep the map centered on their location:

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, showsUserLocation: true, userTrackingMode: .constant(.follow))
            .frame(width: 400, height: 300)
    }
}
Hacking with Swift is sponsored by Stream

SPONSORED Check out Stream's cross-platform open source chat SDK on GitHub! Write once and deploy your app with fully featured chat UI on iOS and macOS.

Go to GitHub

Sponsor Hacking with Swift and reach the world's largest Swift community!

Similar solutions…

BUY OUR BOOKS
Buy Pro Swift Buy Swift Design Patterns Buy Testing Swift Buy Hacking with iOS Buy Swift Coding Challenges Buy Swift on Sundays Volume One Buy Server-Side Swift (Vapor Edition) Buy Advanced iOS Volume One Buy Advanced iOS Volume Two Buy Advanced iOS Volume Three Buy Hacking with watchOS Buy Hacking with tvOS Buy Hacking with macOS Buy Dive Into SpriteKit Buy Swift in Sixty Seconds Buy Objective-C for Swift Developers Buy Server-Side Swift (Kitura Edition) Buy Beyond Code

Was this page useful? Let us know!

Average rating: 4.6/5

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.