爆速でMAPの表示、ピンを立てる方法@Swift 3

こんにちは、iOSエンジニアの渡部です。

自己紹介とその場しのぎの記事を書いたのでそろそろ技術ネタを書いていきます。

今回はタイトル通りMAPについてです。
ネット上に色々なサンプルがありますが、この記事では「とにかく早くMAPを表示させる」こと、 「MAP上にピンを立てて吹き出しを表示する」ことにフォーカスしてます。

慣れてる人なら5分くらいでできるはず。

手順

1.framework追加
2.StoryboardでMAPを追加
3.import
4.コーディング
5.ビルド
では順を追って説明します。

1.frameworkの追加

まずはXcodeを起動し、新規プロジェクトを用意してください。

Single View Application を選択し「MapSample」とアプリ名をつけます。

プロジェクトを選択して、GeneralからLinked Frameworks and Librariesのプラスボタンから MapKit frameworkを追加します。

2.StoryboardでMAPを追加

次にStoryboardでMAPを追加し、

コードと紐付けます。

ついでに簡単にAutoLayoutもつけてと。

3.import

ViewControllerにimport文を追加します。

import UIKit
import MapKit

class ViewController: UIViewController {
    
    @IBOutlet weak var mapView: MKMapView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

4.コーディング

必要最低限のコードを載せます。
たった数行です。

class ViewController: UIViewController {
    
    @IBOutlet weak var mapView: MKMapView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        /// 以下を追加 ///
        let coordinate = CLLocationCoordinate2DMake(35.696135, 139.768322)
        let span = MKCoordinateSpanMake(0.005, 0.005)
        let region = MKCoordinateRegionMake(coordinate, span)
        self.mapView.setRegion(region, animated:true)
        
        let annotation = MKPointAnnotation()
        annotation.coordinate = CLLocationCoordinate2DMake(35.696135, 139.768322)
        annotation.title = "株式会社ゴーリスト"
        annotation.subtitle = "変な人がいっぱい"
        self.mapView.addAnnotation(annotation)
        /////////////////
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

これで実装完了！

ちなみに

let coordinate = CLLocationCoordinate2DMake(35.696135, 139.768322)  

は緯度、経度です。

表示したい緯度、経度を調べるにはここがオススメです。
Googleマップで緯度・経度を求める

let span = MKCoordinateSpanMake(0.005, 0.005)  

は地図の範囲です。
値が小さければ小さいほど地図の範囲が狭まります。

annotation.title = "株式会社ゴーリスト"  

はピンのタイトル

annotation.subtitle = "変な人がいっぱい"  

はサブタイトルです。
実行するとわかります。

5.ビルド

実行結果はこうなるはずです。

ピンをタップするとこう！

簡単でしたね。
次回はFacebookログインあたりの記事書きます！