MongoDB Railsで使えるGem

Rails3.2でHTML5で取得した位置情報をMongoDBに保存してGoogleMapsでみる~mongoid、gmaps4rails

投稿日:

前提

Rails3.2でhtml5で取得した位置情報をAjaxで住所表示する~geocoder

Mongoid

Gemfile

bundle

generate

わたしは別の仮想PCのMongoDBを使うので、そのIPアドレスを指定した

model

とりあえず最低限

include Mongoid::Timestampsでタイムスタンプを記録する

controller

この1行をくわえるだけ

データベースからデータが挿入されるか確認する

スケルトンを作る

home/showに今までの記録一覧と地図を表示する

*ちょっと失敗したかも別コントローラーの方がいいかも

index.html.erb

リンクを作って

config/routes.rb

show.html.erb

home_controller

Gmap4railsのインストール

Gemfile

bundle

generate

 model

gmaps4railsは住所などから自動的に位置情報を取得してデータベースに記録してくれる

今回はhtml5から位置情報を取得するのでこの機能はオフにする

読み出す方はデータベースにlatitudeとlongitudeがあればとりあえずグーグルマップは表示されるようだ

とりあえず地図を表示させる

controller

今回は一覧表と地図を出すので

 

view

 

css

Twitter Bootstrapを使っているので

 確認

詳細を見られるようにする

地図を押すとその場所の地図を拡大するようにしたい

いろいろFireBugでいじった結果、Gmaps4railsでは、Gmaps.map.mapを操作すればよさそうだとわかった

ブラウザ上でコンソールを開いて

とかやると地図のズームが変わったり、移動したりするはず

参照

基本的なところはドットインストール

dotinstall.com/lessons/basic_google_maps

をみた

 

あとはjQueryでテーブルをクリックしたら上の操作を実行するようにすればOK

ついでに、クリックした行の色を変えるようにした

これで記録した箇所の詳細がみられるはずだ

-MongoDB, Railsで使えるGem
-, , ,

執筆者:

関連記事

Rails3.2でユーザー管理機能を追加~Devise

By: Mark Strobl – CC BY 2.0 目次1 前回2 generate3 routes.rb4 index.html.erb5 new6 create7 edit8 up …

Rails3.2でJasmineをつかってCoffeeScriptをテスト~jasminerice

    #261 Testing JavaScript with Jasmine (revised)   addyosmani.github.com/backbone-f

TwitterBootstrapとGoogle Code Prittifyでうまくハイライトされないらしい

Rails5でtextareaをコードエディタにする〜Ace Editor

By: Mike Mozart – CC BY 2.0 目次1 Ace Editor2 Gemfile3 application.js4 View5 coffeescript6 できた A …

Rails3でテストカバレッジを計測する~simplecov,thin

    rspecなどのテストでテストがどの程度カバーしているのかを簡単に計測するsinplecovというgemをいれた 目次1 Gemfile & bundle2 spe …