読者です 読者をやめる 読者になる 読者になる

しめ鯖日記

swift, iPhoneアプリ開発, ruby on rails等のTipsや入門記事書いてます

iPhoneアプリにストリートビューを表示する

GoogleMapsSDKを使ってアプリ上にストリートビューを表示してみました。

準備

最初にGoogleAPIManagerでAPIキーを作成します。
まずは下サイトでGoogle Maps SDK for iOSを有効化します。

console.developers.google.com

次は下ページでAPIキーを作成します。
「認証情報を作成」ボタンでAPIキーを選択します。

console.developers.google.com

f:id:llcc:20170406200818p:plain

実装

次は今作ったキーを元にストリートビューを表示します。

最初にCocoaPodsでGoogleMapsライブラリをインストールします。

target 'MyApp' do
  use_frameworks!

  pod 'GoogleMaps'
end

ライブラリをインストールしたらAPIキーのセットを行います。
AppDelegateを以下のように修正します。

import UIKit
import GoogleMaps

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        
        GMSServices.provideAPIKey("API_KEY")
        
        return true
    }
}

最後にストリートビューの貼り付けを行います。
ViewControllerを以下のように修正します。

import UIKit
import GoogleMaps

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let panoView = GMSPanoramaView(frame: view.bounds)
        view.addSubview(panoView)
        
        panoView.moveNearCoordinate(CLLocationCoordinate2D(latitude: -33.732, longitude:150.312))
    }
}

これで画面にストリートビューを表示する事ができました。

f:id:llcc:20170406201337p:plain

ビューには様々なオプションがあります。

let panoView = GMSPanoramaView(frame: view.bounds)
view.addSubview(panoView)

panoView.orientationGestures = false // スワイプで方向転換
panoView.zoomGestures = false // ピンチで拡大・縮小
panoView.navigationGestures = false // 矢印タップで移動
panoView.navigationLinksHidden = true // 矢印を非表示

panoView.moveNearCoordinate(CLLocationCoordinate2D(latitude: -33.732, longitude:150.312))

ビューにはDelegateも設定する事ができます。

extension ViewController: GMSPanoramaViewDelegate {
    func panoramaView(_ view: GMSPanoramaView, willMoveToPanoramaID panoramaID: String) {}
    func panoramaView(_ view: GMSPanoramaView, didMoveTo panorama: GMSPanorama?) {}
    func panoramaView(_ view: GMSPanoramaView, didMoveTo panorama: GMSPanorama, nearCoordinate coordinate: CLLocationCoordinate2D) {}
    func panoramaView(_ view: GMSPanoramaView, error: Error, onMoveNearCoordinate coordinate: CLLocationCoordinate2D) {}
    func panoramaView(_ view: GMSPanoramaView, error: Error, onMoveToPanoramaID panoramaID: String) {}
    func panoramaView(_ panoramaView: GMSPanoramaView, didMove camera: GMSPanoramaCamera) {}
    func panoramaView(_ panoramaView: GMSPanoramaView, didTap point: CGPoint) {}
    func panoramaView(_ panoramaView: GMSPanoramaView, didTap marker: GMSMarker) -> Bool { return true }
    func panoramaViewDidStartRendering(_ panoramaView: GMSPanoramaView) {}
    func panoramaViewDidFinishRendering(_ panoramaView: GMSPanoramaView) {}
}