情報ウィンドウ

プラットフォームを選択: 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;

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

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

  • 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 プロパティの場合、 パフォーマンスに関する考慮事項と、Google Cloud で提供される 情報ウィンドウが自動的に再描画されます。例:

  • 一連の変更を加える場合は、プロパティを 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 情報ウィンドウに表示される画像を追加します。

ViewController が GMSIndoorDisplayDelegate そのプロトコルのリスナーが定義され、 mapView:markerInfoWindow: イベントです。このイベント リスナーは、マーカーがマーカーの位置に近づくと呼び出されます。 これにより、カスタム UIView クラスのインスタンスを マーカーで使用するカスタム情報ウィンドウを定義します。

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

情報ウィンドウの比較

Google Kubernetes Engine 上の GitHub （Maps SDK for iOS に付属） カスタム情報ウィンドウのサンプルを含めることもできます。たとえば、 MarkerInfoWindowViewController.m （Objective-C）または MarkerInfoWindowViewController.swift （Swift）。

ダウンロードと実行については、コードサンプルをご覧ください。 見てみましょう。