Swift Academy · Lesson

Displaying Maps in SwiftUI

Show maps and annotations with Map.

Displaying Maps in SwiftUI is a free Swift Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Swift Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The SwiftUI Map View

SwiftUI provides a native Map view (in MapKit) for displaying interactive maps without UIKit. Import MapKit and place a Map in your view hierarchy. Since iOS 17 it uses a modern, declarative API.

import SwiftUI
import MapKit

struct BasicMap: View {
    var body: some View {
        Map()
    }
}

Coordinate Regions

A region is described by an MKCoordinateRegion — a center coordinate plus a span (how much latitude/longitude is visible). Smaller spans zoom in closer.

let region = MKCoordinateRegion(
    center: CLLocationCoordinate2D(latitude: 41.008, longitude: 28.978),
    span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05)
)

Controlling the Camera with Position

The modern Map takes a binding to MapCameraPosition. You can start at a region, a rect, or automatically frame content. Use .region(...) to set an explicit area.

struct CityMap: View {
    @State private var position: MapCameraPosition = .region(
        MKCoordinateRegion(
            center: .init(latitude: 41.008, longitude: 28.978),
            span: .init(latitudeDelta: 0.1, longitudeDelta: 0.1)
        )
    )
    var body: some View {
        Map(position: $position)
    }
}

Adding a Marker

Marker drops a standard balloon pin at a coordinate with a title. Place markers inside the Map trailing closure (a map content builder).

Map {
    Marker("Hagia Sophia",
           coordinate: .init(latitude: 41.0086, longitude: 28.9802))
}

Customizing Markers

Markers accept a systemImage and a tint to express categories. This makes them visually distinct on the map.

Map {
    Marker("Cafe", systemImage: "cup.and.saucer.fill",
           coordinate: cafeCoord)
        .tint(.brown)
}

Annotations with Custom Views

When a pin is not enough, Annotation lets you render any SwiftUI view at a coordinate. Provide a title and a content closure.

Map {
    Annotation("Office", coordinate: officeCoord) {
        Image(systemName: "building.2.fill")
            .padding(6)
            .background(.blue, in: Circle())
            .foregroundStyle(.white)
    }
}

Showing Multiple Pins from Data

Loop over your model with ForEach inside the map content builder to render many markers. Each item supplies a coordinate.

struct Place: Identifiable {
    let id = UUID()
    let name: String
    let coordinate: CLLocationCoordinate2D
}

Map {
    ForEach(places) { place in
        Marker(place.name, coordinate: place.coordinate)
    }
}

Displaying the User Location

Add UserAnnotation() to the map content to show the familiar blue dot. This requires location authorization to have been granted. You can combine it with your own markers.

Map {
    UserAnnotation()
    ForEach(places) { p in
        Marker(p.name, coordinate: p.coordinate)
    }
}

Map Controls

Attach standard controls with the .mapControls modifier: a compass, a user-location button, and a scale view. They appear automatically and respect the map style.

Map { UserAnnotation() }
    .mapControls {
        MapUserLocationButton()
        MapCompass()
        MapScaleView()
    }

Map Style

Use the .mapStyle modifier to switch between standard, imagery (satellite), and hybrid renderings. You can also toggle realistic elevation and points of interest.

Map()
    .mapStyle(.hybrid(elevation: .realistic))

Reacting to Camera Changes

The .onMapCameraChange modifier reports when the visible region changes (e.g. after the user pans). Use it to fetch data for the newly visible area.

Map(position: $position)
    .onMapCameraChange { context in
        let center = context.region.center
        print("Now centered at:", center.latitude, center.longitude)
    }

Quick Check: SwiftUI Maps

Test your MapKit-in-SwiftUI knowledge.

Recap: Displaying Maps in SwiftUI

You can now build interactive maps:

Use the modern Map with a MapCameraPosition binding.
Drop Markers or render custom Annotation views, looping over data with ForEach.
Show the blue dot with UserAnnotation() and add .mapControls.
Style the map and respond to camera changes with .onMapCameraChange.

Frequently asked questions

Is the “Displaying Maps in SwiftUI” lesson free?

Yes — the full text of “Displaying Maps in SwiftUI” is free to read here on the web, and the Swift Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Swift Academy course, upgrade to CoddyKit PRO.

What will I learn in “Displaying Maps in SwiftUI”?

Show maps and annotations with Map. You practise Swift Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Swift Academy?

No prior experience is required. Swift Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Displaying Maps in SwiftUI” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Swift Academy lesson?

Yes. Every Swift Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Swift Academy