マーカーは、マップ上の単一の場所を示します。
デフォルトでは、マーカーには 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
: 追加時にマーカーがフェードインします。
マーカーを削除する
地図の map
プロパティを設定すると、地図からマーカーを削除できます。
GMSMarker
から 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
。