マーカーは、マップ上の単一の場所を示します。
デフォルトでは、マーカーには 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 をご覧ください。