Function addInfoWindow

InfoWindowを追加する — 詳細な使用例

地図上の任意の緯度経度に HTML コンテンツの情報ウィンドウ（吹き出し）を表示します。 クリックイベントや地図オブジェクトのコールバックから呼び出して、詳細情報を表示するのに適しています。 不要になったら removeInfoWindow で削除してください。

Warning

• removeInfoWindow は追加時と同一インスタンスを渡す必要があります。変数として保持してください。
• 同一インスタンスを複数回 addInfoWindow しても1件として扱われます。

Example: 地図中心にInfoWindowを追加し、表示/非表示を切り替える

import * as GIA from '@ntj/gaia';

const infoWindow = new GIA.object.InfoWindow({
  content: 'Info Window',
  position: map.getCenter(),
});

map.addInfoWindow(infoWindow);
infoWindow.close();
infoWindow.open();
Copy

Example: ボタン付きのInfoWindowを表示する

import * as GIA from '@ntj/gaia';

const content = `
<div style="height:80px">
  <p>Info Window with Button</p>
  <button onclick="alert('Button clicked.')">alert</button>
</div>`;

const infoWindow = new GIA.object.InfoWindow({
  content,
  position: map.getCenter(),
});

infoWindow.addEventListener('click', () => {
  console.log('infowindow clicked');
});

map.addInfoWindow(infoWindow);
Copy

Example: MapIconクリック時にInfoWindowを差し替える

import * as GIA from '@ntj/gaia';

let currentInfoWindow: GIA.object.InfoWindow | undefined;

map.setMapIconClickListener((data) => {
  if (currentInfoWindow) {
    map.removeInfoWindow(currentInfoWindow);
  }

  currentInfoWindow = new GIA.object.InfoWindow({
    position: data.latlng,
    content: `<strong>${data.name ?? '名称不明'}</strong>`,
  });

  map.addInfoWindow(currentInfoWindow);
});

map.addEventListener('click', () => {
  if (!currentInfoWindow) {
    return;
  }
  map.removeInfoWindow(currentInfoWindow);
  currentInfoWindow = undefined;
});
Copy

See

• addInfoWindow
• removeInfoWindow