マーカー

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

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

デフォルトでは、マーカーには Google マップの一般的な外観とアイコンと同じ標準アイコンが使用されます。 できます。マーカーをカスタマイズしたい場合は、 デフォルトのマーカーを選択したり、マーカー画像をカスタム アイコンに差し替えたり、 プロパティを指定します。

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

マーカーを追加する

マーカーを追加するには、position を含む GMSMarker オブジェクトを作成し、 title を指定し、その 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 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 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 の比率。これによりキャンペーンの 多くのマーカーを表示する場合に適しています。

この画像は複数のフレームを含む場合があります。また、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 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 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];
  _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:^{
    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 プロパティ UIView のすべてのアニメーション化可能なプロパティのアニメーションをサポートしますが、frame と center。

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

  • tracksViewChanges が設定されている場合、UIView がリソースを要求する可能性がある YES に設定され、バッテリー使用量が増加する可能性があります。これに対し、 単一のフレーム 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;

[Core Animation]では、マーカーの不透明度をアニメーション化できます。Core GMSMarkerLayer を使用したアニメーション。

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

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

地表を基準としてフラットになるようにマーカーを設定することができます。平坦 地図が回転するとマーカーが回転し、地図の向きが変化すると視点が変化する できます。通常のマーカーと同様に、フラット マーカーのサイズは、 拡大または縮小されます。

マーカーの向きを変更するには、マーカーの 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。