Swift:Maps SDK for iOSでAPI取得からGoogle Maps(グーグルマップ)表示まで

今回はAPIを取得してGoogleMapsを表示する方法を書いていこうと思います。

というのも、やり方を忘れる→もう一度調べる→実装完了と毎回調べるのが面倒なので、備忘録として残すかたちになります。😅

初めての方は参考になれば幸いです。

 

■Podfileの作成とGoogleMapsのインストール

まず該当プロジェクトのターミナルを開きます。

f:id:SumJun-Blog:20210524070029p:plain

pod init」と入力してPodfileを作成します。

*もしCocoaPodsのインストールができていなければ、まずはそのインストールからお願いします。やり方は検索すればすぐに出てくるはずです。

f:id:SumJun-Blog:20210524070035p:plain

プロジェクトフォルダの中に作成したPodfileを開き、「pod 'GoogleMaps'」と入力して保存しましょう。

f:id:SumJun-Blog:20210524070100p:plain

f:id:SumJun-Blog:20210524070110p:plain

そして先ほどの該当プロジェクトのターミナルをまた開き、「pod install」と入力しPodfileで入力したことをインストールします。下記画像のように黄緑文字でインストール完了のメッセージが出てきたら、ターミナルを閉じましょう。

*初めてPodfileとターミナルを利用される方は、二つとも似ているように見えて区別に混乱するかもしれませんが慣れていきましょう。僕も最初は混乱してました、、、😅

f:id:SumJun-Blog:20210524070118p:plain

 

APIの取得(キー作成)

次はAPIを取得していきます。

 

(1)プロジェクトの作成

そのために「Google Cloud Platform」で新規プロジェクトを作成しましょう。

*もしアカウント未登録の場合はまず登録からお願いします。

f:id:SumJun-Blog:20210524070123p:plain

f:id:SumJun-Blog:20210524070128p:plain

 

(2)APIの有効化

プロジェクトを作成したら、ホームのサイドバーの「APIとサービス」→「ライブラリ」と進んでいきましょう。

f:id:SumJun-Blog:20210524070142p:plain

そこに各種APIがあり、「Maps SDK for iOS 」をクリックします。

f:id:SumJun-Blog:20210524070151p:plain

開いたら、赤い枠で囲った部分を「有効」にします。

*これが有効になっていないと、実装しても使用できません。

f:id:SumJun-Blog:20210524074341p:plain

*(2)と(3)はもしかしたら逆かもしれません。また有効化を先にしたとしても、そこからAPIキー作成の画面に移動できるかもしれません。曖昧で申し訳ありません🙇‍♂️

 

(3)APIキーの作成

APIキーの作成していきます。

ホーム→「APIとサービス」→「認証情報」→「+認証情報の作成」→「APIキー」と進んだいきます。

f:id:SumJun-Blog:20210524073941p:plain

すると、自動でキーを作成し下記画面のように表示されます。そこから「キーを制限」をクリックし、APIを使用する対象のXcodeプロジェクトなどを設定します。

f:id:SumJun-Blog:20210524070205p:plain

下記画面が表示されますので、今回はiOSアプリにチェックをし、対象のXcodeプロジェクトのバンドルIDをコピペしましょう。

f:id:SumJun-Blog:20210524070211p:plain

*バンドルIDは下記画像の箇所に記載されています。

f:id:SumJun-Blog:20210524070218p:plain

入力が終わったら、完了ボタンなどを押して閉じましょう。

もう一度ホーム→「APIとサービス」→「認証情報」と進んでいくと下記のように作成したAPIキーが表示されているはずです。

このキー値をXcodeプロジェクトにコピペします。

*キー値の横の四角いマークをクリックすればコピーできます。

*「APIキー1」の左に緑でチェックマークが入っていることを確認してください。この表示になっていないと恐らく使用できないと思いますので、有効化の確認、バンドルIDの入力漏れがないかなど再確認しましょう。

f:id:SumJun-Blog:20210524070232p:plain

 

■マップの実装

Xcodeプロジェクトを開いたら、AppDelegateファイルにて下記画像の赤線部分を追加していき、先ほど作成したAPIキー値をコピペします。

GMAServices.provideAPIKey("ここにコピーしてきたAPIキー値")

f:id:SumJun-Blog:20210524070238p:plain

次はViewControllerにてマップを表示させるコーディングをしていきます。

*最初に映し出す位置を指定してマップを表示するコーディングのみです。

f:id:SumJun-Blog:20210524070244p:plain

 

シミュレータで実行すると無事、表示されました!😃

f:id:SumJun-Blog:20210524070250p:plain

 

以上、見ていただきありがとうございます。