情報ウィンドウ

プラットフォームを選択: Android iOS JavaScript

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

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

情報ウィンドウは、デバイスの画面に平行になるように描画され、関連付けられているマーカーの上に中央揃えで示されます。デフォルトの情報ウィンドウでは、タイトルが太字で表示され、タイトルの下にスニペット テキストが表示されます。

情報ウィンドウの内容は、マーカーの title プロパティと snippet プロパティで定義されます。title プロパティと snippet プロパティの両方が空白または nil の場合、マーカーをクリックしても情報ウィンドウは表示されません。

情報ウィンドウは一度に 1 つのみ表示されます。ユーザーが別のマーカーをタップすると、現在のウィンドウが非表示になり、新しい情報ウィンドウが開きます。ユーザーが現在情報ウィンドウが表示されているマーカーをクリックすると、その情報ウィンドウはいったん閉じますが、その後再度表示されます。

カスタム情報ウィンドウを作成して、テキストや画像を追加します。カスタム情報ウィンドウを使用すると、ポップアップの外観を完全に制御できます。

情報ウィンドウを追加する

次のスニペットは、情報ウィンドウのテキストのタイトルのみを含むシンプルなマーカーを作成します。

SwiftObjective-C
let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.map = mapView
      
CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.map = mapView;

snippet プロパティを使用すると、タイトルの下に小さいフォントで表示される追加のテキストを追加できます。情報ウィンドウの幅を超える文字列は、複数行に自動的に折り返されます。非常に長いメッセージは切り捨てられる場合があります。

SwiftObjective-C
london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView
      
london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;

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

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

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

SwiftObjective-C
london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView
// Show marker
mapView.selectedMarker = london
// Hide marker
mapView.selectedMarker = nil
      
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 です。

SwiftObjective-C
london.tracksInfoWindowChanges = true
      
london.tracksInfoWindowChanges = YES;

tracksInfoWindowChanges プロパティを設定するタイミングを決めるには、パフォーマンスに関する考慮事項と、情報ウィンドウを自動的に再描画するメリットを比較検討する必要があります。次に例を示します。

  • 一連の変更を行う場合は、プロパティを YES に変更してから NO に戻すことができます。
  • アニメーションの実行中やコンテンツが非同期で読み込まれている場合は、アクションが完了するまでプロパティを YES に設定しておく必要があります。

マーカーの iconView プロパティを使用する場合は、考慮事項も参照してください。

情報ウィンドウの位置を変更する

情報ウィンドウは、関連付けられているマーカーを中心としてその真上に、デバイス画面の左右に広がるように描画されます。infoWindowAnchor プロパティを設定すると、マーカーに対する情報ウィンドウの位置を変更できます。このプロパティは、CGPoint を受け入れます。これは、x と y の両方が 0.0 ～ 1.0 の範囲にある（x,y）オフセットとして定義されます。デフォルトのオフセットは（0.5、0.0）です。つまり、中央上部です。infoWindowAnchor オフセットを設定すると、情報ウィンドウをカスタム アイコンに合わせて配置できます。

SwiftObjective-C
london.infoWindowAnchor = CGPoint(x: 0.5, y: 0.5)
london.icon = UIImage(named: "house")
london.map = mapView
      
london.infoWindowAnchor = CGPointMake(0.5, 0.5);
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;

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

情報ウィンドウでリッスンできるイベントは次のとおりです。

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

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

カスタム情報ウィンドウ

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

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

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

情報ウィンドウの比較

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

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