読者です 読者をやめる 読者になる 読者になる

久保清隆のブログ

ライフハック、健康、旅行、ビジネス、広告など、役に立つような情報を書きます。

Rubyで写真のGPS情報を取得、GoogleMapAPIで地図を表示

JavaScript Ruby/Rails

仕様

  1. 携帯で撮影した写真の格納元フォルダから画像データを抽出
  2. 画像データからGPS情報を抽出
  3. GoogleMapAPIを導入
  4. 撮影した場所の地図を表示

処理の流れ

  1. GPS情報取得のため、ruby-exif.rbを作成
  2. 携帯電話でGPS情報を付与した写真を撮影
  3. 撮影した写真のGPS情報から撮影場所の経度、緯度を取得
  4. GoogleMapAPIのキーを取得
  5. JavaScriptでGoogleMapを表示するコードを記述
  6. GoogleMapで撮影場所を表示

撮影した写真のGPS情報から撮影場所の経度、緯度を取得

controllerに記述

  def index
    require 'parsedate'
    require 'fileutils'
    require 'find'
    require 'rubygems'
    require 'ruby-exif'

    @image = Exif.new("画像へのパス")
    @latitude = (@image.info["GPSLatitude"].to_f / 10000)
    @longitude = (@image.info["GPSLongitude"].to_f / 100)
  end

GoogleMapAPIのキーを取得

Sign Up for the Google Maps API - Google Maps API — Google Developers
このサイトで取得できる。

JavaScriptでGoogleMapを表示するコードを記述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;
    key=[APIのキー]" 
    type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        //マップを作成
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(<%="#{@latitude}" %>,
                  <%="#{@longitude}" %>), 13);

        //中心にマーカーを付ける
        var marker = new GMarker(new GLatLng(<%="#{@latitude}" %>,
                                             <%="#{@longitude}" %>));
        map.addOverlay(marker);

        //マーカーをクリックしたら、衛星写真が見える吹出しを表示
        GEvent.addListener(marker, "click", function() {
        map.showMapBlowup(marker.getPoint(), 
        {zoomLevel:17, mapType:G_SATELLITE_MAP});
        });       

        //マップコントローラを付ける
        map.addControl(new GLargeMapControl());

        //マップオーバービューコントローラを付ける
        var miniMap=new GOverviewMapControl(new GSize(200,150));
        map.addControl(miniMap);

        //マップタイプコントローラを追加する
        map.addControl(new GMapTypeControl());

        //スケールコントローラ(尺度定規)を付ける
        map.addControl(new GScaleControl());
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 900px; height: 500px"></div>
    <br />
    <b>緯度: <%= "#{@latitude}" %><br />
       経度: <%= "#{@longitude}" %><br /></b>
  </body>
</html>

GoogleMapで撮影場所を表示


地図を表示できた。

問題点

本当は東京都港区海岸3丁目が表示されるはず。

携帯のマップでは正しい位置が表示されていたので、
ruby-exif.rbファイルに記述されているコードが不適切で、
画像から取得されたGPSによる経度と緯度が携帯のものと異なっている可能性がある。

コードを見たけど、よくわからなかった。
経度が明らかにおかしい。何でだろう。