AIRBNBのようにGOOGLEMAPをWEBに追加

5918 ワード
geocoder JavaScript Rails jQuery JavaScript テキストリンク

追加背景

今自分で習いながらAIRBNBのような民泊シェアリングエコノミーサイトを作っているので、その中でもGOOGLEMAPの位置表示機能を追加する手順をシェアできればかと思います。今回は部屋の掲載ページに載せるので主にROOM関連のファイルで編集していきます。

GEM追加

Gemfile.
gem 'geocoder', '~> 1.4'

bundle install

DB migration

rails g migration AddFieldsToRoom latitude:float longitude: float (掲載した部屋のページに表示したいのでこの場合ROOMのDBに追加)
rails db: migrate

rooms table

Column Type Options
home_type string null: false
room_type string null: false
accommodate integer null: false
bed_room integer null: false
bath_room integer null: false
listing_name string null: false
summary text null: false
address text null: false
is_tv boolean null: false
is_kitchen boolean null: false
is_aircon boolean null: false
is_heating boolean null: false
is_internet boolean null: false
price integer null: false
active boolean null: false
latitude float null: false
longitude float null: false
user references foreign_key: true

Association

  • belongs_to: user
  • has_many: photos

Roomモデルファイル編集

room.rb
  geocoded_by :address
  after_validation :geocode, if: :address_changed?

ROOMのDBのADDRESSから位置付けをする。あとはアドレスがアップデートされる度にGEOCODEがVALIDATIONをかけ、位置経緯を自動的に決める。

Roomビューファイル編集

rooms/show.html.rb
    <!-- GOOGLE MAP -->
    <div class="row">

      <div id="map" style="width: 100%; height: 400px"></div>

      <script src="https://maps.googleapis.com/maps/api/js"></script>
      <script>
          function initialize() {
            var location = {lat: <%= @room.latitude %>, lng: <%= @room.longitude %>};
            var map = new google.maps.Map(document.getElementById('map'), {
              center: location,
              zoom: 14
            });

            var marker = new google.maps.Marker({
              position: location,
              map: map
            });

            var infoWindow = new google.maps.InfoWindow({
              content: '<div id="content"><%= image_tag @room.cover_photo(:medium) %></div>'
            });
            infoWindow.open(map, marker);
          }

          google.maps.event.addDomListener(window, 'load', initialize);
      </script>

最後の一行はGOOGLEMAP APIのマップ生成を行うためのJquery
https://techacademy.jp/magazine/5638#sec2　（DOMについて忘れたかけてるのでもう一度復習）

Markerはマップ上にピンマークされるように指定。
infowindowでは部屋のカバー写真をマップ上に表示させる

これでマップは表示されるはず。（下の図を参照、場所は適当にマレーシアにしてます笑）

DBではちゃんと経緯を生成されている！

そして。。。表示成功！勉強しながらやっていますが、レベルアップしたような達成感はあります。（ズームアウトすると訳のわからん熱帯雨林みたいなところにある、ちょうど写真には合うけど笑）