LoginSignup
98
83

More than 5 years have passed since last update.

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

Last updated at Posted at 2013-03-02

ようやく 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

とりあえずここまで!

98
83
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
98
83