【Swift UI】MapKitで地図機能を実装する方法!iOS17以降

この記事からわかること
- Swift UIで地図(Maps)を表示する方法
- MapKitフレームワークの使い方
- アノテーションの設置方法とカスタマイズ
index
[open]
\ アプリをリリースしました /
環境
- Xcode:16.3
- iOS:18.5
- Swift:6
- macOS:Sequoia 15.4
MapKitがiOS17以降で使い方が変わった
アプリ上で簡単に地図Viewを実装できるMapKit
ですがiOS17以降からMap
構造体のイニシャライザなどが一部非推奨に変わり、別のイニシャライザを使用して実装する方針に変更になりました。以前はcoordinateRegion
にMKCoordinateRegion
型を渡すことで表示位置などを制御していましたが、少し使い方自体が変わっているので新しい実装方法をまとめて行きます。
iOS17以前の実装方法などは以下の記事を参考にしてください。
地図を表示させる
地図を表示させるだけであれば1行で完結します。この場合は特に表示位置を指定していないのでデフォルトの位置が表示されます。日本から開いているからなのか日本が表示されました。

Map
構造体を使うことは変わっていませんがイニシャライザがいろいろ変わっているのでみていきます。
新しいイニシャライザ
iOS17以降で推奨されているMap構造体のイニシャライザは以下のような引数を持つものに更新されました。ざっくり説明を入れると以下のような感じになります。
=> 定義:init(bounds:interactionModes:scope:content:)
=> 定義:init(initialPosition:bounds:interactionModes:scope:content:)
interactionModes
ユーザーが操作できる機能を指定値から設定
指定の位置で地図を表示させる
指定の初期位置で地図を表示させるにはinitialPosition
にMapCameraPosition
型で位置情報を指定します。例えば初期表示位置を東京スカイツリーの場所にしたい場合は以下のように実装します。
表示範囲を制御する
マップの表示範囲を制御するにはbounds
にMapCameraBounds
型で指定します。MapCameraBounds
型ではズーム可能な距離や表示領域などを制御することが可能です。例えばズーム可能な距離を制御する場合はminimumDistance
/maximumDistance
にメートル単位で値を指定します。
パンできる範囲(Mapをスライドさせた時に限界表示領域)はcenterCoordinateBounds
にMKCoordinateRegion
型で指定し、中心地と許可する範囲をMKCoordinateSpan
型で指定します。例えば「東京スカイツリーから±0.05度範囲までしか表示させないようにする」場合は以下のようになります。
マーカーやアノテーションを配置する
地図にマーカーやアノテーションを配置するにはcontent
にクロージャーの中に指定します。この中にはMarker
やAnnotation
型などいろいろ配置することができるようになっています。
マーカーを表示する
シンプルなデフォルトのマーカーを表示させたいだけであればMarker
を使用します。引数に表示名と表示位置を指定するだけでピンク色のマーカーが表示されます。

カスタムアノテーションを表示する
カスタムデザインのアノテーションを表示させたい場合はAnnotation
を使用します。クロージャーの中にView
で自由にデザインを実装することが可能です。

領域を可視化する
領域を可視化させたい場合はMapCircle
を使用します。radius
には円の半径を指定します。

2つのポイント間を直線で結ぶ
2つのポイント間を直線で結ばせたい場合はMapPolyline
を使用します。coordinates
に結びたい位置情報を指定します。ただこれはあくまで直線で結ぶだけで経路表示ではないので注意してください。
【SwiftUI】MapKitで地図に経路を表示させる方法!MKMapViewDelegate

地図上をタップした位置の緯度・経度を取得する
個人的に一番嬉しかったのがこれです。以前はSwift UIだけでは完結できなかった地図上をタップした位置の緯度・経度を取得する実装が簡単にできるようになりました。MapReader
でラップしてonTapGesture
からタップした位置情報を取得することができます。

現在位置を表示する
地図上にユーザーの現在位置を表示するにはUserAnnotation
型を使用します。ただユーザー位置情報を表示するためにはユーザーの許可が必要になるので注意してください。許可申請方法などは以下の記事を参考にしてください。
【SwiftUI】現在地を取得して表示する方法!MapKitで地図アプリ
UserAnnotation
を使用することで現在位置にアノテーションを付与することができますが地図自体の初期表示位置が変更されるわけではないので注意してください。mapControls
にMapUserLocationButton
を付与することで簡単に現在位置へ地図を動かすことも可能です。
おすすめ記事
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。