ハウツー クリックでポップアップを出すには
マーカーをクリックしたときに情報をポップアップで表示します。
コード
Marker を置き、クリックイベントで InfoWindow を開きます。
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));InfoWindow：contentに HTML を渡して作り、open(map, marker)でマーカーの位置に開きます。引数はこの順番の2つ（地図、アンカー）です。- マーカーを複数作って、それぞれにリスナーを付ければ、複数の点で個別のポップアップが出せます。
Marker コンポーネントの子要素が、そのままポップアップの内容になります。
import "maplibre-gl/dist/maplibre-gl.css";
import "@geolonia/maps-core/css";
import { createRoot } from "react-dom/client";
import { Map, Marker } from "@geolonia/maps-react";
createRoot(document.getElementById("root")).render(
<Map
apiKey="YOUR-API-KEY"
center={[139.767125, 35.681236]}
zoom={15}
containerStyle={{ width: "100%", height: "100vh" }}
>
<Marker lat={35.681236} lng={139.767125} color="#e4402f">
<strong>東京駅</strong>
<p style={{ margin: 0 }}>JR・地下鉄各線</p>
</Marker>
</Map>,
);lat/lng：マーカーを立てる場所。個別の props で渡します（Mapのcenterは[経度, 緯度]の配列なので混同に注意）。- 子要素：クリックしたときに開くポップアップの中身。JSX なので React コンポーネントも書けます。
- embed と違い、
Markerを複数並べてそれぞれにポップアップを付けられます（マーカーを複数置くにはを参照）。
結果
上のコードは、それぞれのタブの下でそのまま動いています。マーカーをクリックするとポップアップが開きます。
うまくいかないとき
- マーカーが出ない →
data-marker="off"が付いていないか確認。ポップアップを使うときはマーカーが必要です。 - ポップアップが空 →
divの子要素が空になっていないか確認。空白文字だけではポップアップは開きません。 - クリックしても何も出ない →
divタグの閉じ忘れに注意。<div class="geolonia" ...>内容</div>と正しく閉じてください。