Google Maps SDK for iOS の使い方（Swift 4対応）

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

なお、導入手順については [@shu223](http://qiita.com/users/shu223) さんの[記事](http://qiita.com/items/bfb5ef3e45682c2bb763)がとても丁寧でわかりやすいので、そちらもご覧下さいませ。 

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

Podfile:

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

## 地図を表示してみる

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

Swift

```swift
import GoogleMaps
```

Objective-C

```objc
@import GoogleMaps;
```

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

* [APIキーの取得方法](https://developers.google.com/maps/documentation/ios-sdk/get-api-key)

```swift
GMSServices.provideAPIKey("YOUR_API_KEY")
```

```objc
[GMSServices provideAPIKey:@"YOUR_API_KEY"];
```

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

Swift

```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

```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

```swift
mapView.isMyLocationEnabled = true
```

Objective-C

```objc
mapView.myLocationEnabled = YES;
```

![Simulator Screen Shot - iPhone SE - 2018-04-05 at 22.52.32.png](https://qiita-image-store.s3.amazonaws.com/0/8292/e97f7c86-8eaf-2bd5-7757-3d5ccff5656f.png)

## 地図の種類を変えてみる

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

Swift

```swift
mapView.mapType = .satellite
```

Objective-C

```objc
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](https://qiita-image-store.s3.amazonaws.com/0/8292/92e7643a-b65f-53ed-ed34-ef8274a2b6ba.png)


__satellite__

![Simulator Screen Shot - iPhone SE - 2018-04-05 at 22.09.08.png](https://qiita-image-store.s3.amazonaws.com/0/8292/0a628356-cd22-15da-2121-b9a3a2ff089b.png)

__hybrid__

![Simulator Screen Shot - iPhone SE - 2018-04-05 at 22.09.23.png](https://qiita-image-store.s3.amazonaws.com/0/8292/1cb0dbd6-8305-2c16-1d76-4b49bb4394c0.png)

__terrain__

![Simulator Screen Shot - iPhone SE - 2018-04-05 at 22.09.38.png](https://qiita-image-store.s3.amazonaws.com/0/8292/27456bf6-86e5-59e6-aeaf-cd0c475b5fb4.png)

## マーカーを追加してみる

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

Swift

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

Objective-C

```objc
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](https://qiita-image-store.s3.amazonaws.com/0/8292/5380e692-b4ad-ed2b-426d-06225068f716.png)

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

![Simulator Screen Shot - iPhone SE - 2018-04-05 at 21.37.47.png](https://qiita-image-store.s3.amazonaws.com/0/8292/e0238950-efd2-fe10-8f8d-989110266b53.png)



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

### GMSMapViewDelegate

マーカーのタップ検知は

Swift

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

Objective-C

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

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

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

Swift

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

Objective-C

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

で可能です。



## 線を引いてみる

2. `GMSMutablePath` インスタンスを生成
3. `GMSMutablePath` の `addCoordinate` メソッドで頂点座標（緯度経度）を指定していく
4. `GMSPolyline` インスタンスを生成
5. `GMSPolyline` の `map` プロパティに `GMSMapView` をセット

Swift

```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

```objc
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](https://qiita-image-store.s3.amazonaws.com/0/8292/3e9855a2-0313-34c3-f7a2-4ca45e339969.png)


とりあえずここまで！