情報ウィンドウ

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。
プラットフォームを選択: Android iOS JavaScript

マーカーの上に表示される情報ウィンドウ。

情報ウィンドウでは、ユーザーがマーカーをタップしたときに情報を表示できます。

情報ウィンドウは、関連付けられているマーカーを中心としてその真上に、デバイス画面の左右に広がるように描画されます。デフォルトの情報ウィンドウでは、太字のタイトルとスニペットの下にテキストが表示されます。

情報ウィンドウのコンテンツは、マーカーの 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;
      

情報ウィンドウを表示または非表示にする

情報ウィンドウは、マーカー上でのユーザー タッチイベントに応答するように設計されています。情報ウィンドウをプログラムで表示または非表示にするには、GMSMapViewselectedMarker プロパティを設定します。

  • selectedMarker に、表示するマーカーの名前を設定します。
  • 非表示にするには、selectedMarkernil に設定します。

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;
      

自動更新されるように情報ウィンドウを設定する

情報ウィンドウが変更されたときにすぐに新しいプロパティや情報ウィンドウのコンテンツを表示したい場合は、マーカーの tracksInfoWindowChangesYES または 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;
      

情報ウィンドウのイベントを処理する

以下の情報ウィンドウ イベントをリッスンできます。

イベントをリッスンするには、GMSMapViewDelegate プロトコルを実装する必要があります。イベントガイドGMSMapViewDelegate のメソッドのリストをご覧ください。

GitHub には、情報ウィンドウ イベントの処理方法を示すサンプルが含まれています。

カスタム情報ウィンドウ

情報ウィンドウの内容をカスタマイズするには、カスタム情報ウィンドウのレイアウトを定義する UIView のサブクラスを作成します。そのサブクラスで、ビューを自由に定義します。たとえば、カスタムの UILabel インスタンスを使用して、タイトルとスニペット テキスト、その他のビュー(UIImageView インスタンスなど)を表示して、情報ウィンドウに表示される画像を追加できます。

ViewControllerGMSIndoorDisplayDelegate プロトコルを実装し、mapView:markerInfoWindow: イベントのリスナーを定義していることを確認します。イベント リスナーは、マーカーが選択される直前に呼び出されます。このマーカーにより、カスタム UIView クラスのインスタンスを返して、マーカーで使用されるカスタム情報ウィンドウを定義できます。

デフォルトの情報ウィンドウ、カスタマイズされたコンテンツを表示している情報ウィンドウ、フレームと背景がカスタマイズされている情報ウィンドウの画像を、以下に示します。

情報ウィンドウの比較

Maps SDK for iOS で提供されている GitHub のコードサンプルには、カスタム情報ウィンドウのサンプルが含まれています。たとえば、MarkerInfoWindowViewController.m(Objective-C)または MarkerInfoWindowViewController.swift(Swift)の定義をご覧ください。

これらのサンプルのダウンロードと実行については、コードサンプルをご覧ください。