情報ウィンドウでは、マーカーをタップしたユーザーに情報を表示できます。
情報ウィンドウは、関連付けられているマーカーを中心としてその真上に、デバイス画面の左右に広がるように描画されます。デフォルトの情報ウィンドウでは、タイトルが太字で表示され、その下にスニペット テキストが表示されます。
情報ウィンドウのコンテンツは、マーカーの title
プロパティと snippet
プロパティで定義します。title
プロパティと snippet
プロパティの両方が空白または nil
の場合、マーカーをクリックしても情報ウィンドウは表示されません。
情報ウィンドウは一度に 1 つのみ表示されます。ユーザーが別のマーカーをタップすると、現在のウィンドウは非表示になり、新しい情報ウィンドウが開きます。情報ウィンドウが表示されているマーカーをユーザーがクリックすると、その情報ウィンドウはいったん閉じて再度開きます。
カスタム情報ウィンドウを作成して、テキストや画像を追加します。カスタム情報ウィンドウでは、ポップアップの外観を完全に制御できます。
情報ウィンドウを追加する
次のスニペットでは、情報ウィンドウのテキストにタイトルのみを示す単純なマーカーを作成します。
Swift
let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127) let london = GMSMarker(position: position) london.title = "London" london.map = mapView
Objective-C
CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127); GMSMarker *london = [GMSMarker markerWithPosition:position]; london.title = @"London"; london.map = mapView;
snippet
プロパティを使用すると、テキストを追加できます。追加したテキストは、タイトルの下に小さなフォントで表示されます。情報ウィンドウの幅より長い文字列は、数行で自動的に折り返されます。非常に長いメッセージは切り捨てられる場合があります。
Swift
london.title = "London" london.snippet = "Population: 8,174,100" london.map = mapView
Objective-C
london.title = @"London"; london.snippet = @"Population: 8,174,100"; london.map = mapView;
情報ウィンドウを表示または非表示にする
情報ウィンドウは、マーカーに対するユーザーのタッチイベントに応答するように設計されています。GMSMapView
の selectedMarker
プロパティを設定すると、情報ウィンドウをプログラムで表示または非表示にできます。
selectedMarker
にマーカーの名前を設定します。- 非表示にするには、
selectedMarker
をnil
に設定します。
Swift
london.title = "London" london.snippet = "Population: 8,174,100" london.map = mapView // Show marker mapView.selectedMarker = london // Hide marker mapView.selectedMarker = nil
Objective-C
london.title = @"London"; london.snippet = @"Population: 8,174,100"; london.map = mapView; // Show marker mapView.selectedMarker = london; // Hide marker mapView.selectedMarker = nil;
情報ウィンドウを自動更新するように設定する
マーカーの tracksInfoWindowChanges
を YES
または true
に設定すると、情報ウィンドウが非表示になるのを待たずに、変更するとすぐに新しいプロパティまたはコンテンツを表示できます。デフォルトは NO
または false
です。
Swift
london.tracksInfoWindowChanges = true
Objective-C
london.tracksInfoWindowChanges = YES;
tracksInfoWindowChanges
プロパティを設定するタイミングを決定するには、パフォーマンス上の考慮事項と、情報ウィンドウを自動的に再描画させるメリットを比較検討する必要があります。次に例を示します。
- 一連の変更を行う場合は、プロパティを
YES
に変更してからNO
に戻すことができます。 - アニメーションが実行されている場合、またはコンテンツが非同期で読み込まれる場合は、アクションが完了するまでこのプロパティを
YES
に設定したままにする必要があります。
マーカーの iconView
プロパティを使用する場合は、注意事項もご覧ください。
情報ウィンドウの位置を変更する
情報ウィンドウは、関連付けられているマーカーを中心としてその真上に、デバイス画面の左右に広がるように描画されます。マーカーに対する情報ウィンドウの位置を変更するには、infoWindowAnchor
プロパティを設定します。このプロパティは、(x,y)オフセットとして定義される CGPoint
を受け入れます。x と y の範囲はどちらも 0.0 ~ 1.0 です。デフォルトのオフセットは(0.5, 0.0)、つまり中央の上部です。infoWindowAnchor
オフセットの設定は、カスタム アイコンに対して情報ウィンドウを配置するのに便利です。
Swift
london.infoWindowAnchor = CGPoint(x: 0.5, y: 0.5) london.icon = UIImage(named: "house") london.map = mapView
Objective-C
london.infoWindowAnchor = CGPointMake(0.5, 0.5); london.icon = [UIImage imageNamed:@"house"]; london.map = mapView;
情報ウィンドウのイベントを処理する
次の情報ウィンドウ イベントをリッスンできます。
mapView:markerInfoWindow:
- マーカーが選択される直前に呼び出されます。 マーカーで使用するカスタム情報ウィンドウを、必要に応じてUIView
として返すことができます。詳しくは、後述のカスタム情報ウィンドウをご覧ください。mapView:markerInfoContents:
-mapView:markerInfoWindow
が nil を返すときに呼び出されます。mapView:didCloseInfoWindowOfMarker:
- マーカーの情報ウィンドウが閉じられたときに呼び出されます。mapView:didLongPressInfoWindowOfMarker:
- マーカーの情報ウィンドウが長押しされた後で呼び出されます。
イベントをリッスンするには、GMSMapViewDelegate
プロトコルを実装する必要があります。イベントに関するガイドと GMSMapViewDelegate
のメソッドのリストをご覧ください。
GitHub には、情報ウィンドウ イベントの処理方法を示すサンプルが含まれています。
カスタム情報ウィンドウ
情報ウィンドウのコンテンツをカスタマイズするには、カスタム情報ウィンドウのレイアウトを定義する UIView
のサブクラスを作成します。このサブクラスで、必要に応じてビューを定義します。たとえば、カスタム UILabel
インスタンスを使用してタイトルとスニペット テキストを表示し、その他のビュー(UIImageView
インスタンスなど)を使用して情報ウィンドウに表示される画像を追加できます。
ViewController
が GMSIndoorDisplayDelegate
プロトコルを実装し、mapView:markerInfoWindow: イベントのリスナーを定義していることを確認します。マーカーが選択される直前に、このイベント リスナーが呼び出されます。このイベント リスナーにより、カスタム UIView
クラスのインスタンスを返して、マーカーで使用されるカスタム情報ウィンドウを定義できます。
デフォルトの情報ウィンドウ、カスタマイズされたコンテンツを表示している情報ウィンドウ、フレームと背景がカスタマイズされている情報ウィンドウの画像を以下に示します。
Maps SDK for iOS で提供されている GitHub のコードサンプルには、カスタム情報ウィンドウのサンプルが含まれています。例については、MarkerInfoWindowViewController.m (Objective-C)や MarkerInfoWindowViewController.swift(Swift)の定義をご覧ください。
サンプルのダウンロードと実行については、コードサンプルをご覧ください。