SwiftでGoogle Maps SDK for iOSを使用してグーグルマップを表示してみました 。

スマートフォンのアプリ、どんなものを使っていますか?
つちや印刷では、集客や販売促進のツールとなりうるスマートフォンアプリの研究開発も始めています。

ネットショッピングとはちがい、ローカルな、リアルな店舗への集客には、地図アプリとの相性が良いと考えられます。

というわけで、Googleマップ をつかったアプリを色々と試してみています。

 

開発環境
Xcode:9.2
Swift:4.0.3
macOS:10.13.2
iOS:11.2.5

1. プロジェクトの作成

Xcodeを起動後、File > New > Project > Single View App を選択して、新規プロジェクトを作成します。

2. APIキーの作成

Google Maps SDK for iOSを使用するにあたり、最初に下記サイトでAPIキーの登録をする必要があります。
googleDevelopers

APIキーの取得手順は以下のとおりです。

1. プロジェクトを作成します。
2. 作成したプロジェクトを選択します。
3. Google APIを利用します。
4. Google Maps SDK for iOSを選択します。
5. APIを有効にします。
6. 左側に認証情報があるので選択します。
7. 認証情報を追加を選択します。
8. APIキーを選択しiOSキーを選択します。
9. 適当な名前を入力し、使用するプロジェクトのバンドルキーも入力し、作成ボタンを押します。
10. APIキーの作成が完了です。

3. CocoaPodsでライブラリをダウンロード

1. ターミナルを起動し、cdでプロジェクトの.xcodeprojがある階層まで移動する。
2. $ pod initを実行する
3. $ vi PodfileでPodfileの中身を編集する

# Uncomment the next line to define a global platform for your project
# platform :ios, ‘11.2.5’

target ‘GoogleMapsApp’ do
# Comment the next line if you’re not using Swift and don’t want to use dynamic frameworks
use_frameworks!

# Pods for GoogleMapsApp
pod ‘GoogleMaps’
end

4. $ pod installを実行する

4. Google Maps が表示されるか確認

Xcodeで、4で作成された.xcworkspaceを開きます。
作成したプロジェクトに以下を追加すればGoogleMapを表示させることができます。

以下の3つをAppDelegate.swiftに追加します。
import GoogleMaps;
let cGoogleMapsAPIKey = "取得したAPIキー"
GMSServices.provideAPIKey(cGoogleMapsAPIKey)

全体としては以下のようになります。


//
// AppDelegate.swift
// GoogleMapsApp
//

import UIKit
import GoogleMaps; //追記

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

var window: UIWindow?

let cGoogleMapsAPIKey = “取得したAPIキー” //追記

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after application launch.

// Google Mapsの初期設定
GMSServices.provideAPIKey(cGoogleMapsAPIKey) //追記
return true
}

func applicationWillResignActive(_ application: UIApplication) {
// Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
// Use this method to pause ongoing tasks, disable timers, and invalidate graphics rendering callbacks. Games should use this method to pause the game.
}

func applicationDidEnterBackground(_ application: UIApplication) {
// Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
// If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
}

func applicationWillEnterForeground(_ application: UIApplication) {
// Called as part of the transition from the background to the active state; here you can undo many of the changes made on entering the background.
}

func applicationDidBecomeActive(_ application: UIApplication) {
// Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
}

func applicationWillTerminate(_ application: UIApplication) {
// Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
}

}

ViewController.swiftは以下のようなかんじで作成してみました。


//
// ViewController.swift
// GoogleMapsApp
//

import UIKit
import GoogleMaps

class ViewController: UIViewController {

var googleMap : GMSMapView!

//緯度経度 -> 足利市駅
let latitude: CLLocationDegrees = 36.32913
let longitude: CLLocationDegrees = 139.44827

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
// ズームレベル.
let zoom: Float = 15

// カメラを生成.
let camera: GMSCameraPosition = GMSCameraPosition.camera(withLatitude: latitude,longitude: longitude, zoom: zoom)

// MapViewを生成.
googleMap = GMSMapView(frame: CGRectMake(0, 0, self.view.bounds.width, self.view.bounds.height))

googleMap.isMyLocationEnabled = true

// MapViewの現在地ボタンを有効にする.
googleMap.settings.myLocationButton = true

// MapViewにカメラを追加.
googleMap.camera = camera

//マーカーの作成
let marker: GMSMarker = GMSMarker()
marker.position = CLLocationCoordinate2DMake(latitude, longitude)
marker.title = “東武足利市駅”
marker.map = googleMap

//viewにMapViewを追加.
self.view.addSubview(googleMap)
}

//このバージョンではCGRectMakeが使えないためWrapする関数を作成して回避する。
func CGRectMake(_ x: CGFloat, _ y: CGFloat, _ width: CGFloat, _ height: CGFloat) -> CGRect {
return CGRect(x: x, y: y, width: width, height: height)
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}

実行結果

実機(iPad Pro)でGoogle Mapsを表示してみました。

コメントを残す

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