その4: Markers (Google Maps SDK for iOS)
Markers
Introduction
マーカーは地図上の場所を特定するもの。Google Maps SDK for iOSではWebのGoogle Mapsのそれと共通の標準的なアイコンが使われるが、デフォルトのアイコンを別の画像で置き換えたり、ピン留めするオフセットを変更したりして、マーカーをカスタマイズすることもできる。
マーカーはGMSMarkerオブジェクトで、GMSMapViewのmapプロパティに設定することで地図上に配置される。
マーカーアイコンは、地図ではなくデバイスの向きに沿って描画される。回転させたり傾けたり、ズームしたりしても、マーカーを変更する必要はない。
Add a marker
マーカーを追加するには、座標を含んだGMSMarkerオブジェクトを生成し、mapプロパティにGMSMapViewを設定する。
以下は 緯度0, 経度0の地点に、クリック時に"Hello World"のInfoWindowを表示するマーカーを置くサンプル
CLLocationCoordinate2D position = CLLocationCoordinate2DMake(0, 0);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.title = @"Hello World";
marker.map = mapView_;
新しいマーカーを追加するときにアニメーションを行うなら、GMSMarkerのanimatedプロパティをYESにすればよい
Remove a marker
地図に追加したマーカを消去するには、mapプロパティをnilにすればよい。
marker.map = nil;
または、GMSMapViewに設定された全てのOverlay(マーカーも含む)を消すなら、GMSMapViewのclearメソッドを呼ぶ。
[mapView_ clear];
地図上に設置したマーカーの設定を変更したいなら、マーカーオブジェクトを保持するようにする。オブジェクトに対して変更を行えば、マップ上のマーカーも変更される
Customize a marker
他にも、形はデフォルトと同じで色の違うマーカーや、カスタム画像を使ったマーカを作ることができる。
Change the default marker color
デフォルトの形で色違いのマーカーを作るには、markerImageWithColorメソッドでIconを作成し、それをマーカーのプロパティに設定する。
以下は黒のマーカーの例。
marker.icon = [GMSMarker markerImageWithColor:[UIColor blackColor]];
Change the default marker icon
マーカーのイメージを変えるなら、iconプロパティにUIImageオブジェクトを設定する。
以下はhouse.jpgという画像を使ったマーカーの例
london.icon = [UIImage imageNamed:@"house"];
おし同じイメージでいくつかのマーカーを作る時は、同じUIImageを各マーカーに設定すれば、たくさんのマーカーを表示するときにアプリケーションのパフォーマンスをよくすることができる。
Info windows
InfoWindowは、ユーザーがマーカーをタップした時に情報を表示するためのもの。 InfoWindowは一度にひとつだけしか表示されない。他のマーカーがタップされると、現在表示中のWindowが消え、そちらのマーカーのInfoWindowが表示される。
InfoWindowは、タイトルとスニペット(簡単な説明文)が定義されており、タイトルとスニペットの両方が空白もしくはnilの場合、マーカーがタップされてもInfo Windowは開かない
以下はタイトルだけのInfoWindowなシンプルなマーカーのコード例
CLLocationCoordinate2D position = CLLocationCoordinate2DMake(34.65, 135);
GMSMarker* akashi = [GMSMarker markerWithPosition:position];
akashi.title = @"Akashi";
akashi.map = mapView_;
スニペットは、タイトルよりも小さいフォントでタイトルの下の場所に表示されるもので、説明や補助的な情報を表示する。
Info Windowの幅を越える文字列は、自動的に数行までは改行され、それを越える部分は省略される。
akashi.snippet = @"On the Japan Standard Time Meridian";
Info Windowはデバイススクリーンの向きに沿って、関連するマーカーの真上に表示される。 マーカーに対するInfoWindowの表示位置は infoWindowAnchor プロパティで調整可能である。 このプロパティにCGPointでオフセットを0.0~1.0で設定する。デフォルトは(0.5,0.0)の中央上部である。カスタムイメージを使う時にこのプロパティが役に立つ。
akashi.infoWindowAnchor = CGPointMake(0.5, 0.5);
akashi.icon = [UIImage imageNamed:@"Meridian"];
注意: Info Windowは毎回画像として地図上に描画されるため、オブジェクトの値を変更しても表示中のものは変化しない。変更が反映されるのは、再びInfoWindowが表示される時になる。
というわけでマーカーが終了。コードの書き方が違うだけで、機能はAndroid版と一緒ですね。
