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

仕様

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

処理の流れ

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

GPS情報取得のため、ruby-exif.rbを作成

2008-08-26
GPSデータの読めるruby-exif.rb - httyのメモ(2007-10-07)
GPS_TAG[0x0002] = "GPSLatitude"
GPS_TAG[0x0004] = "GPSLongitude"
から経度と緯度を持ってくる。

撮影した写真の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のキーを取得

FAQ | Google Maps APIs | 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>