ハウツー マーカーを複数置くには
複数の地点をまとめて地図に出します。1点だけなら中心マーカーで十分ですが、2点以上は「一覧データ＋ループ」で考えます。座標は [経度, 緯度] の順で持ちます。
コード
一覧をループして Marker を作るだけです。
import "maplibre-gl/dist/maplibre-gl.css";
import "@geolonia/maps-core/css";
import { geolonia } from "@geolonia/maps-suite";
const points = [
{ name: "東京駅", lng: 139.767125, lat: 35.681236 },
{ name: "新宿駅", lng: 139.700258, lat: 35.690921 },
{ name: "渋谷駅", lng: 139.701636, lat: 35.658034 },
{ name: "浅草寺", lng: 139.796747, lat: 35.714765 },
{ name: "東京タワー", lng: 139.745438, lat: 35.658581 },
];
const map = new geolonia.maps.Map(document.getElementById("map"), {
apiKey: "YOUR-API-KEY",
center: { lat: 35.68, lng: 139.75 },
zoom: 11,
});
for (const p of points) {
new geolonia.maps.Marker({
position: { lat: p.lat, lng: p.lng },
map,
title: p.name,
});
}Marker({ position, map, title })：mapを渡すと、その場でマーカーが地図に取り付けられます。- クリックでポップアップを出したい場合は、ループ内で
InfoWindowとクリックリスナーを組み合わせます（→ クリックでポップアップを出すには）。
Marker はただの React コンポーネントなので、一覧を map() で展開するだけです。
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";
const points = [
{ name: "東京駅", lng: 139.767125, lat: 35.681236 },
{ name: "新宿駅", lng: 139.700258, lat: 35.690921 },
{ name: "渋谷駅", lng: 139.701636, lat: 35.658034 },
{ name: "浅草寺", lng: 139.796747, lat: 35.714765 },
{ name: "東京タワー", lng: 139.745438, lat: 35.658581 },
];
createRoot(document.getElementById("root")).render(
<Map
apiKey="YOUR-API-KEY"
center={[139.75, 35.68]}
zoom={11}
containerStyle={{ width: "100%", height: "100vh" }}
>
{points.map((p) => (
<Marker key={p.name} lat={p.lat} lng={p.lng}>
{p.name}
</Marker>
))}
</Map>,
);lat/lng：マーカーの場所は個別の props で渡します。- 子要素：各マーカーをクリックしたときのポップアップになります。
key：配列から作るときは忘れずに（ふつうの React のルールです）。
結果
上のコードは、それぞれのタブの下でそのまま動いています。一覧に入れた地点すべてにマーカーが立ちます。クリックするとそれぞれの名前がポップアップで開きます。
うまくいかないとき
- ピンが海に出る → 経度と緯度の取り違え。一覧の
lng/latを確認してください。 - 数百点あって重い、団子になる → マーカーではなくクラスタリングを使います（→ 大量の点をクラスタリングするには）。