Objective-C
iPhone
Swift

Google Maps SDK for iOS の使い方(Swift 4対応)

ようやく Google Maps SDK for iOS の API Keyが発行されたので、いろいろ試してみました。そんときのメモです。

なお、導入手順については @shu223 さんの記事がとても丁寧でわかりやすいので、そちらもご覧下さいませ。

2018.4.5 追記:
CocoaPods で簡単に導入できる時代になりました。

Podfile:

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

地図を表示してみる

以下のインポート文を追加します。

Swift

import GoogleMaps

Objective-C

@import GoogleMaps;

以下を application:didFinishLaunchingWithOptions: メソッドに追加し、YOUR_API_KEY を実際の API キーに置き換えます。

GMSServices.provideAPIKey("YOUR_API_KEY")
[GMSServices provideAPIKey:@"YOUR_API_KEY"];

GMSCameraPosition で緯度経度を指定し、GMSMapView インスタンスを生成します。

Swift

let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 6.0)
let mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)
view = mapView

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                          longitude:151.20
                                                               zoom:6];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
self.view = mapView;

ユーザーが地図上の Google ロゴをクリックすると、Google Maps SDK for iOS によってブラウザ版の Google Maps が開かれる。

ユーザーの現在値を表示してみる

あらかじめ Info.plist の NSLocationWhenInUseUsageDescription に位置情報を使用する目的を追記しておきます。

Swift

mapView.isMyLocationEnabled = true

Objective-C

mapView.myLocationEnabled = YES;

Simulator Screen Shot - iPhone SE - 2018-04-05 at 22.52.32.png

地図の種類を変えてみる

GMSMapView の mapType プロパティを変更することで地図の種類を変更できます。

Swift

mapView.mapType = .satellite

Objective-C

mapView_.mapType = kGMSTypeSatellite;

mapType には次の値を設定できます。

Swift Objective-C 地図のタイプ
satellite kGMSTypeNormal 通常の地図
normal kGMSTypeSatellite 航空写真
hybrid kGMSTypeHybrid 通常の地図+航空写真のハイブリッド
terrain kGMSTypeTerrain 地形や樹木などの地形的特徴を持つ地図

normal

Simulator Screen Shot - iPhone SE - 2018-04-05 at 22.08.52.png

satellite

Simulator Screen Shot - iPhone SE - 2018-04-05 at 22.09.08.png

hybrid

Simulator Screen Shot - iPhone SE - 2018-04-05 at 22.09.23.png

terrain

Simulator Screen Shot - iPhone SE - 2018-04-05 at 22.09.38.png

マーカーを追加してみる

  1. GMSMarkerOptions インスタンスを生成
  2. マーカーを立てる位置(position)や場所のタイトル(title)などをセットする
  3. map メソッドで GMSMapView のインスタンスをセット

Swift

let marker = GMSMarker()
marker.position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.20)
marker.title = "Sydney"
marker.snippet = "Australia"
marker.map = mapView

Objective-C

GMSMarkerOptions *markerOptions = [[GMSMarkerOptions alloc] init];
markerOptions.position = CLLocationCoordinate2DMake(-33.86, 151.20);
markerOptions.title = @"Sydney";
markerOptions.snippet = @"Australia";
markerOptions.map = mapView;

Simulator Screen Shot - iPhone SE - 2018-04-05 at 21.37.43.png

マーカーをタップすると次のような吹き出し(info window)が表示されます。この時、マーカーが画面中央になるように自動で位置が調整されます。吹き出しの中には title, snippet で設定した文字列が表示されます。

Simulator Screen Shot - iPhone SE - 2018-04-05 at 21.37.47.png

マーカーの画像は icon プロパティで変更が可能。

GMSMapViewDelegate

マーカーのタップ検知は

Swift

func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

Objective-C

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(id<GMSMarker>)marker;

で可能です。true を返すと吹き出しが出なくなります。

また、吹き出しのタップ検知は

Swift

func mapView(_ mapView: GMSMapView, didTapInfoWindowOf marker: GMSMarker) {

Objective-C

- (void)mapView:(GMSMapView *)mapView
    didTapInfoWindowOfMarker:(id<GMSMarker>)marker;

で可能です。

線を引いてみる

  1. GMSMutablePath インスタンスを生成
  2. GMSMutablePathaddCoordinate メソッドで頂点座標(緯度経度)を指定していく
  3. GMSPolyline インスタンスを生成
  4. GMSPolylinemap プロパティに GMSMapView をセット

Swift

let path = GMSMutablePath()
path.add(CLLocationCoordinate2D(latitude:37.36, longitude: -122.0))
path.add(CLLocationCoordinate2D(latitude:37.45, longitude: -122.0))
path.add(CLLocationCoordinate2D(latitude:37.45, longitude: -122.2))
path.add(CLLocationCoordinate2D(latitude:37.36, longitude: -122.2))
path.add(CLLocationCoordinate2D(latitude:37.36, longitude: -122.0))

let rectangle = GMSPolyline(path: path)
rectangle.map = mapView

Objective-C

GMSMutablePath *path = [GMSMutablePath path];
[path addCoordinate:CLLocationCoordinate2DMake(37.36, -122.0)];
[path addCoordinate:CLLocationCoordinate2DMake(37.45, -122.0)];
[path addCoordinate:CLLocationCoordinate2DMake(37.45, -122.2)];
[path addCoordinate:CLLocationCoordinate2DMake(37.36, -122.2)];
[path addCoordinate:CLLocationCoordinate2DMake(37.36, -122.0)];

GMSPolyline *rectangle = [GMSPolyline polylineWithPath:path];
rectangle.map = mapView;

Simulator Screen Shot - iPhone SE - 2018-04-05 at 22.51.16.png

とりあえずここまで!