【Swift】地図(MKMapView)の表示方法から地図上にピンを立て方を徹底解説！

2024年2月25日2024年4月2日

ふくしま

こんにちは〜、株式会社メモリアインクの福嶋です！

この記事では、MKMapViewを活用しアプリ上に地図を表示する方法を徹底的に解説します。

この記事を読んで分かること…
・MKMapViewの基本的な設定方法
・地図の表示範囲の調整方法
・地図にピンを打つ方法

MKMapViewとは？

MKMapViewは、iOSアプリに地図を表示するためのコンポーネントです。
まずは、MKMapViewをビューに追加する基本的な手順から始めましょう！

MKMapViewの基本設定

MKMapViewを使用するには、まずMapKitフレームワークをインポートし、StoryboardまたはSwiftUIでMKMapViewを設定する必要があります。以下の手順では、Storyboardを使用して地図を表示する基本的な方法を説明します。

Step1: StoryboardにMapViewを追加

①MainStoryboardを選択して、＋アイコンタップ
②MapKitViewをStoryboard上にドラッグ&ドロップ

③配置したMapKitViewを選択して、下図のようにAutoresizingを設定

Step2:ViewControllerでのMapViewの設定

①ViewControllとMKMapView を紐付ける

②MapViewの設定の設定

import UIKit
import MapKit

class ViewController: UIViewController {

    @IBOutlet weak var mapView: MKMapView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 地図に表示する領域の構造体
        var region = MKCoordinateRegion()
        
        // 表示する中心位置(東京タワー)
        region.center = CLLocationCoordinate2D(latitude: 35.658611, longitude: 139.745556)
        // 緯度・経度方向の表示範囲
        region.span.latitudeDelta = 0.02
        region.span.longitudeDelta = 0.02
        // 設定の反映
        mapView.setRegion(region, animated: false)
        // 地図のスタイルの設定
        mapView.mapType = .standard
    }
}

コード説明：
・MKCoordinateRegion() で地図を表示する領域をインスタンス化(11行目)
・CLLocationCoordinate2D(latitude: , longitude:) で表示する中心位置を設定(14行目)
・緯度・経度方向の表示範囲を設定(16-17行目)
・上記で設定したものをMapViewに反映する(19行目)
・地図のスタイルを設定(21行目)

地図の表示スタイルを設定するmapView.mapType には.standard の他にも.satelliteや.hybridなどがあります。

以上で、実装は完了です。ビルドして確認してみましょう！

地図にピンを追加する

ViewControllerでピンを追加する関数addPinToMap() を定義します。

    func addPinToMap() {
        let pin = MKPointAnnotation()
        pin.coordinate = CLLocationCoordinate2D(latitude: 35.658611, longitude: 139.745556) // ピンの座標（東京タワー）
        pin.title = "東京タワー"
        mapView.addAnnotation(pin)
    }

コード説明：
・地図のピンのクラスMKPointAnnotation() をインスタンス化(2行目)
・ピンを立てる場所を設定(3行目)
・ピンの名称を設定(4行目)
・MapViewにピンを追加(5行目)

作ったメソッドaddPinToMap() をviewDidLoad()内で呼び出して実装完了です。
ビルドして確認してみましょう。