Leafletでピンをクリックするとポップアップが表示されるようにしてみよう

更新日：2025-10-22

Leafletで任意の地点でピン(マーカー)を立ててみようで地図上にピンを立てましたが、今回は更にピンをクリックすると任意の文字列をポップアップで表示できるようにしてみよう。

今回の内容はhttps://github.com/inunosinsi/Leaflet_OpenStreetMap_Sample/blob/main/2.htmlの内容を改修していきます。

地図上にピンを立てるコードは

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

になりまして、このコードを、

let marker = L.marker([lat, lng]).addTo(map);
// ポップアップした時に表示する文字列の登録
marker.bindPopup("Welcome to Kyoto Gyoen!");
//ピン(マーカー)をクリックした時に実行するイベントを登録
marker.on("click", marker.openPopup);

※openPopupはポップアップを開く為のメソッド

Leaflet API reference#Marker

のように変更します。

ファイルを変更後にブラウザ上で実行して、地図とピンが出力された後にピンをクリックしてみて、冒頭のキャプチャのようにポップアップが表示されることを確認しましょう。

ポップアップを表示できるように変更したコードは下記のURLになります。

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

追記

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

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