Rail4でGoogle Place APIを利用した位置情報検索サービスの作成

psql --username=postgres

create user google_place_sample with createdb password 'google_place_sample';

rails new google_place_sample --database=postgresql
cd google_place_sample
bin/spring stop

# See https://github.com/sstephenson/execjs#readme for more supported runtimes
gem 'therubyracer',  platforms: :ruby

bundle install

default: &default
  adapter: postgresql
  encoding: unicode
  pool: 5

development:
  <<: *default
  database: google_place_sample_development
  user: google_place_sample
  password: google_place_sample

test:
  <<: *default
  database: google_place_sample_test
  user: google_place_sample
  password: google_place_sample

production:
  <<: *default
  database: google_place_sample_production
  username: google_place_sample
  password: <%= ENV['GOOGLE_PLACE_SAMPLE_DATABASE_PASSWORD'] %>

# Install Twitter Bootstrap3
# https://github.com/twbs/bootstrap-sass
gem 'bootstrap-sass', '~> 3.2.0'

# -webkit-border-radius みたいなブラウザベンダープレフィックスをよしなに管理してくれる
# Parse CSS and add vendor prefixes to rules by Can I Use
# https://twitter.com/autoprefixer
gem 'autoprefixer-rails'

bundle install

rm app/assets/stylesheets/application.css

@import "bootstrap-sprockets";
@import "bootstrap";

//= require bootstrap-sprockets

  <%= stylesheet_link_tag    "bootstrap", media: "all", "data-turbolinks-track" => true %>
  <meta content="width=device-width, initial-scale=1" name="viewport">

  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">Project name</a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="/">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
        <form class="navbar-form navbar-left">
          <input type="text" class="form-control col-lg-8" placeholder="Search">
        </form>
      </div><!--/.nav-collapse -->
    </div><!-- /.container -->
  </div><!-- /.navbar -->

body {
  padding-top: 70px;
  padding-bottom: 30px;
}

.theme-dropdown .dropdown-menu {
  position: static;
  display: block;
  margin-bottom: 20px;
}

.theme-showcase > p > .btn {
  margin: 5px 0;
}

.theme-showcase .navbar .container {
  width: auto;
}

@import "theme-style";

  <div class="container theme-showcase" role="main">
    <!-- Main jumbotron -->
    <div class="jumbotron">
      <h1>Hello, world!</h1>
      <p class="text-warning">bootstrap3-sample</p>
    </div><!-- /.jumbotron -->

    <%= yield %>

  </div><!-- /.container -->

  <% if (notice) %>
    <div class="alert alert-info alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert">
        <span aria-hidden="true">&times;</span>
        <span class="sr-only">閉じる</span>
      </button>
      <strong><%= notice %></strong>
    </div>
  <% end %>

# A Ruby wrapper around the Google Places API
# https://github.com/marceldegraaf/google_places
gem 'google_places'

bundle install

bundle exec rails g controller place index list show

class PlaceController < ApplicationController
  before_action :set_place, only: [:show, :destroy]

  def index
    @places = Place.all
  end

  def show
  end

  def list
    keyword = params[:search]
    @client = GooglePlaces::Client.new( ENV['GOOGLE_API_KEY'] )
    @places = @client.spots_by_query( keyword )
  end

  def create
    @place = Place.new(place_params)

    respond_to do |format|
      if @place.save
        format.html { redirect_to place_index_path, notice: "#{@place.name} の位置情報を保存しました" }
      else
        format.html { render :index, notice: "#{@place.name} の位置情報を保存できませんでした" }
      end
    end
  end

  def destroy
    @place.destroy

    respond_to do |format|
      format.html { redirect_to place_index_path, notice: "#{@place.name} の位置情報を削除しました" }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_place
      @place = Place.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def place_params
      params.require(:place).permit(:name, :latitude, :longitude, :address)
    end

end

<h1>位置情報を検索してみよう</h1>

<div class="col-md-6">
  <%= form_tag place_list_path, :role =>"form", :method => :get do %>
    <div class="form-group">
      <%= text_field_tag :search, params[:search], { :class => "form-control", :required => true, } %>
      <%= button_tag( {:type => "submit", :name => nil, :class => "btn btn-default" } ) do %>
        <span class="glyphicon glyphicon-search">キーワード検索</span>
      <% end %>
    </div>
  <% end %>
</div>

<div class="col-md-12">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Latitude</th>
        <th>Longitude</th>
        <th>Address</th>
        <th colspan="2"></th>
      </tr>
    </thead>

    <tbody>
      <% @places.each do |place| %>
        <tr>
          <td><%= place.name %></td>
          <td><%= place.latitude %></td>
          <td><%= place.longitude %></td>
          <td><%= place.address %></td>
          <td><%= link_to ( place ), :title => "show" do %>
            <span class="glyphicon glyphicon-stats"></span>
          <% end %></td>
          <td><%= link_to( place, method: :delete, data: { confirm: "#{place.name} の位置情報を削除します" }, :title => "delete" ) do %>
            <span class="glyphicon glyphicon-trash"></span>
          <% end %></td>
        </tr>
      <% end %>
    </tbody>
  </table>
</div>

<h1>希望の場所は見つかったかな?</h1>

<div class="col-md-12">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Latitude</th>
        <th>Longitude</th>
        <th>Address</th>
        <th></th>
      </tr>
    </thead>

    <tbody>
      <% @places.each do |place| %>
        <tr>
          <td><%= place.name %></td>
          <td><%= place.lat %></td>
          <td><%= place.lng %></td>
          <td><%= place.formatted_address %></td>
          <td><%= link_to( '登録', place_index_path( :place => { :name      => place.name,
                                                                 :latitude  => place.lat,
                                                                 :longitude => place.lng,
                                                                 :address   => place.formatted_address, } ),:method => 'post' ) %>
          </td>
        </tr>
      <% end %>
    </tbody>
  </table>

  <button type="button" class="btn pull-right btn-lg btn-default">
    <%= link_to 'Back', place_index_path %>
  </button>

</div>

<div class="col-md-12">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Latitude</th>
        <th>Longitude</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><%= @place.name %></td>
        <td><%= @place.latitude %></td>
        <td><%= @place.longitude %></td>
        <td><%= @place.address %></td>
      </tr>
    </tbody>
  </table>

  <button type="button" class="btn pull-right btn-lg btn-default">
    <%= link_to 'Back', place_index_path %>
  </button>

</div>

bundle exec rails g model place name:string address:string latitude:float longitude:float

bundle exec rake db:create
bundle exec rake db:migrate

Rails.application.routes.draw do
  root 'place#index'

  namespace :place do
    # get 'place/list' request
    get 'list'
  end

  resources :place, :only => [ :index, :show, :create, :destroy ]
end

# Enables easy Google map + overlays creation in Ruby apps 
# https://github.com/apneadiving/Google-Maps-for-Rails
# http://apneadiving.github.io/
gem 'gmaps4rails'

bundle install

  <script src="//maps.google.com/maps/api/js?v=3.13&amp;sensor=false&amp;libraries=geometry" type="text/javascript"></script>
  <script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>

//= require underscore
//= require gmaps/google

.map_container {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}

.map_container .map_canvas {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

@import "gmap4rails";

  def show
    @hash = Gmaps4rails.build_markers(@place) do |place,marker|
      marker.lat place.latitude
      marker.lng place.longitude
      marker.json({title: place.name})
    end
  end

  <div class="map_container">
    <div id="map" class="map_canvas"></div>
  </div>


  <script type="text/javascript">
    handler = Gmaps.build('Google');
    handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
      markers = handler.addMarkers(<%=raw @hash.to_json %>);
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
      handler.getMap().setZoom(12);
      handler.map.centerOn(marker);
    });
  </script>