以上で完了です。

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

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

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

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

マーカー

マーカーは、マップ上の単一の場所を示します。

デフォルトでは、マーカーには Google マップで共通の統一感のある標準アイコンが使用されます。 マーカーをカスタマイズする場合は、デフォルトのマーカーの色を変更したり、マーカーの画像をカスタム アイコンに置換したり、マーカーのその他のプロパティを変更したりできます。

マーカーを追加する

マーカーを追加するには、positiontitle を含む GMSMarker オブジェクトを作成し、map を設定します。

次の例は、既存の GMSMapView オブジェクトにマーカーを追加する方法を示しています。 マーカーは座標 10,10 に作成され、クリックすると情報ウィンドウに「Hello world」という文字列が表示されます。

Swift

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.title = "Hello World"
marker.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.title = @"Hello World";
marker.map = mapView;

marker.appearAnimation プロパティを kGMSMarkerAnimationPop に設定すると、新しいマーカーのマップへの追加をアニメーション表示することができます。

マーカーを除去する

マップからマーカーを除去するには、GMSMarkermap プロパティを nil に設定します。 または、GMSMapViewclear メソッドを呼び出すと、現在マップ上にあるすべてのオーバーレイ(マーカーを含む)を除去できます。

Swift

let camera = GMSCameraPosition.camera(withLatitude: -33.8683, longitude:151.2086, zoom:6)
let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
...
mapView.clear()

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
...
[mapView clear];

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

Swift

let marker = GMSMarker(position: position)
marker.map = mapView
...
marker.map = nil

Objective-C

GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.map = mapView;
...
marker.map = nil

マーカーの色を変更する

markerImageWithColor: で色の付いたバージョンのデフォルト アイコンをリクエストし、結果の画像を GMSMarker の icon プロパティに設定することで、デフォルトのマーカー画像の色をカスタマイズできます。

Swift

marker.icon = GMSMarker.markerImage(with: .black)

Objective-C

marker.icon = [GMSMarker markerImageWithColor:[UIColor blackColor]];

マーカー画像をカスタマイズする

デフォルトのマーカー画像を変更する場合は、マーカーの icon または iconView プロパティを使用してカスタム アイコンを設定できます。

iconView が設定されていると、API は icon プロパティを無視します。 iconView が設定されている限り、現在の icon をアップデートしても認識されません。

マーカーの icon プロパティを使用する

次のスニペットは、icon プロパティの UIImage にカスタム アイコンが指定されたマーカーを作成します。 アイコンの中心は、イギリスのロンドンです。 このスニペットは、アプリケーションに「house.png」という画像が含まれていると仮定しています。

Swift

let position = CLLocationCoordinate2D(latitude:51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.icon = UIImage(named: "house")
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;

同じ画像で複数のマーカーを作成する場合は、各マーカーに UIImage の同じインスタンスを使用します。 これにより、大量のマーカーを表示する際のアプリケーションのパフォーマンスが改善されます。

この画像は、複数のフレームを持つことができます。 また、alignmentRectInsets プロパティも反映されます。これは、マーカーにシャドウなどの未使用領域がある場合に便利です。

マーカーの iconView プロパティを使用する

次のスニペットは、マーカーの iconView プロパティを設定することによりカスタム アイコンを持つマーカーを作成し、マーカーの色の変更をアニメーションさせます。

このスニペットは、アプリケーションに「house.png」という画像が含まれていると仮定しています。

Swift

import UIKit
import GoogleMaps

class ViewController:UIViewController, GMSMapViewDelegate {
  var mapView:GMSMapView!
  var london:GMSMarker?
  var londonView:UIImageView?

  override func loadView() {

    let camera = GMSCameraPosition.camera(withLatitude:51.5,
                                          longitude: -0.127,
                                          zoom:14)
    let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
    view = mapView

    mapView.delegate = self

    let house = UIImage(named:"House")!.withRenderingMode(.alwaysTemplate)
    let markerView = UIImageView(image: house)
    markerView.tintColor = .red
    londonView = markerView

    let position = CLLocationCoordinate2D(latitude:51.5, longitude: -0.127)
    let marker = GMSMarker(position: position)
    marker.title = "London"
    marker.iconView = markerView
    marker.tracksViewChanges = true
    marker.map = mapView
    london = marker
  }

  func mapView(_ mapView:GMSMapView, idleAt position:GMSCameraPosition) {
    UIView.animate(withDuration:5.0, animations: { () -> Void in
      self.londonView?.tintColor = .blue
      }, completion: {(finished) in
        // Stop tracking view changes to allow CPU to idle.
        self.london?.tracksViewChanges = false
    })
  }

Objective-C

#import "ViewController.h"
@import GoogleMaps;

@interface ViewController () <GMSMapViewDelegate>
@property (strong, nonatomic) GMSMapView *mapView;
@end

@implementation ViewController {
  GMSMarker *_london;
  UIImageView *_londonView;
}

- (void)viewDidLoad {
  [super viewDidLoad];

  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:51.5
                                                          longitude:-0.127
                                                               zoom:14];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;

  _mapView.delegate = self;

  UIImage *house = [UIImage imageNamed:@"House"];
  house = [house imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
  _londonView = [[UIImageView alloc] initWithImage:house];
  _londonView.tintColor = [UIColor redColor];

  CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
  _london = [GMSMarker markerWithPosition:position];
  _london.title = @"London";
  _london.iconView = _londonView;
  _london.tracksViewChanges = YES;
  _london.map = self.mapView;
}

- (void)mapView:(GMSMapView *)mapView
    idleAtCameraPosition:(GMSCameraPosition *)position {
  [UIView animateWithDuration:5.0
                   animations:^{
                     _londonView.tintColor = [UIColor blueColor];
                   }
                   completion:^(BOOL finished) {
                     // Stop tracking view changes to allow CPU to idle.
                     _london.tracksViewChanges = NO;
                   }];
}

@end

iconViewUIView を受け取るため、マーカーを定義する標準の UI コントロールの階層があり、各ビューには標準のアニメーション機能があります。 任意の変換を適用するほか、マーカーのサイズ、色、アルファレベルの変更を含めることができます。 iconView プロパティは、UIView のすべてのアニメーション可能プロパティ(framecenter 以外)のアニメーションをサポートしています。

iconView を使用するときは、次の点を考慮してください。

  • tracksViewChangesYES に設定すると、UIView が大量のリソースを必要とするため、電池の使用量が増加する可能性があります。 一方、単一のフレームの UIImage は静的で、再レンダリングが不要です。

  • 一部の端末では、画面上に多くのマーカーが存在すると、マップのレンダリングによって大きな負荷がかかる場合があります。マーカーごとに UIView が存在し、すべてのマーカーは同時に変更をトラッキングします。

  • iconView は単にビューのスナップショットであるため、ユーザー操作には応答しません。

  • ビューは、clipsToBounds の実際の値にかかわらず、このプロパティが YES に設定されているかのように動作します。 境界の外で動作する変換を適用できますが、描画するオブジェクトはオブジェクトの境界内に存在する必要があります。 すべての変換 / 変化は、監視および適用されます。 つまり、サブビューはビューに含まれている必要があります。

tracksViewChanges プロパティを設定するタイミングを判断するには、マーカーを自動的に再描画させるメリットとパフォーマンスに関する考慮事項を比較し、評価する必要があります。 次に例を示します。

  • 一連の変更を行う場合は、プロパティを YES に設定してから NO に戻すことができます。

  • アニメーションの実行中やコンテンツを非同期で読み込んでいる間は、そのアクションが完了するまでこのプロパティを YES に設定しておく必要があります。

マーカーの不透明度を変更する

opacity プロパティを使用して、マーカーの不透明度を制御できます。 不透明度は 0.0 から 1.0 までの浮動小数で指定する必要があります。0 は完全に透明で、1 は完全に不透明です。

Swift

marker.opacity = 0.6

Objective-C

marker.opacity = 0.6;

GMSMarkerLayer を使用して Core Animation でマーカーの不透明度をアニメーションさせることもできます。

マーカーをフラット化する

マーカー アイコンは通常、マップの表面に対してではなく、デバイスの画面に対する向きで描画されます。そのため、マップを回転、チルト、ズームしても、必ずしもマーカーの向きは変わりません。

地面に対して平行になるようにマーカーの向きを設定できます。 フラット マーカーは、マップが回転されると回転し、マップがチルトされると視点が変化します。

通常のマーカーと同様に、マップがズームインまたはズームアウトされても、フラット マーカーのサイズは変わりません。

マーカーの向きを変更するには、マーカーの flat プロパティを YES または true に設定します。

Swift

let position = CLLocationCoordinate2D(latitude:51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.isFlat = true
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.flat = YES;
london.map = mapView;

マーカーを回転する

rotation プロパティを設定して、マーカーをそのアンカー ポイントを中心に回転できます。 回転は CLLocationDegrees 型で指定し、デフォルト位置を基準とした時計回りの度数で示します。 マップ上のマーカーがフラットな場合、デフォルト位置は北です。

次の例では、マーカーを 90° 回転させます。 groundAnchor プロパティを 0.5,0.5 に設定すると、マーカーは基部ではなく、中央を中心として回転されます。

Swift

let position = CLLocationCoordinate2D(latitude:51.5, longitude: -0.127)
let degrees = 90.0
let london = GMSMarker(position: position)
london.groundAnchor = CGPoint(x:0.5, y:0.5)
london.rotation = degrees
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
CLLocationDegrees degrees = 90;
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.groundAnchor = CGPointMake(0.5, 0.5);
london.rotation = degrees;
london.map = mapView;

情報ウィンドウを追加する

情報ウィンドウを使用して、ユーザーがマーカーをタップしたときに情報を表示できます。 一度に表示される情報ウィンドウは 1 つのみです。 ユーザーが別のマーカーをタップすると、表示中のウィンドウが閉じて、新しい情報ウィンドウが表示されます。

情報ウィンドウの内容は、title プロパティと snippet プロパティによって定義します。 title プロパティと snippet プロパティの両方が空または nil の場合、マーカーをクリックしても情報ウィンドウは表示されません。

以下のスニペットでは、情報ウィンドウのテキストにタイトルのみを使用する単純なマーカーが作成されます。

Swift

let position = CLLocationCoordinate2D(latitude:51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.map = mapView;

snippet プロパティを使用すると、タイトルの下に小さなフォントで追加のテキストが表示されるようになります。 情報ウィンドウの幅よりも長い文字列は、自動的に折り返して複数行で表示されます。 長すぎるメッセージは、切り捨てられる場合があります。

Swift

let position = CLLocationCoordinate2D(latitude:51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;

情報ウィンドウを自動的に更新するように設定する

情報ウィンドウが非表示になって再表示されるまで待つのではなく、変更されたときに情報ウィンドウの新しいプロパティやコンテンツをすぐに表示したい場合は、マーカーの tracksInfoWindowChangesYES または true に設定します。 デフォルトは NO または false です。

Swift

marker.tracksInfoWindowChanges = true

Objective-C

marker.tracksInfoWindowChanges = YES;

tracksInfoWindowChanges プロパティを設定するタイミングを判断するには、情報ウィンドウを自動的に再描画させるメリットとパフォーマンスに関する考慮事項を比較し、評価する必要があります。

次に例を示します。

  • 一連の変更を行う場合は、プロパティを YES に設定してから NO に戻すことができます。

  • アニメーションの実行中やコンテンツを非同期で読み込んでいる間は、そのアクションが完了するまでこのプロパティを YES に設定しておく必要があります。

マーカーの iconView プロパティを使用するときは、考慮事項もご覧ください。

情報ウィンドウの位置を変更する

情報ウィンドウは、端末の画面に平行になるように描画され、関連付けられているマーカーの上に中央揃えで示されます。 infoWindowAnchor プロパティを設定すると、マーカーとの相対位置で情報ウィンドウの場所を変更できます。 このプロパティには、(x, y) のオフセットで定義される CGPoint を設定できます。x と y の範囲は、どちらも 0.0 から 1.0 の間になります。デフォルトのオフセットは (0.5, 0.0)、すなわち上の中央です。 カスタム アイコンに対して情報ウィンドウの位置を調整する場合は、infoWindowAnchor のオフセットを設定すると便利です。

Swift

let position = CLLocationCoordinate2D(latitude:51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.snippet = "Population: 8,174,100"
london.infoWindowAnchor = CGPoint(x:0.5, y:0.5)
london.icon = UIImage(named: "house")
london.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.infoWindowAnchor = CGPointMake(0.5, 0.5);
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;

マーカーと情報ウィンドウのイベントを処理する

マップで発生するイベントは、リッスンすることができます。イベントは、たとえばユーザーがマーカーや情報ウィンドウをタップすることなどで発生します。 イベントをリッスンするには、GMSMapViewDelegate プロトコルを実装します。 詳しくは、イベントガイドGMSMapViewDelegate のメソッドの一覧をご覧ください。

ストリート ビューのイベントについては、GMSPanoramaViewDelegate をご覧ください。

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

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