- iOS
- 2017-03-02 - 更新:2018-02-15
地図を使ったiOSアプリを開発するにあたって、標準マップとGoogleMapのどちらを使おうかと調べてみたら、以下のサイトで違いが紹介されていました。
http://web-terminal.blogspot.jp/2013/06/google-maps-sdk-for-iosmapkit.html
マーカーの扱いの違いで私はGoogleMapを使うことにしました。
まずは、表示できるところまでやってみようということで、その流れをご紹介したいと思います。
Xcodeのバージョンが6.3以降であることを確認します。※17/03/02時点
CocoaPodsという依存関係を管理するためのオープンソースのツールが必要になりますので入手します。
ターミナルで以下のコマンドを実行します。
sudo gem install cocoapods
CocoaPodsを使ってプロジェクトにGoogle Maps SDK for iOSを組み込みます。
プロジェクトのディレクトリ(.xcodeprojファイルがあるところ)に「Podfile」という名前のファイルを作成します。
ターミナルでプロジェクトのディレクトリに移動し以下を実行
cd <path-to-project> vim Podfile
以下の内容を記述しファイルを保存します。
source 'https://github.com/CocoaPods/Specs.git' platform :ios, '8.1' pod 'GoogleMaps'
pod install
コマンドを実行します。
Podspecで指定されているAPIが、その依存関係(存在する場合)とともにインストールされます。
pod install
終わりましたが「[!] The dependency ‘GoogleMaps’ is not used any concrete target.」とエラーが発生しているようです。
Googleの公式ガイドを見ながらやっていたのですが、情報が古かったようです。
Podfileの書き方が変更になったらしくやり方が変わっていました。
参考URL:http://yanamura.hatenablog.com/entry/2016/06/13/155927
もう一度やり直し
先ほどのPodfileとPodsディレクトリを削除し、ターミナルで以下のコマンドを実行します。
pod init
Podfileが出来上がるのでvimで編集します。
# Pods for [project name]
の後に以下を追記します。
pod 'GoogleMaps'
保存したら
pod setup
pod install
Pod installation complete!と表示されれば成功です。
終了したらプロジェクトのディレクトリに「Pods」ディレクトリ、「Podfile.lock」「[project name].xcworkspace」ファイルが出来上がります。
今後は.xcworkspaceのファイルを開いて開発することになります。
Google Developers Console で必要な API を有効にする
Google Developers Consoleでプロジェクトを作成し、Google Maps SDK for iOSとGoogle Places API for iOSをアクティベートします。
以下のリンクから両方のAPIを自動的にアクティベートすることができます。
両方のAPIを自動的にアクティベート
流れに沿っていくとそのままAPIキーが発行されます。
ここまでが事前準備となります。
Xcodeでプロジェクトを開き、「AppDelegate.swift」を編集します。
import UIKit import GoogleMaps; // 追記 @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? let cGoogleMapsAPIKey = "[APIキー]" // 追記 func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionKey: Any]?) -> Bool { // Override point for customization after application launch. // Google Mapsの初期設定 GMSServices.provideAPIKey(cGoogleMapsAPIKey) // 追記 return true } . . .
ViewControllerにGoogleMapを表示させましょう。
import UIKit import GoogleMaps class ViewController: UIViewController { var googleMap : GMSMapView! let latitude: CLLocationDegrees = 34.687322 let longitude: CLLocationDegrees = 135.526195 override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. // ズームレベル let zoom: Float = 10 // カメラを生成 let camera: GMSCameraPosition = GMSCameraPosition.camera(withLatitude: latitude, longitude: longitude, zoom: zoom) // MapViewを生成 googleMap = GMSMapView(frame: CGRect(x: 0, y: 0, width: self.view.bounds.width, height: self.view.bounds.height)) // MapViewにカメラを追加 googleMap.camera = camera // マーカーの生成 let marker: GMSMarker = GMSMarker() marker.position = CLLocationCoordinate2DMake(latitude, longitude) marker.map = googleMap // viewにMapViewを追加 self.view.addSubview(googleMap) } . . .
参考URL:http://qiita.com/kobaboy/items/83164707c103ca0ce5b6
シミュレーターで実行、無事表示することができました。
ちなみに実機でも問題なく表示することができました。
Xcode: 8.2.1
Swift: 3.1
OS: Sierra 10.12