![](https://memoriainc.com/wp-content/uploads/2024/01/icon_fukushima-e1705915125201-150x150.png)
こんにちは〜、株式会社メモリアインクの福嶋です!
この記事では、MKMapView
を活用しアプリ上に地図を表示する方法を徹底的に解説します。
この記事を読んで分かること…
・MKMapView
の基本的な設定方法
・地図の表示範囲の調整方法
・地図にピンを打つ方法
MKMapViewとは?
MKMapView
は、iOSアプリに地図を表示するためのコンポーネントです。
まずは、MKMapView
をビューに追加する基本的な手順から始めましょう!
MKMapViewの基本設定
MKMapView
を使用するには、まずMapKitフレームワークをインポートし、StoryboardまたはSwiftUIでMKMapViewを設定する必要があります。以下の手順では、Storyboardを使用して地図を表示する基本的な方法を説明します。
Step1: StoryboardにMapViewを追加
①MainStoryboardを選択して、+アイコンタップ
②MapKitViewをStoryboard上にドラッグ&ドロップ
![【Swift】アプリ上に地図(MKMapView)を表示する方法を徹底解説!](https://memoriainc.com/wp-content/uploads/2024/02/スクリーンショット-2024-02-25-19.51.50-1024x665.png)
![【Swift】アプリ上に地図(MKMapView)を表示する方法を徹底解説!](https://memoriainc.com/wp-content/uploads/2024/02/スクリーンショット-2024-02-25-19.51.50-1024x665.png)
③配置したMapKitViewを選択して、下図のようにAutoresizingを設定
![【Swift】アプリ上に地図(MKMapView)を表示する方法を徹底解説!](https://memoriainc.com/wp-content/uploads/2024/02/スクリーンショット-2024-02-25-19.53.12-1024x665.png)
![【Swift】アプリ上に地図(MKMapView)を表示する方法を徹底解説!](https://memoriainc.com/wp-content/uploads/2024/02/スクリーンショット-2024-02-25-19.53.12-1024x665.png)
Step2:ViewControllerでのMapViewの設定
①ViewControllとMKMapView
を紐付ける
![【Swift】アプリ上に地図(MKMapView)を表示する方法を徹底解説!](https://memoriainc.com/wp-content/uploads/2024/02/スクリーンショット-2024-02-25-20.56.59-1024x665.png)
![【Swift】アプリ上に地図(MKMapView)を表示する方法を徹底解説!](https://memoriainc.com/wp-content/uploads/2024/02/スクリーンショット-2024-02-25-20.56.59-1024x665.png)
②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
などがあります。
以上で、実装は完了です。ビルドして確認してみましょう!
![【Swift】アプリ上に地図(MKMapView)を表示する方法を徹底解説!](https://memoriainc.com/wp-content/uploads/2024/02/Simulator-Screenshot-iPhone-15-Pro-2024-02-25-at-21.11.26-472x1024.png)
![【Swift】アプリ上に地図(MKMapView)を表示する方法を徹底解説!](https://memoriainc.com/wp-content/uploads/2024/02/Simulator-Screenshot-iPhone-15-Pro-2024-02-25-at-21.11.26-472x1024.png)
地図にピンを追加する
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()
内で呼び出して実装完了です。
ビルドして確認してみましょう。
![【Swift】アプリ上に地図(MKMapView)を表示する方法を徹底解説!](https://memoriainc.com/wp-content/uploads/2024/02/Simulator-Screenshot-iPhone-15-Pro-2024-02-25-at-21.24.02-472x1024.png)
![【Swift】アプリ上に地図(MKMapView)を表示する方法を徹底解説!](https://memoriainc.com/wp-content/uploads/2024/02/Simulator-Screenshot-iPhone-15-Pro-2024-02-25-at-21.24.02-472x1024.png)
まとめ
いかがでしたか?
この記事では、SwiftとMKMapViewを使用してiOSアプリ上に地図を表示する方法を詳しく解説しました。
地図機能の実装は、アプリの実装の可能性を広げれくれます。この記事が皆様のお力になれれば嬉しいです!
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_fukushima-e1705915125201-150x150.png)
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_fukushima-e1705915125201-150x150.png)
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_fukushima-e1705915125201-150x150.png)
この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
コメント