Adding MapMarker on Map using SwiftUI and MapKit

In the MapKit framework, there is a MapMarker annotation feature available that can be used to mark locations in a map. In this tutorial, you will learn how to add MapMarker to the map created from MapKit in SwiftUI for iOS.

To follow this tutorial, I recommend you learn how to display a map view in SwiftUI using MapKit.

The simple way of using MapMarker from MapKit to mark locations on a map

MapMarker is a balloon-shaped annotation from the MapKit framework that marks locations.

Let’s see, how to mark the location on the map. Before we start our main coding part, we have to import the MapKit framework:

import SwiftUI
import MapKit

First of all, we have to create a structure as you can see in the example below:

import SwiftUI
import MapKit

struct pointOnMap: Identifiable {
    let id = UUID()
    var location: MapMarker
}

As you can see, we have created a struct with the name pointOnMap. In the structure, we have two properties. One is id of type UUID and the other one is location of MapMarker type. We must have to set the struct type Identifiable.

Now let’s create our map view and put the marker on the map in the main view:

struct ContentView: View {
    
    
    @State private var mapRegion: MKCoordinateRegion = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 42.54, longitude: -113.76), span: MKCoordinateSpan(latitudeDelta: 0.7, longitudeDelta: 0.7))

    let markerLocations = [
        pointOnMap(location: MapMarker(coordinate: CLLocationCoordinate2D(latitude: 42.52, longitude: -113.79), tint: .blue)),
        pointOnMap(location: MapMarker(coordinate: CLLocationCoordinate2D(latitude: 42.47, longitude: -113.6), tint: .blue)),
        pointOnMap(location: MapMarker(coordinate: CLLocationCoordinate2D(latitude: 42.41, longitude: -113.63), tint: .blue))
    ]
    

    var body: some View {
        
          Map(coordinateRegion: $mapRegion, annotationItems: markerLocations) { markerLocation in
              markerLocation.location
          }
        
    }
    
    
}

In the above program, we have created a variable mapRegion and store location as type MKCoordinateRegion.

    @State private var mapRegion: MKCoordinateRegion = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 42.54, longitude: -113.76), span: MKCoordinateSpan(latitudeDelta: 0.7, longitudeDelta: 0.7))

We have also created an array markerLocations that holds the information of locations to be marked on the map:

    let markerLocations = [
        pointOnMap(location: MapMarker(coordinate: CLLocationCoordinate2D(latitude: 42.52, longitude: -113.79), tint: .blue)),
        pointOnMap(location: MapMarker(coordinate: CLLocationCoordinate2D(latitude: 42.47, longitude: -113.6), tint: .blue)),
        pointOnMap(location: MapMarker(coordinate: CLLocationCoordinate2D(latitude: 42.41, longitude: -113.63), tint: .blue))
    ]

As you can see, we have provided 3 locations. We have provided the latitude and longitude of each location. We set the tint color to blue to show our marker color blue.

In the end, we created a map and assigned the array markerLocations to the map annotation. It will show the marker to the locations provided in the array.

Complete code to add MapMarker in SwiftUI

Below is our final code for SwiftUI to add the MapMarker on the map:

import SwiftUI
import MapKit


struct pointOnMap: Identifiable {
    let id = UUID()
    var location: MapMarker
}



struct ContentView: View {
    
    
    @State private var mapRegion: MKCoordinateRegion = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 42.54, longitude: -113.76), span: MKCoordinateSpan(latitudeDelta: 0.7, longitudeDelta: 0.7))

    let markerLocations = [
        pointOnMap(location: MapMarker(coordinate: CLLocationCoordinate2D(latitude: 42.52, longitude: -113.79), tint: .blue)),
        pointOnMap(location: MapMarker(coordinate: CLLocationCoordinate2D(latitude: 42.47, longitude: -113.6), tint: .blue)),
        pointOnMap(location: MapMarker(coordinate: CLLocationCoordinate2D(latitude: 42.41, longitude: -113.63), tint: .blue))
    ]
    

    var body: some View {
        
          Map(coordinateRegion: $mapRegion, annotationItems: markerLocations) { markerLocation in
              markerLocation.location
          }
        
    }
    
    
}

Now if we run it in our device or emulator, it will look like you can see in the figure below:

By Faruque Ahamed Mollick