New basemap styling is coming soon to Google Maps Platform. This update to map styling includes a new default color palette, modernized pins, and improvements to map experiences and usability. All map styles will be automatically updated in March 2025. For more information on availability and how to opt in earlier, see New map style for Google Maps Platform.

情報ウィンドウ

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

情報ウィンドウは、地図の上でテキストまたは画像を表示するポップアップウィンドウです。情報ウィンドウは、常にマーカーに固定されます。デフォルトの動作では、マーカーがタップされたときに表示されます。

コードサンプル

GitHub の ApiDemos リポジトリには、すべての情報ウィンドウの機能を示すサンプルが含まれています。

MarkerDemoActivity - Java: 情報ウィンドウのカスタマイズと情報ウィンドウリスナーの使用
MarkerDemoActivity - Kotlin: 情報ウィンドウのカスタマイズと情報ウィンドウリスナーの使用

はじめに

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

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

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

情報ウィンドウを追加するには、対応するマーカーの title() メソッドと snippet() メソッドを設定する方法が最も簡単です。これらのプロパティを設定すると、ユーザーがマーカーをクリックするたびに情報ウィンドウが表示されるようになります。

Kotlin



val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
        .snippet("Population: 4,137,400")
)

Java


final LatLng melbourneLatLng = new LatLng(-37.81319, 144.96298);
Marker melbourne = map.addMarker(
    new MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
        .snippet("Population: 4,137,400"));

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

情報ウィンドウはユーザーのタッチイベントに応答するように設計されています。必要に応じて、ターゲットマーカーで showInfoWindow() を呼び出すことで、情報ウィンドウをプログラマティックに表示できます。情報ウィンドウを非表示にするには、hideInfoWindow() を呼び出します。

Kotlin



val melbourneLatLng = LatLng(-37.81319, 144.96298)
val melbourne = map.addMarker(
    MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne")
)
melbourne?.showInfoWindow()

Java


final LatLng melbourneLatLng = new LatLng(-37.81319, 144.96298);
Marker melbourne = map.addMarker(
    new MarkerOptions()
        .position(melbourneLatLng)
        .title("Melbourne"));
melbourne.showInfoWindow();

クラスタ化した個別のマーカー用の情報ウィンドウを作成することもできます。クラスタ化した個別のマーカー用の情報ウィンドウの追加に関するガイドをご覧ください。

カスタム情報ウィンドウ

情報ウィンドウのコンテンツやデザインをカスタマイズすることもできます。それには、InfoWindowAdapter インターフェースの具体的な実装を作成し、その実装を使用して GoogleMap.setInfoWindowAdapter() を呼び出す必要があります。このインターフェースには、デベロッパーが実装する 2 つのメソッド（getInfoWindow(Marker) と getInfoContents(Marker)）が含まれています。API では最初に getInfoWindow(Marker) を呼び出し、null が返されると getInfoContents(Marker) を呼び出します。また null が返されると、デフォルトの情報ウィンドウが使用されます。

最初のメソッド（getInfoWindow()）では、情報ウィンドウ全体で使用されるビューを指定できます。2 つ目のメソッド（getInfoContents()）では、ウィンドウのコンテンツをカスタマイズできますが、情報ウィンドウのフレームと背景はデフォルトが保持されます。

注: 表示される情報ウィンドウは、ライブビューではありません。返されたビューは、View.draw(Canvas) を使用して画像としてレンダリングされます。つまり、後からビューに加えた変更は、地図上の情報ウィンドウに反映されません。後から情報ウィンドウを更新するには（画像を読み込んだ後など）、showInfoWindow() を呼び出します。また情報ウィンドウは、タッチイベントや操作イベントなど、通常のビューで一般的に行われる双方向イベントにも対応していません。ただし、以下のセクションに記載するように、情報ウィンドウ全体で一般的なクリックイベントをリッスンすることは可能です。

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

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

MarkerDemoActivity サンプルには、情報ウィンドウイベントの登録および処理を行うサンプルコードが含まれています。

情報ウィンドウでクリックイベントをリッスンするには、OnInfoWindowClickListener を使用します。このリスナーを地図に設定するには、GoogleMap.setOnInfoWindowClickListener(OnInfoWindowClickListener) を呼び出します。ユーザーが情報ウィンドウをクリックすると、onInfoWindowClick(Marker) が呼び出され、情報ウィンドウがデフォルトのハイライト色（グレー）でハイライト表示されます。

Kotlin



internal inner class InfoWindowActivity : AppCompatActivity(),
    OnInfoWindowClickListener,
    OnMapReadyCallback {
    override fun onMapReady(googleMap: GoogleMap) {
        // Add markers to the map and do other map setup.
        // ...
        // Set a listener for info window events.
        googleMap.setOnInfoWindowClickListener(this)
    }

    override fun onInfoWindowClick(marker: Marker) {
        Toast.makeText(
            this, "Info window clicked",
            Toast.LENGTH_SHORT
        ).show()
    }
}

Java


class InfoWindowActivity extends AppCompatActivity implements
    GoogleMap.OnInfoWindowClickListener,
    OnMapReadyCallback {

    @Override
    public void onMapReady(GoogleMap googleMap) {
        // Add markers to the map and do other map setup.
        // ...
        // Set a listener for info window events.
        googleMap.setOnInfoWindowClickListener(this);
    }

    @Override
    public void onInfoWindowClick(Marker marker) {
        Toast.makeText(this, "Info window clicked",
            Toast.LENGTH_SHORT).show();
    }
}

同様に、OnInfoWindowLongClickListener を使用して長押しクリックイベントをリッスンすることもできます。これは GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener) を呼び出して設定します。このリスナーは、クリックリスナーと同様に動作し、長押しクリックイベントが発生すると onInfoWindowClose(Marker) コールバックで通知されます。

情報ウィンドウが閉じたときに通知されるようにするには、OnInfoWindowCloseListener を使用します。これは GoogleMap.setOnInfoWindowCloseListener(OnInfoWindowCloseListener) を呼び出して設定します。これにより、onInfoWindowClose(Marker) コールバックが届くようになります。

情報ウィンドウの更新に関する注意: すでに情報ウィンドウが開かれているマーカーをユーザーがタップして情報ウィンドウを更新した場合は、onInfoWindowClose() イベントが発生します。ただし、開かれている情報ウィンドウで Marker.showInfoWindow() をプログラマティックに呼び出した場合、onInfoWindowClose() イベントは発生しません。後者は、情報ウィンドウを一度閉じてから再度開く場合を想定しているためです。

前のセクションで説明したように、情報ウィンドウはライブビューではありません。代わりに、ビューは地図に画像としてレンダリングされます。そのため、ビューにリスナーを設定しても無視され、ビューのどこでクリックイベントが発生したかを区別することはできません。カスタム情報ウィンドウ内には、インタラクティブなコンポーネント（ボタン、チェックボックス、テキスト入力など）を配置しないようにしてください。