Javascriptで取得した変数をRails経由でDBに格納する

やってみれば全然大した作業ではなかったんですけど、
他にあんまりドキュメントが無かったので迷い子がいるんじゃないかと思いログを残しておきます。

｜環境
CentOS6.4
Rails 3.2.13
ruby 1.9.3
MariaDB 5.5.32

｜やりたいこと
Google Maps V3を用いて取得したデータをrails経由でDBに格納。
フォームのpost経由で格納します。

｜実装内容
まずはAPI側ですが、こちらは日本語リファレンスがかなり充実してるので
以下あたりを参考にどうぞ

https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja
http://www.ajaxtower.jp/googlemaps/
http://dotinstall.com/lessons/basic_google_maps

自分が実装したコードはこちら
<script type="text/javascript">

<!--

var map;

function initialize(){

var latlng = new google.maps.LatLng(35.658704, 139.745408);

var opts = {

zoom: 15,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

map = new google.maps.Map(document.getElementById("map_canvas"), opts);

//現在位置取得

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(function(position) {

map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));

}, function() {

alert('エラーです。現在地を取得できません');

}

);

} else {

alert('この端末はサポート外です。');

}

//第２引数にドラッグを指定。クリックも可能。

google.maps.event.addListener(map, 'drag', dispLatLng);

}

//中心の座標を取得

function dispLatLng(){

var latlng = map.getCenter();

//画面上に出力

var str = "[CENTER]=[" + latlng.lat() + "," + latlng.lng() + "]<br />";

document.getElementById("latlng").innerHTML = str;

document.getElementById('フォームに渡す変数').value = latlng.lat();

document.getElementById('フォームに渡す変数').value = latlng.lng();

}

//オンロード処理。ここはもっと良い方法があるかも

window.onload = initialize;



// -->

</script>



次に、フォームの設定。

railsを使うので、任意のviewに以下を追記

view/_form.html.erb

<div id="map_canvas" style="width:500px; height:300px"></div>

<p id="latlng" style="font-size:10px;"></p>

<%= f.hidden_field :lat, :value => :lat %>

<%= f.hidden_field :lng, :value => :lng %>



レンダリング後はこんな感じになります。

<div id="map_canvas" style="width:500px; height:300px"></div>

<p id="latlng" style="font-size:10px;"></p>

<input id="テーブル名_lat" name="テーブル名[lat]" type="hidden" value="lat" />

<input id="テーブル名_lng" name="テーブル名[lng]" type="hidden" value="lng" />

ここで、JS側の'フォームに渡す変数'を、inputのidと同一にすればOKです。