更新日: 2019年2月21日
公開日: 2019年1月19日

【かけ出しiPhoneアプリ開発】Googleマップを使ってみよう

iPhoneアプリ開発をはじめたばかりの方にお届けする【かけ出しiPhoneアプリ開発】シリーズ。
今回は『Googleマップ』の使い方をご紹介します。

アプリ内で地図を使う際に役立つ知識になるでしょう。

本稿で使用する XCode のバージョン： XCode 10.1、 Swift 4.2

【かけ出しiPhoneアプリ開発】Googleマップを使ってみよう
【今回の目標】アプリでGoogleマップを表示
XCodeでのGoogleマップの使い方
GoogleマップとMapKit
まとめ

【かけ出しiPhoneアプリ開発】Googleマップを使ってみよう

【今回の目標】アプリでGoogleマップを表示

今回は単純に、アプリ内で Googleマップを開くだけのアプリ制作が目標です。ただ地図を開くだけなのですが、 Google APIを使ったり、ライブラリ管理の CocoaPods を使ったりと作業項目はたくさんあります。アプリ開発初心者の方にとっては色々参考になると思いますよ。

XCode Google Map サンプル App のコード

XCodeでのGoogleマップの使い方

Step.1 新規プロジェクトの用意

まず最初に新規プロジェクトを作成しましょう。 XCode 起動後、「Create New Xcode Project」 → 「Single View App」で新規プロジェクトが作成できますね。

Step.2 Googleマップを使うための準備（CocoaPods）

XCodeでGoogleマップを使おうと思うと、一定の設定手順を踏む必要があります。

まずは Googleの公式ページにもあるように、ライブラリ管理の CocoaPods というソフトをパソコンにインストールする必要があります。

こちらのコードをコピーして、ターミナルに貼付け、実行します。

sudo gem install cocoapods

CocoaPods のインストールが完了すると上図のように「・・ gems installed」と表示。次は XCode のプロジェクトで Googleマップを使えるように設定を行います。

Step.3 Googleマップを使うための準備（Podfile）

Googleの公式ページに従って、次は Podfile を作成します。Podfile 内に記載するコードは、以下の通り。

source 'https://github.com/CocoaPods/Specs.git'
target 'プロジェクト名' do
pod 'GoogleMaps'
pod 'GooglePlaces'
end

Podfile・・・CocoaPodsでライブラリを管理する際に必要な設定ファイル

Podfileの作成は、 XCode画面左サイドバー内にあるファイル群の中の一番上にある「プロジェクト名」（青色アイコン）を右クリック。そして「New File...」を左クリック。

次の画面では「Empty」を選択。

ファイル名は、 Podfile と記載。画面上は『Podfile.xib』になると思います。これで Create。

Podfile を扱う上で、 .xib のファイル形式は違いますので、 .xib をプレーンテキストに変換します。

ファイル形式の変換は、Xcode右サイドバー内の「Type」をクリック。するとたくさんのファイル形式が表示されますので、その中から Text 項目内の「Plane Text」を選択。そしてファイル名の拡張子を削除して「Podfile」だけにします。

これで Podfile の完成です。

Step.4 Googleマップを使うための準備（Podfileの編集）

デフォルトの Podfile では使えないので、中身を編集する必要が。まず Podfileを開かないといけないのですが、開き方は「Podfileファイル上で右クリック → Open in New Tab」で Podfile を開きます。すると XML形式のコードが書かれていますが、一旦全部消します。

そして Googleの公式ページにもある Podfile のコードをコピー＆ペースト。

source 'https://github.com/CocoaPods/Specs.git'
target 'YOUR_APPLICATION_TARGET_NAME_HERE' do
  pod 'GoogleMaps'
  pod 'GooglePlaces'
end

target 部分を自分のプロジェクト名に変更します。

これで Podfile の設定は完了。次はプロジェクトに必要なライブラリを Podfile を使ってインストールします。

Step.5 Googleマップを使うための準備（ライブラリのインストール）

Googleマップの使用に必要なライブラリをインストールするため、 Podfile を実行します。まずは Podfile を実行するために、ターミナル画面から Podfile があるディレクトリに移動。

Podfileを左クリックしたまま、ターミナル上にドラッグ＆ドロップしてみましょう。

すると上図のようにディレクトリが自動で表示されます。ただこれではダメなので、文頭に cd を加え、文末の Podfile を消します。

そして実行。次は Podfile を実行します。

Podfile の実行は、

pod install

これだけですが、私の場合、インストール完了に約 30分かかりました。

インストールが無事完了すると上記のような画面が。最後の注意書きを見てみますと、

[!] Please close any current Xcode sessions and use `GoogleMap-Test.xcworkspace` for this project from now on.

【Google訳】　現在のXcodeセッションをすべて閉じて、今後このプロジェクトでは `GoogleMap-Test.xcworkspace`を使用してください。

指示に従って Xcode を一旦閉じましょう。

Step.6 Googleマップ用XCodeの起動

Podインストール時にあった

 「今後このプロジェクトでは `GoogleMap-Test.xcworkspace`を使用してください。」

を実行するためにターミナルからコマンドを実行します。

open GoogleMap-Test.xcworkspace

すると上図のように今までとちょっと違った画面が表示。今まではプロジェクト名のフォルダしかなかったのに、新しく「Pods」というフォルダが登場。フォルダを開いてみると以下のように。

アプリの開発は今までどおり、プロジェクト名下のファイル群で行っていきます。

ちなみにフォルダでプロジェクトの構成を確認してみると以下のように。

Googleマップを使ったアプリ開発を行う際は、プロジェクト名.xcodeproj ではなく『プロジェクト名.xcworkspace』をダブルクリックして XCode を起動する必要がありますね。

Step.7 APIの設定

アプリ開発で Googleマップを使う場合、 Googleの APIキーを取得する必要があります。 APIキーの取得は、公式ページに書かれているリンクをクリック（上図参照）。

Continue をクリック。

選択欄が「Maps SDK for iOS」になっていることを確認し、「What credentials do I need?」をクリック。

すると APIキーが表示されますので、「Done」ボタンで完了します。

APIキーが作成できたら上図のように表示されますので、 APIキーをコピーしておきます。

Step.8 プログラミング

それでは Googleマップの開発環境が整ったところで、 Googleマップを表示するプログラムを作成していきましょう。

まずは ViewController.swift を開きます。そして

super func viewDidLoad()

の下にAPIキーを記述。

GMSServices.provideAPIKey("APIキー")

後は Google公式ページに記載されているコードをコピー＆ペースト。

【Google公式ページのコード】

import UIKit
import GoogleMaps

class YourViewController: UIViewController {

  // You don't need to modify the default init(nibName:bundle:) method.

  override func loadView() {
    // Create a GMSCameraPosition that tells the map to display the
    // coordinate -33.86,151.20 at zoom level 6.
    let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 6.0)
    let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)
    view = mapView

    // Creates a marker in the center of the map.
    let marker = GMSMarker()
    marker.position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.20)
    marker.title = "Sydney"
    marker.snippet = "Australia"
    marker.map = mapView
  }
}

【ViewController.swift】