広告 JavaScript

OpenStreetMapとLeafletで地図にピン(マーカー)を立てる

はじめに

OpenStreetMapとLeafletで地図にピン（マーカー）を立てる方法を紹介します。

地図の表示イメージは以下の通りです。

OpenStreetMapとLeafletで地図にピン（マーカー）を立てる

スポンサーリンク

実装例

<!DOCTYPE html>
<html>
  <head>
    <title>OpenStreetMapとLeafletで地図にピンを立てる</title>
    <meta charset="utf-8">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
    integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
    crossorigin=""></script>
  </head>
  <body>
    <div id="view_map" style="height: 350px;"></div>
    <script type="text/javascript">
    //緯度,経度,ズーム
    var map = L.map('view_map').setView([35.658577, 139.745451], 12);

    // OpenStreetMap から地図画像を読み込む
    L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
    }).addTo(map);
    
    var popup = L.popup();
    L.marker([35.658577, 139.745451]).addTo(map).on('click', function (e) {
      		popup
              .setLatLng(e.latlng)
              .setContent("ポップアップで表示する内容")
              .openOn(map);
    });
  </script>
  </body>
</html>

ソースコードの解説

地図を描写するまでの解説は「OpenStreetMapとLeafletで簡単に地図を表示する方法」で紹介しているので、ここでは省略します。

地図にピン（マーカー）を立てる

地図にピンを立てる時は、ピンを立てる場所（緯度・経度）を指定してmapに追加します。

L.marker([35.658577, 139.745451]).addTo(map)

ピン（マーカー）をクリックしてポップアップ表示する

ピンにonClickイベントを追加することで、ピンをクリックするとポップアップを表示させることができます。setContentにはHTMLタグが書けるので、ポップアップ内に画像を表示させることもできます。

var popup = L.popup();
L.marker([35.658577, 139.745451]).addTo(map).on('click', function (e) {
    popup
      .setLatLng(e.latlng)
      .setContent("<p>東京タワー</p><p>東京都港区芝公園4丁目2-8</p>" + e.latlng.toString())
      .openOn(map);
});

終わりに

本記事では「OpenStreetMapとLeafletで地図にピン(マーカー)を立てる」方法を紹介しました。

次回は「OpenStreetMapとLeafletで複数のマーカを表示する方法」を紹介します。

【関連記事】

helpful