マーカーは、マップ上の単一の場所を示します。
デフォルトでは、マーカーには 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 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
のアイコン プロパティに渡します。
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
がYES
に設定されている場合、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;
マーカーの不透明度を [Core Animation]Core Animation でアニメーション化するには、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
をご覧ください。