SwiftUI で Apple 地図 ( Maps ) を実装する方法 – ピンを複数立てる方法等 –

スマホアプリの強みとして「地図の表示」や「場所にピンを立てること」が挙げられると思います。 SwiftUI を用いて実装できる地図サービスにはいくつかの種類がありますが本記事では Apple 純正の Map を取り上げ、 SwiftUI を用いて以下を実装する方法について説明していきます。

緯度経度情報を基に地図を表示する方法
1 つのピンを立てる方法
複数ピンを立てる方法

Xcode: 13.1
iOS: 14.5
Swift: 5

[ads]

緯度経度を基に地図を表示

[ads]

まずはじめに緯度経度を基に地図を表示してみたいと思います。 Apple Developer サイトの情報に従って Apple Park の地図を表示してみます。

MapKit をインポート
@State 変数として MKCoordinateRegion 型の変数 region を作成
- MKCoordinateRegion は以下を引数にもつ

引数	説明
center	中心地点を CLLocationCoordinate2D を緯度経度を基に指定
latitudinalMeters	地図に表示する南北方向の広さをメートルで指定
longitudinalMeters	地図に表示する東西方向の広さをメートルで指定

Map オブジェクトには上述した region 変数を引数に指定

import MapKit

struct AppleParkMap: View {
   
   @State private var region = MKCoordinateRegion(
       center: CLLocationCoordinate2D(latitude: 37.334_900,
                                      longitude: -122.009_020),
       latitudinalMeters: 750,
       longitudinalMeters: 750
   )
 
   var body: some View {
       Map(coordinateRegion: $region)
   }
}

ContentView でこの View (AppleParkMap) を呼び出す形にしてビルドしてみると以下のような結果となります。コード上は東西南北共に 750 m としていますが、縦長の画面に表示するため、南北 750 m として表示されます。

なお以下のように東西方向 50 m とすると、東西 50 m の地図が表示されます。指定したサイズを表示領域に最大限表示するようなかたちになっています。

    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 37.334_900,
                                       longitude: -122.009_020),
        latitudinalMeters: 750,
        longitudinalMeters: 50
    )

[ads]

地図上にピンを追加

[ads]

続いて、先程作成した地図に Apple Developer サイトの情報を参考にピンを追加してみたいと思います。

Annotation Items の定義

Map に対して annotationItems として、以下のように定義した MapAnnotationProtocol 型で Map ピンを指定する必要があります。 init() の中に記載された通り、引数に緯度, 経度の数値を指定することで MapAnnotationProtocol 型を生成することができます。

struct IdentifiablePlace: Identifiable {
    let id: UUID
    let location: CLLocationCoordinate2D
    init(id: UUID = UUID(), lat: Double, long: Double) {
        self.id = id
        self.location = CLLocationCoordinate2D(
            latitude: lat,
            longitude: long)
    }
}

Annotation Items を引数に指定し Map にピンを追加

上記を annotationItems 引数に追加するように先程の View を以下のように修正します。

struct AppleParkMap: View {
    let place: IdentifiablePlace

    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 37.334_900,
                                       longitude: -122.009_020),
        latitudinalMeters: 750,
        longitudinalMeters: 750
    )
    
    
    var body: some View {
        Map(coordinateRegion: $region, annotationItems: [place]) {
            place in MapPin(coordinate: place.location, tint: Color.purple)
        }
    }
}

同時に ContentView からの呼び出し方法も修正していきます。先程の例では AppleParkMap View には引数が不要でしたが、今回は Apple Park の緯度, 経度を指定することで Apple Park にピンを立てたいと思います。

struct ContentView: View {
    var body: some View {
        AppleParkMap(place: IdentifiablePlace(lat: 37.334_900, long: -122.009_020))
    }
}

ピンを追加した Map

以下の通り Apple Park に紫色のピンを立てることができました。

[ads]

Map にピンを複数追加

[ads]

本記事の最後に地図上にピンを複数追加する方法を紹介します。今まで作成してきた Apple Park を中心とした地図に以下 2つのピンを追加してみたいと思います。

Steve Jobs Theater
Apple Park Tantau Reception

ピンの緯度, 経度定義

以下のように MapAnnotationProtocol 型として定義した IdentifiablePlace オブジェクトとして今回追加するピンの情報を登録します。

    @State private var places: [IdentifiablePlace] = [
        // Steve Jobs Theater
        IdentifiablePlace(lat: 37.331_01,  long: -122.007_45),
        // Apple Park Tantau Reception
        IdentifiablePlace(lat: 37.332_44,  long: -122.006_14)
    ]

なお、緯度経度情報は Google Map 上で右クリックするなどで以下のように知ることができます。

Map 描画部分実装

Map 描画部分は以下のような引数を用います。

引数	説明
coordinateRegion	MKCoordinateRegion で指定した緯度経度地点とその範囲
annotationItems	annotation として表示するアイテムここでは緯度経度情報を含む IdentifiablePlace オブジェクトの配列
annotationContent	クロージャーとしてannotation アイテムを生成する処理

AppleParkMap の body を以下のように修正します。今回はピンの色を赤にしてみます。

    var body: some View {
        Map(coordinateRegion: $region,
            annotationItems: places,
            annotationContent: { place in
                MapPin(coordinate: place.location, tint: Color.red)
            }
        )
    }

複数ピンを追加した Map

ビルドすると以下のように 2 つの場所にピンが追加された地図が表示されます。

[ads]

まとめ

[ads]

MapKit をインポートし Map を利用可能に
地図は CLLocationCoordinate2D で中心地点を決め、あわせて表示範囲をメートルで指定
ピンを立てるときは MapAnnotationProtocol 型でピンの位置を定義
ピンを複数立てるときは Map の引数として以下を指定
- annotationItems: 立てたいピンの位置情報を MapAnnotationProtocol 型で配列として定義
- annotationContent: クロージャーの中で MapPin 生成処理を記述

参照情報

Apple Developer Site

Map

How do I add pins and other annota…

[ads]

サンプルコード ( SwiftUI )

[ads]

1 つのピンを Map に表示するサンプル

//
//  ContentView.swift
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        AppleParkMap(place: IdentifiablePlace(lat: 37.334_900, long: -122.009_020))
    }
}

//
//  AppleParkMap.swift
//

import SwiftUI
import MapKit

struct IdentifiablePlace: Identifiable {
    let id: UUID
    let location: CLLocationCoordinate2D
    init(id: UUID = UUID(), lat: Double, long: Double) {
        self.id = id
        self.location = CLLocationCoordinate2D(
            latitude: lat,
            longitude: long)
    }
}

struct AppleParkMap: View {
    let place: IdentifiablePlace

    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 37.334_900,
                                       longitude: -122.009_020),
        latitudinalMeters: 750,
        longitudinalMeters: 750
    )
    
    
    var body: some View {
        Map(coordinateRegion: $region, annotationItems: [place]) {
            place in MapPin(coordinate: place.location, tint: Color.purple)
        }
    }
}

[ads]

複数ピンを Map に表示するサンプル

//
//  ContentView.swift
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        AppleParkMap()
    }
}

//
//  AppleParkMap.swift
//

import SwiftUI
import MapKit

struct IdentifiablePlace: Identifiable {
    let id: UUID
    let location: CLLocationCoordinate2D
    init(id: UUID = UUID(), lat: Double, long: Double) {
        self.id = id
        self.location = CLLocationCoordinate2D(
            latitude: lat,
            longitude: long)
    }
}

struct AppleParkMap: View {
    @State private var places: [IdentifiablePlace] = [
        // Steve Jobs Theater
        IdentifiablePlace(lat: 37.330_93,  long: -122.007_46),
        // Apple Park Tantau Reception
        IdentifiablePlace(lat: 37.332_44,  long: -122.006_14)
    ]

    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 37.334_900,
                                       longitude: -122.009_020),
        latitudinalMeters: 750,
        longitudinalMeters: 750
    )
    
    var body: some View {
        Map(coordinateRegion: $region,
            annotationItems: places,
            annotationContent: { place in
                MapPin(coordinate: place.location, tint: Color.red)
            }
        )
    }
}

[ads]