maps-suite

チュートリアル Step 4: イベント処理と情報ウィンドウ

この Step の前提

この Step では、マーカーのクリックに応じて情報ウィンドウを表示します。コード例は Map、Marker、InfoWindow だけで完結する独立した例であり、Step 3 の GeoJSON と色分けは引き継ぎません。

Marker と InfoWindow

maps-suite は、地図上の1点を示す Marker と、吹き出しを表示する InfoWindow の2つのクラスを提供します。マーカーのクリックイベントを受け取り、その中で情報ウィンドウを開きます。

import "maplibre-gl/dist/maplibre-gl.css";
import "@geolonia/maps-core/css";
import { geolonia } from "@geolonia/maps-suite";

const map = new geolonia.maps.Map(document.getElementById("map"), {
  apiKey: "YOUR-API-KEY",
  center: { lat: 35.681236, lng: 139.767125 },
  zoom: 15,
});

const marker = new geolonia.maps.Marker({
  position: { lat: 35.681236, lng: 139.767125 },
  map,
  title: "東京駅",
});

const infoWindow = new geolonia.maps.InfoWindow({
  content: "<strong>東京駅</strong><br>JR・地下鉄各線",
});

marker.addListener("click", () => {
  infoWindow.open(map, marker);
});

各クラスとメソッドの役割は次のとおりです。

Marker：position（{ lat, lng }）と map を渡すと、その座標にマーカーが表示されます。title はホバー時のツールチップです。生成後は marker.setMap(null) で地図から外し、setPosition で座標を変更します。
InfoWindow：content に HTML 文字列または HTML 要素を渡して生成します。生成した時点では表示されません。
marker.addListener("click", ...)：マーカーのクリックを受け取ります。
infoWindow.open(map, marker)：情報ウィンドウを、指定したマーカーの位置に開きます。引数はこの順番の2つ（地図、アンカー）です。

地図のクリックを受け取る

マーカーだけでなく、地図そのもののクリックも受け取れます。クリック位置の座標は e.latLng から取得します。

map.addListener("click", (e) => {
  console.log("クリック位置:", e.latLng.lat(), e.latLng.lng());
});

クリックした場所にマーカーを表示する場合は、このコールバックの中で new geolonia.maps.Marker({ position: e.latLng.toJSON(), map }) を実行します。toJSON() は { lat, lng } 形式のオブジェクトを返します。

動いたか確認する

マーカーをクリックし、content に記述した内容が吹き出しで表示されれば成功です。

うまくいかないとき

マーカーが出ない → Marker のオプションに map を渡しているか確認。map を省略した場合、マーカーは生成されても地図に追加されません。
クリックしても開かない → open(map, marker) の引数の順番を確認。第1引数が地図、第2引数がマーカーです。
吹き出しが空 → content が空文字列になっていないか確認。

次の Step

以上で、イベント処理と情報ウィンドウの実装は完了です。ここまでで、地図の表示、場所の指定、データの表示、色分け、情報ウィンドウという maps-suite の主要な機能を扱いました。最後の Step 5: ビルドと本番公開で、ビルドして本番環境に公開します。