Categories
SugiBlog ホームページ制作・システム開発

iOSアプリでGoogleMapを使う

地図を使った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


Setup completedで成功したら、次に

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

159 views

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*