以上で完了です。

開発を始めるには、デベロッパー ドキュメント をご覧下さい。

Google Maps SDK for iOS をアクティベートする

まず初めに Google Developers Console で次の作業を行います。

  1. プロジェクトを作成または選択する
  2. Google Maps SDK for iOS をアクティベートする
  3. 適切なキーを作成する
続ける

図形

Google Maps SDK for iOS では、マップ上に図形を簡単に追加できます。 サポートされている図形は、以下のとおりです。

  • 複数の線分をつなげたポリライン。任意の形状にすることができ、マップ上にパスやルートを示すために使用できます。

  • 閉じた図形であるポリゴン。マップ上で領域を示すために使用できます。

  • 円。地表面上に円を地理的に正確に投影したものです。

各図形の外観は、さまざまな方法で変更できます。

ポリライン

ポリラインを使用すると、マップ上に線を描くことができます。 GMSPolyline オブジェクトは順序付けされた複数の位置情報であり、複数の線分として表示されます。 ポリラインの色は、GMSStrokeStyle で設定できます。

ポリラインを作成するには、対応する GMSMutablePath オブジェクトを作成してパスを指定します。このオブジェクトには、2 つ以上の点を含める必要があります。 各 CLLocationCoordinate2D が、地表面上のある地点を示します。 パスにポイントを追加した順序に従って、ポイント間に線分が描画されます。

addCoordinate: メソッドか addLatitude:longitude: メソッドでパスに地点を追加できます。

Swift

let path = GMSMutablePath()
path.add(CLLocationCoordinate2D(latitude: -33.85, longitude:151.20))
path.add(CLLocationCoordinate2D(latitude: -33.70, longitude:151.40))
path.add(CLLocationCoordinate2D(latitude: -33.73, longitude:151.41))
let polyline = GMSPolyline(path: path)

Objective-C

GMSMutablePath *path = [GMSMutablePath path];
[path addCoordinate:CLLocationCoordinate2DMake(-33.85, 151.20)];
[path addCoordinate:CLLocationCoordinate2DMake(-33.70, 151.40)];
[path addCoordinate:CLLocationCoordinate2DMake(-33.73, 151.41)];
GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];

ポリラインを追加する

  1. GMSMutablePath オブジェクトを作成します。
  2. addCoordinate: メソッドか addLatitude:longitude: メソッドでパスに地点を設定します。

  3. パスを引数として新しい GMSPolyline オブジェクトをインスタンス化します。

  4. 必要に応じて、strokeWidthstrokeColor などのプロパティを設定します。
  5. GMSPolylinemap プロパティを設定します。
  6. ポリラインがマップ上に表示されます。

次のコード スニペットでは、マップに長方形を追加しています。

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;

長方形のポリライン

ポリラインを除去する

GMSPolylinemap プロパティを nil に設定すると、ポリラインをマップから除去できます。 または、GMSMapView clear メソッドを呼び出すと、現在マップ上にあるすべてのオーバーレイ(ポリラインなどの図形を含む)を除去できます。

Swift

let camera = GMSCameraPosition.camera(withLatitude: -33.8683,
                                      longitude:151.2086,
                                      zoom:12)
let mapView = GMSMapView.map(withFrame: self.view.bounds, camera: camera)
...
mapView.clear()

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:12];
mapView = [GMSMapView mapWithFrame:self.view.bounds camera:camera];
...
[mapView clear];

マップに追加したポリラインを変更する場合は、GMSPolyline オブジェクトを確実に保持しておくようにします。 このオブジェクトを変更することで、後からポリラインを変更できます。

Swift

let polyline = GMSPolyline(path: path)
polyline.map = mapView
...
polyline.strokeColor = .black

Objective-C

GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
polyline.map = mapView;
...
polyline.strokeColor = [UIColor blackColor];

ポリラインをカスタマイズする

GMSPolyline オブジェクトでは、いくつかのプロパティによって線の外観を制御することができます。 次のオプションを使用できます。

strokeWidth
線全体の幅を画面のポイント数で指定します。 デフォルトは 1 です。この幅は、マップがズームされても拡大縮小されません。
geodesic
YES の場合、このポリラインを測地線として描画します。 測地線セグメントは、地表面に沿った最短のパスに従うセグメントで、メルカトル図法を使用しているマップでは曲線として表示される場合があります。 非測地線セグメントは、マップ上に直線として描画されます。 デフォルト値は NO です。
spans
ポリラインの 1 つまたは複数の線分の色を指定します。 spans プロパティには、GMSStyleSpan オブジェクトの配列を指定します。 spans プロパティを好みの値に設定すると、ポリラインの色を変更できます。
strokeColor
ポリラインの色を指定する UIColor オブジェクトです。 デフォルト値は blueColor です。 spans が設定されている場合、strokeColor プロパティは無視されます。

次のスニペットでは、測地線による補完を行ったメルボルンからパースへ太いポリラインを追加しています。

Swift

let path = GMSMutablePath()
path.addLatitude(-37.81319, longitude:144.96298)
path.addLatitude(-31.95285, longitude:115.85734)
let polyline = GMSPolyline(path: path)
polyline.strokeWidth = 10.0
polyline.geodesic = true
polyline.map = mapView

Objective-C

GMSMutablePath *path = [GMSMutablePath path];
[path addLatitude:-37.81319 longitude:144.96298];
[path addLatitude:-31.95285 longitude:115.85734];
GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
polyline.strokeWidth = 10.f;
polyline.geodesic = YES;
polyline.map = mapView;

マップに追加したポリラインを変更する場合は、GMSPolyline オブジェクトを保持するようにしておきます。

Swift

let polyline = GMSPolyline(path: path)
polyline.map = mapView
...
polyline.strokeColor = .blue

Objective-C

GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
polyline.map = mapView;
...
polyline.strokeColor = [UIColor blueColor];

ポリラインの色を変更する

ポリラインは、一連の線分としてマップ上に描画されます。 spans プロパティを使用すると、個々の線分や線全体の色を変更できます。

このプロパティを使用すると、ポリラインの色を細かく制御することができますが、線全体に単一のスタイルを適用する簡単な方法もいくつか存在しています。

次のスニペットでは、spanWithColor: メソッドを使用して線全体の色を赤に変更しています。

Swift

polyline.spans = [GMSStyleSpan(color: .red)]

Objective-C

polyline.spans = @[[GMSStyleSpan spanWithColor:[UIColor redColor]]];

または、すでに GMSStrokeStyle オブジェクトにアクセスできる場合は、spanWithStyle: メソッドを使用することもできます。

Swift

let solidRed = GMSStrokeStyle.solidColor(.red)
polyline.spans = [GMSStyleSpan(style: solidRed)]

Objective-C

GMSStrokeStyle *solidRed = [GMSStrokeStyle solidColor:[UIColor redColor]];
polyline.spans = @[[GMSStyleSpan spanWithStyle:solidRed]];

バージョン 1.7 よりも前の Google Maps SDK for iOS では、GMSPolyline の全体色を設定する strokeColor プロパティのみが使用できました。

spans プロパティは、strokeColor よりも優先されます。

Swift

polyline.strokeColor = .red

Objective-C

polyline.strokeColor = [UIColor redColor];

スタイル

アプリで同じストローク色を何度も使用する場合、再利用を行うことができるスタイルを定義すると便利です。 ポリラインのスタイルは、GMSStrokeStyle オブジェクトで指定します。 ストロークのスタイルは、色付きの実線か、ある色から別の色へのグラデーションのどちらかを指定できます。 スタイルを作成すると、spanWithStyle: メソッドで GMSStyleSpan に適用することができます。

Swift

// Create two styles: one that is solid blue, and one that is a gradient from red to yellow
let solidBlue = GMSStrokeStyle.solidColor(.blue)
let solidBlueSpan = GMSStyleSpan(style: solidBlue)
let redYellow =
  GMSStrokeStyle.gradient(from: .red, to: .yellow)
let redYellowSpan = GMSStyleSpan(style: redYellow)

Objective-C

// Create two styles: one that is solid blue, and one that is a gradient from red to yellow
GMSStrokeStyle *solidBlue = [GMSStrokeStyle solidColor:[UIColor blueColor]];
GMSStyleSpan *solidBlueSpan = [GMSStyleSpan spanWithStyle:solidBlue];
GMSStrokeStyle *redYellow =
    [GMSStrokeStyle gradientFromColor:[UIColor redColor] toColor:[UIColor yellowColor]];
GMSStyleSpan *redYellowSpan = [GMSStyleSpan spanWithStyle:redYellow];

span のスタイルは、ポリラインの最後か、新しいスタイルが設定されるまで継続されます。 ポリラインの spans プロパティに GMSStyleSpan を 1 つだけ設定すると、線全体の色を変更することができます。次のスニペットでは、ポリライン全体にグラデーションを適用する方法を示しています。

Swift

let polyline = GMSPolyline(path: path)
let redYellow =
  GMSStrokeStyle.gradient(from: .red, to: .yellow)
polyline.spans = [GMSStyleSpan(style: redYellow)]

Objective-C

GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
GMSStrokeStyle *redYellow =
    [GMSStrokeStyle gradientFromColor:[UIColor redColor] toColor:[UIColor yellowColor]];
polyline.spans = @[[GMSStyleSpan spanWithStyle:redYellow]];

個々の線分の色を変更する

ポリラインのそれぞれの線分のスタイルを個別に設定する場合は、GMSStyleSpan オブジェクトの配列を作成して spans プロパティに渡します。

デフォルトでは、配列の各アイテムが対応する線分の色に設定されます。 配列の要素数が線分の数よりも多い場合、余分な要素は無視されます。 配列の要素数が線分の数よりも少ない場合、線の残りの部分は最後の GMSStyleSpan の色で描画されます。

いくつかの配色やグラデーションのポリラインによって、ポリラインに沿った高さや速度などの変化を示すことができます。 次のスニペットでは、最初の 2 つのポリラインの線分を赤に、残りの線を赤から黄色へのグラデーションに設定しています。

Swift

let polyline = GMSPolyline(path: path)
let solidRed = GMSStrokeStyle.solidColor(.red)
let redYellow =
    GMSStrokeStyle.gradient(from: .red, to: .yellow)
polyline.spans = [GMSStyleSpan(style: solidRed),
                  GMSStyleSpan(style: solidRed),
                  GMSStyleSpan(style: redYellow)]

Objective-C

GMSPolyline *polyline = [GMSPolyline polylineWithPath:path];
GMSStrokeStyle *solidRed = [GMSStrokeStyle solidColor:[UIColor redColor]];
GMSStrokeStyle *redYellow =
    [GMSStrokeStyle gradientFromColor:[UIColor redColor] toColor:[UIColor yellowColor]];
polyline.spans = @[[GMSStyleSpan spanWithStyle:solidRed],
                   [GMSStyleSpan spanWithStyle:solidRed],
                   [GMSStyleSpan spanWithStyle:redYellow]];

spanWithStyle:segments: メソッドを使用して、複数の線分のスタイルを同時に設定することもできます。 たとえば、次のコードは上記のコードと同じ処理を行います。 スタイルは線の残りの部分の描画に使用されることになるため、最後の GMSStyleSpan では、線分の長さは常に無視されることになります。

Swift

polyline.spans = [GMSStyleSpan(style: solidRed, segments:2),
                  GMSStyleSpan(style: redYellow, segments:10)]

Objective-C

polyline.spans = @[[GMSStyleSpan spanWithStyle:solidRed segments:2],
                   [GMSStyleSpan spanWithStyle:redYellow segments:10]];

小数による線分の指定

線分は、小数値で指定することもできます。 この方法を使用すると、スタイルを線分の一部に適用できるため、実質的に 1 つの線分を分割するのと同じようなことを行えます。

GMSStyleSpan は、前のものが終了した直後に開始されます。次の例では、灰色は 2 番目の線分から ½ だけ進んだところからが始まり、3 番目の線分の ½ の位置まで続きます。

Swift

polyline.spans = [GMSStyleSpan(style: solidRed, segments:2.5),
                  GMSStyleSpan(color: .gray),
                  GMSStyleSpan(color: .purple, segments:0.75),
                  GMSStyleSpan(style: redYellow)]

Objective-C

polyline.spans = @[[GMSStyleSpan spanWithStyle:solidRed segments:2.5],
                   [GMSStyleSpan spanWithColor:[UIColor grayColor],
                   [GMSStyleSpan spanWithColor:[UIColor purpleColor] segments:0.75,
                   [GMSStyleSpan spanWithStyle:redYellow]];

ポリラインに繰り返しの色パターンを追加する

GMSGeometryUtilsGMSStyleSpans ユーティリティ メソッドを使用すると、ポリラインにパターンを追加できます。 GMSStyleSpans メソッドは、繰り返しパターンを定義する 2 つの配列を受け取ります。 1 つの配列では繰り返しとなるスタイルを設定し、もう 1 つでは繰り返し間隔を定義します。 この 2 つを一緒に使うことによって、長さや線分の数にかかわらず任意のポリラインに適用できるパターンを作成できます。

たとえば、次のコード スニペットでは、黒と白の交互のパターンのポリラインを定義しています。 タイプが kGMSLengthRhumb に指定されているため、長さは航程線に沿ったメートルの値として扱われます(メルカトル図法では、これは直線になります)。

Swift

let styles = [GMSStrokeStyle.solidColor(.white),
              GMSStrokeStyle.solidColor(.black)]
let lengths: [NSNumber] = [100000, 50000]
polyline.spans = GMSStyleSpans(polyline.path!, styles, lengths, kGMSLengthRhumb)

Objective-C

NSArray *styles = @[[GMSStrokeStyle solidColor:[UIColor whiteColor]],
                    [GMSStrokeStyle solidColor:[UIColor blackColor]]];
NSArray *lengths = @[@100000, @50000];
polyline.spans = GMSStyleSpans(polyline.path, styles, lengths, kGMSLengthRhumb);

ポリゴン

ポリゴンは、指定された順序の一連の座標で構成されている点でポリラインと似ています。 ただし、ポリゴンは終端部が開いておらず、閉じたループ内を塗りつぶした領域として定義されます。 Google Maps SDK for iOS では、GMSPolygon クラスでポリゴンを定義します。

GMSPolygon は、GMSPolyline を追加するのと同じ方法でマップに追加できます。 まず、対応する GMSMutablePath オブジェクトを作成してパスを指定し、そこに地点を追加します。 これらのポイントにより、ポリゴンのアウトラインが形成されます。 それぞれの CLLocationCoordinate2D が、地表面上のある地点を示します。 パスにポイントを追加した順序に従って、地点間に線分が描画されます。

ポリゴンを追加する

  1. GMSMutablePath オブジェクトを作成します。
  2. addCoordinate: メソッドか addLatitude:longitude: メソッドでパスに地点を設定します。 これらのポイントにより、ポリゴンのアウトラインが形成されます。

  3. パスを引数として新しい GMSPolygon オブジェクトをインスタンス化します。

  4. 必要に応じて、strokeWidthstrokeColorfillColor などのプロパティを設定します。

  5. GMSPolygon.map プロパティを設定して、GMSMapView オブジェクトにポリゴンを割り当てます。

  6. ポリラインがマップ上に表示されます。

次のコード スニペットでは、マップに長方形を追加しています。

Swift

// Create a rectangular path
let rect = GMSMutablePath()
rect.add(CLLocationCoordinate2D(latitude:37.36, longitude: -122.0))
rect.add(CLLocationCoordinate2D(latitude:37.45, longitude: -122.0))
rect.add(CLLocationCoordinate2D(latitude:37.45, longitude: -122.2))
rect.add(CLLocationCoordinate2D(latitude:37.36, longitude: -122.2))

// Create the polygon, and assign it to the map.
let polygon = GMSPolygon(path: rect)
polygon.fillColor = UIColor(red:0.25, green:0, blue:0, alpha:0.05);
polygon.strokeColor = .black
polygon.strokeWidth = 2
polygon.map = mapView

Objective-C

// Create a rectangular path
GMSMutablePath *rect = [GMSMutablePath path];
[rect addCoordinate:CLLocationCoordinate2DMake(37.36, -122.0)];
[rect addCoordinate:CLLocationCoordinate2DMake(37.45, -122.0)];
[rect addCoordinate:CLLocationCoordinate2DMake(37.45, -122.2)];
[rect addCoordinate:CLLocationCoordinate2DMake(37.36, -122.2)];

// Create the polygon, and assign it to the map.
GMSPolygon *polygon = [GMSPolygon polygonWithPath:rect];
polygon.fillColor = [UIColor colorWithRed:0.25 green:0 blue:0 alpha:0.05];
polygon.strokeColor = [UIColor blackColor];
polygon.strokeWidth = 2;
polygon.map = mapView;

ポリゴンの外観は、マップに追加する前でも、マップに追加した後でもカスタマイズできます。

Google Maps SDK for iOS には、汎用的な GMSPolygon クラスに加えて、簡単に地表面上に円を描画できる GMSCircle も含まれています。

円を作成するには、次の 2 つのプロパティを指定する必要があります。

  • positionCLLocationCoordinate2D として指定します。
  • radius をメートル単位で指定します。

これにより、指定された center から radius メートルの地点にある、地表面上のすべてのポイントのセットとして円が定義されます。 Maps API で使用されているメルカトル図法では、地球が平面上にレンダリングされるため、この円はマップの赤道付近ではほぼ完全な円として表示されますが、円が赤道から遠ざかるにつれて、(画面上の表示では)歪んだ円となっていきます。

円を追加する

次のコード スニペットでは、マップに円を追加しています。

Swift

let circleCenter = CLLocationCoordinate2D(latitude:37.35, longitude: -122.0)
let circ = GMSCircle(position: circleCenter, radius: 1000)
circ.map = mapView

Objective-C

CLLocationCoordinate2D circleCenter = CLLocationCoordinate2DMake(37.35, -122.0);
GMSCircle *circ = [GMSCircle circleWithPosition:circleCenter
                                         radius:1000];
circ.map = mapView;

円の外観は、マップに追加する前でも、マップに追加した後でもカスタマイズできます。

円をカスタマイズする

GMSCircle のプロパティを変更することによって、カスタムの色やストローク幅を指定できます。 次のオプションを使用できます。

fillColor
円の内部の色を指定する UIColor オブジェクトです。 デフォルト値は透明です。
strokeColor
円の輪郭の色を指定する UIColor オブジェクトです。 デフォルト値は blackColor です。
strokeWidth
円の輪郭の太さを画面のポイント数で指定します。 デフォルトは 1 です。この太さは、マップがズームされても拡大縮小されません。

次のスニペットでは、半透明の赤で塗りつぶした赤い太線の円を追加しています。

Swift

let circleCenter = CLLocationCoordinate2D(latitude:37.35, longitude: -122.0)
let circ = GMSCircle(position: circleCenter, radius: 1000)

circ.fillColor = UIColor(red:0.35, green:0, blue:0, alpha:0.05)
circ.strokeColor = .red
circ.strokeWidth = 5
circ.map = mapView

Objective-C

CLLocationCoordinate2D circleCenter = CLLocationCoordinate2DMake(37.35, -122.0);
GMSCircle *circ = [GMSCircle circleWithPosition:circleCenter
                                         radius:1000];

circ.fillColor = [UIColor colorWithRed:0.25 green:0 blue:0 alpha:0.05];
circ.strokeColor = [UIColor redColor];
circ.strokeWidth = 5;
circ.map = mapView;

中が空洞のポリゴンを作成する

複数のパスを 1 つの GMSPolygon オブジェクトにまとめると、塗りつぶされた輪、つまり「ドーナツ」(ポリゴンの内部にポリゴン領域が別の図形として表示されているもの)などの複雑な図形を作成できます。 複雑な図形は、複数のパスで構成されています。

ポリゴンがカバーする最も大きな領域を指定するパスを使用してポリゴンを作成します。 次に、ポリゴンの holes プロパティを 1 つ以上の GMSPath オブジェクトの配列として指定します。これにより、ポリゴン内の穴が定義されます。

小さい方のパスが大きい方のパスで完全に囲まれている場合、ポリゴンの一部が切り抜かれているように見えます。

次のコードサンプルは、2 つの穴を持つポリゴンを作成します。

Swift

override func loadView() {
  let hydeParkLocation = CLLocationCoordinate2D(latitude: -33.87344, longitude:151.21135)
  let camera = GMSCameraPosition.camera(withTarget: hydeParkLocation, zoom: 16)
  let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
  mapView.animate(to: camera)

  let hydePark = "tpwmEkd|y[QVe@Pk@BsHe@mGc@iNaAKMaBIYIq@qAMo@Eo@@[Fe@DoALu@HUb@c@XUZS^ELGxOhAd@@ZB`@J^BhFRlBN\\BZ@`AFrATAJAR?rAE\\C~BIpD"
  let archibaldFountain = "tlvmEqq|y[NNCXSJQOB[TI"
  let reflectionPool = "bewmEwk|y[Dm@zAPEj@{AO"

  let polygon = GMSPolygon()
  polygon.path = GMSPath(fromEncodedPath: hydePark)
  polygon.holes = [GMSPath(fromEncodedPath: archibaldFountain)!, GMSPath(fromEncodedPath: reflectionPool)!]
  polygon.fillColor = UIColor(colorLiteralRed:1.0, green:0.0, blue:0.0, alpha:0.2)
  polygon.strokeColor = UIColor(colorLiteralRed:1.0, green:0.0, blue:0.0, alpha:1.0)
  polygon.strokeWidth = 2
  polygon.map = mapView
  view = mapView
}

Objective-C

- (void)loadView {
  CLLocationCoordinate2D hydeParkLocation = CLLocationCoordinate2DMake(-33.87344, 151.21135);
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithTarget:hydeParkLocation
                                                             zoom:16];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];

  NSString *hydePark = @"tpwmEkd|y[QVe@Pk@BsHe@mGc@iNaAKMaBIYIq@qAMo@Eo@@[Fe@DoALu@HUb@c@XUZS^ELGxOhAd@@ZB`@J^BhFRlBN\\BZ@`AFrATAJAR?rAE\\C~BIpD";
  NSString *archibaldFountain = @"tlvmEqq|y[NNCXSJQOB[TI";
  NSString *reflectionPool = @"bewmEwk|y[Dm@zAPEj@{AO";

  GMSPolygon *polygon = [[GMSPolygon alloc] init];
  polygon.path = [GMSPath pathFromEncodedPath:hydePark];
  polygon.holes = @[[GMSPath pathFromEncodedPath:archibaldFountain],
                    [GMSPath pathFromEncodedPath:reflectionPool]];
  polygon.fillColor = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:0.2];
  polygon.strokeColor = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:1.0];
  polygon.strokeWidth = 2;
  polygon.map = _mapView;
  self.view = _mapView;
}

フィードバックを送信...

ご不明な点がありましたら、Google のサポートページをご覧ください。