地図検索（Leaflet）

用途

Leaflet（オープンソース）で地図表示 + マーカー + 住所検索。Google Maps代替。

特徴

• OpenStreetMap
• マーカー描画
• 住所→座標変換
• クラスタリング
• ルート表示

コード（コピペ用）

'use client';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

export function MapSearch({ markers }: { markers: { lat: number; lng: number; name: string }[] }) {
  return (
    <MapContainer center={[35.6762, 139.6503]} zoom={11} style={{ height: 500 }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      {markers.map((m, i) => (
        <Marker key={i} position={[m.lat, m.lng]}>
          <Popup>{m.name}</Popup>
        </Marker>
      ))}
    </MapContainer>
  );
}

// 住所 → 座標 (Nominatim API)
export async function geocode(address: string) {
  const r = await fetch(`https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(address)}&format=json&limit=1`);
  const data = await r.json();
  if (!data[0]) return null;
  return { lat: parseFloat(data[0].lat), lng: parseFloat(data[0].lon) };
}

使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

注意事項

• 依存パッケージを忘れず追加