WWDC22 SALE: Save 50% on all my Swift books and bundles! >>

How to show annotations in a Map view

Paul Hudson    @twostraws   

Updated for Xcode 14.0 beta 1

New in iOS 14

SwiftUI’s Map view allows us to show annotation views on top of the map, including default markers and pins, as well as completely custom views.

This takes three steps:

  1. Create some sort of state that will track the coordinates being shown by the map, using MKCoordinateRegion to track the center and zoom level of the map.
  2. Prepare an array of locations to use for your annotations.
  3. Decide how you want them to be shown on your map. There are built-in MapPin and MapMarker annotations you can show, or you can use your own views.

Whatever array of locations you have, the types you’re using must conform to Identifiable so SwiftUI understands how to identify each item uniquely. For example, you might use something like this:

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

If all you have is CLLocationCoordinate2D data, you can use them directly by adding an extension such as this one:

extension CLLocationCoordinate2D: Identifiable {
    public var id: String {

Anyway, here’s an example that puts everything together so you can see map pins over various capital cities:

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

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

    let annotations = [
        City(name: "London", coordinate: CLLocationCoordinate2D(latitude: 51.507222, longitude: -0.1275)),
        City(name: "Paris", coordinate: CLLocationCoordinate2D(latitude: 48.8567, longitude: 2.3508)),
        City(name: "Rome", coordinate: CLLocationCoordinate2D(latitude: 41.9, longitude: 12.5)),
        City(name: "Washington DC", coordinate: CLLocationCoordinate2D(latitude: 38.895111, longitude: -77.036667))

    var body: some View {
        Map(coordinateRegion: $region, annotationItems: annotations) {
            MapPin(coordinate: $0.coordinate)
        .frame(width: 400, height: 300)

Download this as an Xcode project

A map showing Western Europe and the British Isles, with red drawing pins in London and Paris, which are labelled.

That uses the traditional pin style that iOS has had for years, but if you want the larger pin style you can use MapMarker instead, like this: MapMarker(coordinate: $0.coordinate)

A map showing Western Europe and the British Isles, with red bubbles over London and Paris.

And if you want complete control, you can also pass in completely custom views – some text, an image, a NavigationLink, and so on.

For example, we could draw a 4-point stroked circle over our capital cities like this:

MapAnnotation(coordinate: $0.coordinate) {
        .strokeBorder(.red, lineWidth: 4)
        .frame(width: 40, height: 40)

A map showing Western Europe and the British Isles. London and Paris are labelled and circled in red.

Save 50% in my Black Friday sale.

SAVE 50% To celebrate WWDC22, all our books and bundles are half price, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.

Save 50% on all our books and bundles!

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

Similar solutions…

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.