タグ: GoogleMap

GoogleMapを使うと写真をマップ上で共有することができる。この仕組みを使うと様々な地図を手軽に作成できる。例えば、防災情報などを集めておくと「近所の災害マップ」を作れる。地域で共有すれば避難経路などを話し合うのに役立つかもしれない。もちろん、旅行の記録を保存したり、ラーメン屋マップを作る事もできるだろう。

最低限必要なものはGPS機能のついたスマホと作業ができるパソコンだ。プログラムが必要のない方法もあるが、JavaScriptとPHPの簡単な知識があればより高機能な地図を作る事もできるだろう。

まず、iPadやiPhotoなどのスマートフォンを使って近所の危険箇所の写真を撮影する。すると、自動的にGeocodeという位置情報が記録されている。ガラケーの場合、写真を撮影したら手動でGPSデータを付加する必要がある。こうした位置情報をGeoコードとかGeoタグと呼ぶ。

最も簡単な方法：Picasa Webを使う

まず、Googleのアカウントを作る。次にPicasa Webに行きGoogleアカウントでログインする。次に右上にある歯車マークにマウスを合わせ[設定]を選択する。設定では[場所]にある二つのチェックボックスを選択しておく。すると写真についている位置情報がサービスに反映されるようになる。これを忘れるとPicasaにアップロードしたデータには位置情報が付加されず、手動で付け直さなければならなくなる。

iPhoneを持っている場合、Google+アプリをダウンロードし[設定]から[インスタントアップロード]をONにする。すると全ての写真がPicasa WebとGoogle Photoにアップロードされる。一度パソコンに取り込んでからアップロードすることもできる。PicasaではGPS機能のないデジカメで撮影した写真にも位置情報を追加することができる。

Google+からアップロードした写真は「インスタントアップロード」という場所に保存されるので、アルバムを作り、何か名前をつけて保存する。パソコンから保存した写真はアルバムを作って管理しておく。写真には簡単な説明を付けることができる。写真の下にある[説明を追加]を選ぶと説明を付けることができる。

Picasa Webでアルバムを選択する。右端の[このアルバムへのリンク]に[メールやIMにリンクを貼り付け]という項目があるので、そこにあるURLをコピーする。マップを見るためには[マップを表示]をクリックする。

 

少し複雑な方法：KMLを使う

KMLはいくつかの方法で作る事ができる。Picasa Webの場合[Google Eearthで表示]をクリックするとKMLをダウンロードできる。これをGoogle Mapに持ち込みマイマップに読み込ませるとオリジナルの地図が作成される。

KMLは簡単なフォーマットなので手描き（あるいはプログラミングで自動的に作成）することもできる。Twitterの呟きにもGeoコードが付加されているものがあるので、GoogleMapに持ち込んで読み込ませることが可能だ。

最も複雑な方法：プログラミングする

GoogleMapAPIを使って地図を作成する。GoogleMapAPIを使うためにはAPIキーを取得する必要がある。APIキーは全てのGoogleサービスで共通。プロジェクトを作ってから必要なサービス（この場合はGoogleMap）を起動する仕組みになっている。

GoogleMapAPIのチュートリアルから適当なコードを拾って最初のマップを作る。Google検索すればチュートリアルがいくつも見つかるが、古いもの（verrsion 2）のコードが多く出回っており、使えない可能性がある。

写真にはEXIFと呼ばれる標準化されたフォーマットがあり、位置データも保存されている。

PHPを使い、写真から位置データを抜き出す。$exif = @exif_read_data( $img );というコードで簡単に抜き出せるが、ここから先が意外と大変だ。場所データが特殊な形をしており、そのままでは地図に使えない。10進法のデータを60進法に編集する必要がある。$data = convert_float( $gps[0] ) + ( convert_float($gps[1])/60 ) + ( convert_float($gps[2])/3600 ) ;というコードを書いてくれている人がいたので、それをそのまま使わせてもらった。南緯と西経はマイナスデータに置き換える必要があるらしい。return ( $ref==’S’ || $ref==’W’ ) ? ( $data * -1 ) : $data ;という式を使うそうだ。

写真からGeoコードを抜き出したら、これを使って地図のセンターポジションを設定する。例えばこんな感じ。

function initialize() {
var place = new google.maps.LatLng($lat,$lng);
var myOptions = {
zoom: 15,
center: place,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);

複数写真がある場合はそれぞれのGeoコードデータを読み込んだ上で次のように設定することができる。

<img style=”cursor: pointer;” src=”$img” alt=”” />

Googleのチュートリアルにはサーチボックスを使って住所からGeoコードを抽出するためのコードが掲載されている。これを使って、Geoコードを調べるミニアプリを作る事もできる。Geoコードを自動で集めてデータベースに収集するのは規約違反らしいので注意する必要がある。