Leafletでピンをクリックすると任意のサイトに移動するようにしてみよう

更新日：2025-10-22

Leafletでピンをクリックするとポップアップが表示されるようにしてみようで地図上に立てたピンをクリックしたら、任意の文字列をポップアップ出来るようにしましたが、今回はピンをクリックしたら指定したサイトへ移動するようにしてみましょう。

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

地図上に立てたピンをクリックして、任意の文字列をポップアップするコードは

let marker = L.marker([lat, lng]).addTo(map);
marker.bindPopup("Welcome to Kyoto Gyoen!");
marker.on("click", marker.openPopup);

を

let marker = L.marker([lat, lng]).addTo(map);
marker.on("click", function(){
	location.href = "https://www.openstreetmap.org/#map=17/"+lat+"/"+lng;
});

に変更してみます。

marker.onのメソッドの第二引数に無名関数を指定して、その関数内でJavaScriptの標準機能のlocation.hrefで、任意のサイトのURLを代入することでサイトの移動を行うようにしています。

ピンをクリックしたら他サイトに移動するコードは下記のURLになります。

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

追記

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

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