どこよりも丁寧なGoogle Maps SDK for iOSの使い方

**「Mapを表示するぞ！！」**

…と、何だかんだiOSアプリを本格的に作成していくためのスタートラインとして、まずはAPIの使い方を学習していきました。

Maps SDK for iOSのチュートリアルは多く存在しますが、右も左も分からない初心者にはあまり丁寧な記事が見つからなかったので、作成がてらアウトプットも兼ねて順を追って紹介していきます。

※開発環境
Xcode 12
Swift 5.3

<h2>APIって？</h2>
APIとはApplication Programming Interface（アプリケーション・プログラミング・インターフェイス）略称です。

[APIについて](http://e-words.jp/w/API.html)

>APIとは、あるコンピュータプログラム（ソフトウェア）の機能や管理するデータなどを、外部の他のプログラムから呼び出して利用するための手順やデータ形式などを定めた規約のこと。

（なるほど、分からん…！）

概要を端的にすると、**ソフトウェア同士のやりとりの橋渡しの機能**がAPIとなります。
（決まった方法でアクセスをすれば決まった結果を返してくれる橋渡し機能）
GoogleやTwitterなど、多くの会社はAPIを提供しています。その使いたい対象の機能（サービス）を他のプログラムから呼び出してもらうための命令や関数のことをAPIといいます。

<h2>Google Mapを使えるように設定</h2>

GoogleのMap API(iOS)を使いたいので、設定を行います。

[Google Maps Platform](https://cloud.google.com/maps-platform/)に飛び
画面右上のConsoleに移動します。


![image_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/779616/144eb52c-a2c0-cc9a-83f4-a5b8e69d94c5.png)


「プロジェクトの選択」をクリックし、新しいプロジェクトを作成します。

![image_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/779616/174d3fee-430b-6385-9610-fbd9a0e30cab.png)


プロジェクト名を入力後、作成ボタンを押します。

![image_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/779616/b985a5f3-d777-ae8c-d68b-a84ff631fcbc.png)


プロジェクトが開くと思うので、APIから**Maps SDK for iOS**を選択


<h3>※ホームに遷移していた場合</h3>

![image_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/779616/02706210-2539-5f92-2159-1835273a4b26.png)


APIとサービス → ダッシューボードを選択

![image_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/779616/ef903edf-6dc6-494f-7df2-a36090cba3cb.png)


APIとサービスの有効化をクリック

![image_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/779616/1ea7c13c-c6d7-af43-daf8-eb2a6b435312.png)
![image_08_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/779616/8cb88095-c829-cea5-1bae-9d036de03c40.png)


APIライブラリの画面が出てきますので、**Maps SDK for iOS**を選択してください。

![image_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/779616/fdc5dc75-03f4-aeec-da20-c4cec809116e.png)



**有効にする**をクリックします。

![image_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/779616/031f05eb-0044-b8f1-810f-d647063af15c.png)





管理画面が出てきますので、認証情報からに「認証情報を作成」を押して「APIキー」を選択します。

![image_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/779616/e62b442b-32c1-8d40-c2ce-1ce0c50c91c6.png)



これでAPIキーが作成されました。
しかし、まだ設定は終わっていません。キーに制限がないとの注意が出ますので、制限を有効していきます。対象となるAPIキーを選択して設定していきます。


![image_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/779616/7ba8b147-632b-763e-74a8-5e056aa33567.png)


APIキーの制限と名前変更から今回使用したい**Maps SDK for iOS**を選択チェックして保存します。

これでGoogle MapsのAPIを使用する設定が終わりました。

<h2>APIKeyを使う</h2>

Xcodeからプロジェクトを作成し、Podfileに以下を記載しpod installします。

```ruby:Podfile
target 'プロジェクト名' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!
  source 'https://github.com/CocoaPods/Specs.git' #追加
  pod 'GoogleMaps' #追加
  pod 'GooglePlaces' #追加
  # Pods for プロジェクト名

end
```

次にAppDelegateにAPIKeyを設定していきます。
AppDelegate.swiftを開いて、`import GoogleMaps`を追加します。

※1`didFinishLaunchingWithOptions`のメソッド部分に以下を追記します。
※1はアプリ起動後にAppDelegateのdidFinishLaunchingWithOptionsが呼ばれ、この部分で全体的な機能の初期化処理を行います。

```ruby:AppDelegate.swift
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        
        #発行したAPIキーを設定
        GMSServices.provideAPIKey("発行したAPIキーをここに記載")
        
        return true
    }
```

次に`Info.plist`に移動し、`Information Property List`にArrayに`googlechromes`と`comgooglemaps`を追加しましょう。
![image_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/779616/e60c47af-a4e1-2c64-9f7a-551de11bb6ce.png)


ViewController.swiftを開きimportを追加しましょう。

`import GoogleMaps
import CoreLocation
`

viewDidLoadの中に以下のコードを書いていきます。

```ruby:ViewController.swift
 override func viewDidLoad() {
        super.viewDidLoad()
        #表示するマップの座標位置と表示されるサイズを生成
        let camera = GMSCameraPosition.camera(withLatitude: 34.6862, 
                                                                                  longitude: 135.5196, zoom: 6.0)
        let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)
        mapView.isMyLocationEnabled = true #現在地情報を有効にする
        view = mapView #UIViewのインスタンス
        
        #指定箇所にピンを立てる
        let marker = GMSMarker()
        marker.position = CLLocationCoordinate2D(latitude: 34.6862,
                                                                                    longitude: 135.5196)#緯度、軽度を設定
        marker.title = "Osaka"
        marker.snippet = "Japan"
        marker.map = mapView
    }
```

<h2>起動</h2>

ビルド&ランをしましょう。
実行後、選択したロケーションにピンが立っているかと思います。

![image_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/779616/3672de79-48e4-def9-0e91-2f164e98bebd.png)




以上、Google Maps APIの使い方でした。