佐長 Blog: マーカー（ピン）を表示する - [開発]

マーカーの表示、削除、カスタマイズ、情報ウィンドウの設定についてのまとめ。

Google Maps SDK for iOSでは、マーカーの追加、削除、カスタマイズが可能だ。
マーカーは標準の赤いマーカーと、マーカータップ時に表示される情報ウィンドウで構成される。

今回は以下の内容でマップへのマーカー表示を行う。

マーカーを追加する
単体のマーカーを削除する
全てのマーカーを削除する
マーカーをカスタマイズする
マーカーの情報ウィンドウの表示

1.マーカーを追加する

地図へマーカーを追加するには、GMSMapViewのaddMarkerWithOptionsメソッドを利用する。
addMarkerWithOptionsメソッドへはGMSMarkerOptionsクラスを引数として渡す。
このGMSMarkerOptionsに対して緯度経度を指定することで、地図上の任意の緯度経度へマーカーを追加できる。

以下は地図へマーカー追加する場合

GMSMarkerOptions *options = [[GMSMarkerOptions alloc] init];
// 緯度･経度の指定
options.position = CLLocationCoordinate2DMake(35.658599, 139.745443);
[mapView_ addMarkerWithOptions:options];

マーカーを追加

2.単体のマーカーを削除する

追加したマーカーを削除するさいは、GMSMarkerのremoveを利用する。
removeを実行したマーカーは地図上から削除される。

以下は地図からマーカーを削除する場合

// マーカーを削除
[marker remove];

3.全てのマーカーを削除する

複数のマーカーやその他のオブジェクトを削除する場合は、GMSMapViewのclearを使用する。
地図上の複数のマーカーを同時に削除する場合は便利だが、他のオブジェクトも削除されてしまうので、マーカー以外を残したい場合は全てのマーカーに対してremoveを行う必要がある。

以下は地図から全てのマーカー（その他オブジェクトも含めて）を削除する場合

// 地図上からオブジェクトを全て削除する
 [mapView clear];

4.マーカーをカスタマイズする

マーカーはおなじみの赤いマーカー以外に独自に画像を指定できる。
GMSMarkerOptionsのiconに対してUIImageを指定する。

以下は独自の画像を指定した場合

GMSMarkerOptions *options = [[GMSMarkerOptions alloc] init];
options.position = CLLocationCoordinate2DMake(35.658599, 139.745443);
// 画像を指定
options.icon = [UIImage imageNamed:@"pin"];
options.infoWindowAnchor = CGPointMake(3.0, -2.0);
[mapView_ addMarkerWithOptions:options];

東京タワー画像、Appleの地図で使用されているピン画像を表示した場合は以下のようになる。

東京タワーの画像は、こちらの画像を利用させていただいた。

独自の画像を指定した状態でマップを傾けた場合も画像自体が傾くことはない。

5.マーカーの情報ウィンドウの表示

マーカーのタップ時には、情報ウィンドウを表示できる。
情報ウィンドウにはタイトルと説明を表示可能で、GMSMarkerOptionsのtitle、snippetに対して指定する。
情報ウィンドウは、地図上に１つしか表示できないので、情報ウィンドウを表示した状態で他のマーカーの情報ウィンドウを表示した場合は、表示していた情報ウィンドウは閉じられる。

以下、情報ウィンドウの指定

GMSMarkerOptions *options = [[GMSMarkerOptions alloc] init];
options.position = CLLocationCoordinate2DMake(35.658599, 139.745443);
options.title = @"東京タワー";
options.snippet = @"Tokyo Tower";
[mapView_ addMarkerWithOptions:options];

情報ウィンドウの表示位置も指定可能だ。
GMSMarkerOptionsのinfoWindowAnchorに対して表示する座標を指定する。
デフォルとでは、この座標は(0.5, 0.0)となる。

以下、情報ウィンドウの表示位置を変更した場合

GMSMarkerOptions *options = [[GMSMarkerOptions alloc] init];
options.position = CLLocationCoordinate2DMake(35.658599, 139.745443);
options.infoWindowAnchor = CGPointMake(3.0, -2.0);
[mapView_ addMarkerWithOptions:options];