写真から位置を取得して地図に表示する方法

この違いわかる?

Exifデータを使って撮影位置を地図で可視化するイメージ図

2025.11.26

はじめに

スマートフォンやデジタルカメラで撮影された写真には、多くの場合「Exif（Exchangeable image file format）」という付加情報が含まれています。撮影日時、カメラの設定、そしてGPSによる位置情報など、その瞬間を裏付けるメタデータです。

とりわけGPS情報は、撮影場所を地図上で可視化するうえで非常に有用です。本記事では、Exifから緯度経度を取得し、地図ライブラリ「Leaflet」を使って写真の撮影場所を地図上に表示する方法を、実際のコードとともに解説します。

Exifデータを扱うことで、観光記録、調査報告、防災記録などさまざまな応用が可能になります。

対比：写真は記録か、それとも記憶か

これまで写真は、目に見える「記録」としてだけでなく、「思い出」としての記憶の装置として扱われてきました。しかしExifデータを活用すれば、写真は単なる静的な記録ではなく、「空間」に根差した動的なデータとなります。

例えば、同じ風景の写真でも、撮影された正確な場所（緯度34.6895、経度135.1953）が取得できれば、被写体の位置関係、方角、距離の分析が可能です。それは、記憶の曖昧さを補完し、現地検証や空間分析への橋渡しにもなります。

技術の進歩と背景：Exif × Leaflet の連携

では、ExifのGPS情報を読み取って、地図に表示する仕組みを見ていきましょう。今回使用する技術要素は以下の通りです。

Exif情報取得ライブラリ：exif-js
JavaScriptでExifメタデータを読み取るための軽量ライブラリです。
地図ライブラリ：Leaflet.js
OpenStreetMapなどを表示するためのオープンソース地図表示ライブラリです。

これらを組み合わせることで、ブラウザだけで画像ファイルから位置情報を抽出し、地図にプロットするWebアプリを構築できます。

実装例：画像から位置情報を読み取り地図に表示

以下に、実際に動作するHTML＋JavaScriptのコードを示します。このコードをローカルで .html ファイルとして保存し、ブラウザで開けば動作します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>Exif位置表示</title>

  <!-- Leaflet地図用のスタイルを読み込み -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

  <style>
    #map {
      height: 400px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h2>写真から位置を取得して地図に表示</h2>

  <!-- 画像ファイルを選択する入力欄 -->
  <input type="file" id="fileInput" accept="image/*" />

  <!-- 地図を表示するエリア -->
  <div id="map"></div>

  <!-- Exif情報を読み取るライブラリ -->
  <script src="https://unpkg.com/exif-js"></script>
  <!-- 地図を表示するLeafletライブラリ -->
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

  <script>
    // 地図の情報を保持する変数（後で再表示のために使います）
    let map = null;

    // ExifのGPS情報（度分秒）を小数点付きの緯度・経度に変換する関数
    function toDecimal(coord, ref) {
      const d = coord[0].numerator / coord[0].denominator; // 度
      const m = coord[1].numerator / coord[1].denominator; // 分
      const s = coord[2].numerator / coord[2].denominator; // 秒

      // 度に変換
      let dec = d + m / 60 + s / 3600;

      // 南緯・西経はマイナスに
      if (ref === "S" || ref === "W") dec = -dec;

      return dec;
    }

    // ファイルが選ばれたときに動く処理
    document.getElementById("fileInput").addEventListener("change", function () {
      const file = this.files[0]; // 選ばれた画像ファイル
      if (!file) return; // ファイルがなければ何もしない

      // Exif情報の読み取り
      EXIF.getData(file, function () {
        // GPSの緯度・経度と方角を取得
        const lat = EXIF.getTag(this, "GPSLatitude");
        const lon = EXIF.getTag(this, "GPSLongitude");
        const latRef = EXIF.getTag(this, "GPSLatitudeRef");
        const lonRef = EXIF.getTag(this, "GPSLongitudeRef");

        // 緯度経度情報が存在するか確認
        if (lat && lon && latRef && lonRef) {
          const latitude = toDecimal(lat, latRef);   // 緯度を10進数に変換
          const longitude = toDecimal(lon, lonRef);  // 経度を10進数に変換

          // すでに地図が表示されている場合は削除する
          if (map) {
            map.remove();
          }

          // Leafletで新しい地図を作成し、位置を設定
          map = L.map("map").setView([latitude, longitude], 15);

          // 地図の背景（OpenStreetMap）
          L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
            attribution: '&copy; OpenStreetMap contributors'
          }).addTo(map);

          // 指定位置にピンを立てて、吹き出しも表示
          L.marker([latitude, longitude])
            .addTo(map)
            .bindPopup("撮影場所")
            .openPopup();

        } else {
          // GPS情報が含まれていない場合
          alert("この写真にはGPS情報が含まれていません。");
        }
      });
    });
  </script>
</body>
</html>

このコードでは、Exifに含まれるGPS情報を度分秒形式から10進数に変換する toDecimal() 関数を用いて、Leaflet地図上にピンを表示します。