Leafletで任意の地点でピン(マーカー)を立ててみよう

更新日：2025-10-20

LeafletでOpenStreetMapの地図を出力してみようで出力しました地図にピン(マーカー)を立ててみます。

前に作成したscriptタグ内のコードの末尾に

L.marker([lat, lng]).addTo(map);

を追加するだけで良いです。

下記URLのコードが上記の行を追加したコードになります。

https://github.com/inunosinsi/Leaflet_OpenStreetMap_Sample/blob/main/2.html

上記の行を追加した後に、ファイルをクリックしてブラウザ上でコードを実行してみますと、冒頭のキャプチャのようになります。

もし、中心の地点と異なる地点にピンを立てたい場合は、

L.marker([35.02169, 135.76544]).addTo(map);

のように直接指定すれば良いです。

ピンの位置を変更したコードは下記のURLになります。

https://github.com/inunosinsi/Leaflet_OpenStreetMap_Sample/blob/main/3.html

追記

inunosinsiというアカウントで、オープンストリートマップに参加しています。

https://www.openstreetmap.org/user/inunosinsi