Displaying Maps in SwiftUI
Show maps and annotations with Map.
Displaying Maps in SwiftUI is a free Swift Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Swift Academy learning path, and your progress syncs across the web and the CoddyKit app. The Swift Academy course includes 4 lessons in total.
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
Mapwith aMapCameraPositionbinding. - Drop
Markers or render customAnnotationviews, looping over data withForEach. - Show the blue dot with
UserAnnotation()and add.mapControls. - Style the map and respond to camera changes with
.onMapCameraChange.
Learn Swift with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 122
- Lessons
- 409
Frequently Asked Questions
Is the “Displaying Maps in SwiftUI” lesson free?
Yes — any 3 lessons of the Swift Academy learning path, including “Displaying Maps in SwiftUI”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Swift Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
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
- Requesting Location Authorization
- Getting the User's Location
- Displaying Maps in SwiftUI
- Geocoding and Regions