マーカー

プラットフォームを選択: Android iOS JavaScript

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

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

マーカーのクリック イベントに応じて、情報ウィンドウを開くことができます。情報ウィンドウは、マーカーの上でテキストまたは画像を表示するダイアログ ウィンドウです。デフォルトの情報ウィンドウを使用してテキストを表示することも、独自のカスタム情報ウィンドウを作成してコンテンツを完全に制御することもできます。

マーカーを追加する

マーカーを追加するには、position と title を含む 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: マーカーが追加されたときに groundAnchor からポップするようにします。
• kGMSMarkerAnimationFadeIn: マーカーが追加されるとフェードインします。

マーカーの削除

地図からマーカーを削除するには、GMSMarker の map プロパティを nil に設定します。また、GMSMapView clear メソッドを呼び出して、地図上に現在表示されているすべてのオーバーレイ（マーカーを含む）を削除することもできます。

Swift

let camera = GMSCameraPosition.camera(
  withLatitude: -33.8683,
  longitude: 151.2086,
  zoom: 6
)
let options = GMSMapViewOptions()
options.camera = camera
let mapView = GMSMapView(options: options)
// ...
mapView.clear()
      

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
options.camera = camera;
mapView = [[GMSMapView alloc] initWithOptions:options];
// ...
[mapView clear];
      

地図に追加した後でマーカーを変更する場合は、GMSMarker オブジェクトを保持しておきます。マーカーを後から変更するには、このオブジェクトに変更を加えます。

Swift

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.map = mapView
// ...
marker.map = nil
      

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
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 プロパティを無視します。

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

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

Swift

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

Objective-C

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

同じ画像を使用して複数のマーカーを作成する場合は、各マーカーに同じ UIImage のインスタンスを使用します。これにより、アプリケーションのパフォーマンスが向上し、多数のマーカーを表示する際のテクスチャ キャッシュの使用が最適化されます。

警告: 固有の、動的な、または高解像度のカスタム画像を含むマーカーを多数追加すると、Maps SDK for iOS の内部テクスチャ キャッシュが枯渇する可能性があります。キャッシュ容量に達すると、アイコンのちらつきや、マーカー間のアイコンの入れ替わりなど、レンダリングの異常が発生することがあります。

アプリケーションで多数の一意のマーカーや動的に生成されたマーカーが必要な場合は、GMSAdvancedMarker（Maps SDK for iOS 8.2 以降でサポート）に移行することをおすすめします。ほとんどの場合、数百個程度のカスタム マーカーをサポートできますが、この上限はマーカーのサイズに大きく依存するため、これよりはるかに少なくなることもあります。GMSAdvancedMarker は、ネイティブ ビュー（UIView または CALayers）を使用してアイコンを直接レンダリングし、内部テクスチャ アトラス パッキング システムを完全にバイパスします。

また、テクスチャ キャッシュの使用を最適化するために、可能な限り複数のマーカーで同じ UIImage 参照を再利用する必要があります。

この画像には複数のフレームが含まれている可能性があります。また、alignmentRectInsets プロパティも考慮されます。これは、マーカーに影やその他の使用できない領域がある場合に便利です。

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

次のスニペットでは、マーカーの iconView プロパティを設定してカスタム アイコンを持つマーカーを作成し、マーカーの色の変化をアニメーション化します。このスニペットは、アプリに「house.png」という名前の画像が含まれていることを仮定しています。

Swift

import CoreLocation
import GoogleMaps

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

  override func viewDidLoad() {
    super.viewDidLoad()

    let camera = GMSCameraPosition.camera(
      withLatitude: 51.5,
      longitude: -0.127,
      zoom: 14
    )
    let options = GMSMapViewOptions()
    options.camera = camera
    let mapView = GMSMapView(options: options)
    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 CoreLocation;
@import GoogleMaps;

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

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

- (void)viewDidLoad {
  [super viewDidLoad];

  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:51.5
                                                          longitude:-0.127
                                                               zoom:14];
  GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
  options.camera = camera;
  _mapView = [[GMSMapView alloc] initWithOptions:options];
  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:^{
    self->_londonView.tintColor = [UIColor blueColor];
  }
                   completion:^(BOOL finished) {
    // Stop tracking view changes to allow CPU to idle.
    self->_london.tracksViewChanges = NO;
  }];
}

@end
      

iconView は UIView を受け入れるため、マーカーを定義する標準 UI コントロールの階層を設定できます。各ビューには、標準のアニメーション機能セットがあります。マーカーのサイズ、色、アルファレベルの変更や、任意の変換の適用が可能です。iconView プロパティは、frame と center を除く UIView のすべてのアニメーション可能なプロパティのアニメーションをサポートしています。

iconView を使用する際は、次の点に注意してください。

• tracksViewChanges が YES に設定されている場合、UIView はリソースを大量に消費する可能性があり、バッテリー使用量が増加する可能性があります。一方、単一フレームの UIImage は静的であり、再レンダリングする必要はありません。
• 画面上に多数のマーカーがあり、各マーカーに独自の UIView があり、すべてのマーカーが同時に変更を追跡している場合、一部のデバイスでは地図のレンダリングが困難になることがあります。
• iconView はビューのスナップショットであるため、ユーザー操作に応答しません。
• ビューは、実際の値に関係なく、clipsToBounds が YES に設定されているかのように動作します。境界外で機能する変換を適用できますが、描画するオブジェクトはオブジェクトの境界内にある必要があります。すべての変換/シフトがモニタリングされ、適用されます。簡単に言うと、サブビューはビュー内に含まれている必要があります。
• GMSMarker で -copyWithZone: を使用するには、まず GMSMarker をコピーしてから、コピーに iconView の新しいインスタンスを設定する必要があります。UIView は NSCopying をサポートしていないため、iconView をコピーできません。

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 positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let londonMarker = GMSMarker(position: positionLondon)
londonMarker.isFlat = true
londonMarker.map = mapView
      

Objective-C

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

マーカーを回転させる

アンカー ポイントを中心としてマーカーを回転させるには、rotation プロパティを設定します。回転を CLLocationDegrees 型として指定します。これは、デフォルトの位置から時計回りの度数で指定します。地図上のマーカーがフラットな場合、デフォルトの位置は北となります。

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

Swift

let degrees = 90.0
londonMarker.groundAnchor = CGPoint(x: 0.5, y: 0.5)
londonMarker.rotation = degrees
londonMarker.map = mapView
      

Objective-C

CLLocationDegrees degrees = 90;
londonMarker.groundAnchor = CGPointMake(0.5, 0.5);
londonMarker.rotation = degrees;
londonMarker.map = mapView;
      

マーカーのイベントを処理する

ユーザーがマーカーをタップしたときなど、地図上で発生するイベントをリッスンできます。イベントをリッスンするには、GMSMapViewDelegate プロトコルを実装する必要があります。特定のマーカー イベントを処理する方法については、マーカー イベントとジェスチャーをご覧ください。イベントのガイドには、GMSMapViewDelegate のメソッドのリストも記載されています。ストリートビュー イベントについては、GMSPanoramaViewDelegate をご覧ください。