情報ウィンドウを使用すると、マーカーをタップしたユーザーに情報を表示することができます。
情報ウィンドウは、デバイスの画面に平行になるように描画され、関連付けられているマーカーの上に中央揃えで示されます。デフォルトの情報ウィンドウでは、タイトルが太字で表示され、タイトルの下にスニペット テキストが表示されます。
情報ウィンドウの内容は、マーカーの 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）の定義をご覧ください。
これらのサンプルのダウンロードと実行については、コードサンプルをご覧ください。