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
-, , ,

執筆者:

関連記事

no image

Rails3.2からBackbone.jsとD3.jsを使う一例

目次1 Backbone.jsからD3.jsを使う2 RailsのネストしたURLでBackboneを使う Backbone.jsからD3.jsを使う d3.jsで力指向グラフを使って遊ぶ2のクラス構 …

Rails3.2でTwitterBootstrap導入のあれこれ

  目次1 sass-rails-bootstrap導入2 Layout関係3 Notification4 confirmをmodalにする5 SimpleForm導入6 kaminari導 …

TwitterBootstrapでアイコンが微妙な感じだったらFontAwesomeを試してみるといい

かもしれない fortawesome.github.com/Font-Awesome/ hallojsで使ってるのは上 github.com/bokmann/font-awesome-rails gi …

Backbone.jsで関連するモデルのREADとCREATE

By: woodleywonderworks – CC BY 2.0   ThoughtBotの本を読み進めてるけど私には買ってよかったと感じている ゾンビviewのワナを回避す …

no image

RubyからHyper Estraierを使う1~search_do

環境:Ruby 1.9.3 & Rails 3.2.7 参考リンク github.com/grosser/search_do Getting started with acts_as_sear …