人生のヒント

私が経験したことが、誰かの人生のヒントになればと願い書きます。

Ruby On RailsでGoogle マップを表示させる

スポンサーリンク

f:id:hinthint:20160910213409p:plain

今回は、Ruby On RailsでGemを使わずにGoogle マップを表示させたいと思います。

 

今回の実装では、Google マップを表示させるために、Google Maps JavaScript APIを使います。

APIの使い方は下記サイトにありますが、今回は基本的なことだけできるようにします。

https://developers.google.com/maps/?hl=ja

 

Google Maps JavaScript APIは、ブログ執筆時点では、基本的には無料ですが、アクセス数が1日25,000を超えると有料プランに変更する必要がありますので、念頭において使用してください。

 

1.APIキーの取得

Google Maps JavaScript APIを使うためにはAPIキーが必要です。

下記URLにGoogleアカウントでログインして次の手順でAPIキーを取得してください。Googleアカウントを取得されていない場合は、予め取得してください。

https://console.developers.google.com/?hl=ja

[手順]

①[認証情報]-[認証情報を作成]-[APIキー]をクリックします。

f:id:hinthint:20160910154723p:plain

 

こんな感じでAPIキーが出来ます。右側にキーと書かれている文字列があると思いますが、この文字列がAPIキーです。

f:id:hinthint:20160910154948p:plain

 

この状態では、他のユーザにもキーが使えてしまうため、キーの制限をかけましょう。

私は、「HTTP リファラー(ウェブサイト)」にて、自分のWebサイトからのアクセスのみ許可する設定をしています。

 

 

2.Google マップ設定

rootでログインします。

# su - rails

$ cd work/foo

$ vi app/views/users/index.html.erb

 

app/views/users/index.html.erbファイルを以下のように書き直します。

<p id="notice"><%= notice %></p>

<h1>Listing Users</h1>

  <style type="text/css">
    #map { height: 400px;
   margin-left:auto;    /* 左側マージンを自動的に空ける */
   margin-right:auto;   /* 右側マージンを自動的に空ける */
   text-align:left;     /* 中身を左側表示に戻す */
   width: 80%;}
  </style>
  <div id="map"></div>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @users.each do |user| %>
      <tr>
        <td><%= user.name %></td>
        <td><%= user.email %></td>
        <td><%= link_to 'Show', user %></td>
        <td><%= link_to 'Edit', edit_user_path(user) %></td>
        <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New User', new_user_path %>

 

<script type="text/javascript">
function initMap() {

  var test ={lat: <%= @latitude %>, lng: <%= @longitude %>};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: test
  });
  var transitLayer = new google.maps.TransitLayer();
  transitLayer.setMap(map);

  var contentString = '住所:<%= @address %>';
  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

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

  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}
 </script>
 <script async defer
   src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=[1.で取得したAPIキー]&callback=initMap">
 </script>

 

以下コマンドを実行します。

$ vi app/controllers/users_controller.rb

app/controllers/users_controller.rbファイルの「def index~end」間に以下のように記述する。

例では東京タワーの場所を分かるようにします。

@latitude = '35.6585805'

@longitude = '139.7454329'

@address = ''

 変数を使っているということは、DBにデータを格納しても使えるということを指します。

今回はやりませんが、私はActiveRecordから変数に格納して使ってます。

 

最後に、以下コマンドを実行します。

$ /etc/init.d/unicorn restart

 

Webブラウザでhttp://FQDN/userにアクセスして、以下のような地図が表示されたら完了です。

 

f:id:hinthint:20160910213604p:plain

 

3.まとめ

今回紹介した私のやり方ではなくて、geocoderというGemを使うやり方がRuby On Railsの主流みたいです。

比較してみるのも良いと思います。

http://qiita.com/jacoyutorius/items/a107ff6c93529b6b393e

http://blog.mogya.com/2013/10/ruby-geocoder.html

 

私がそちらを選択しなかった理由は、作ったアプリで場所名から緯度・経度を検索した時に想定している場所を割り出せる確率が低かったため、今回のようにGemを利用しませんでした。

上記URLの例はメジャーな場所を検索しているのですが、私のアプリのようにマニアックな場所を使おうとすると精度が低かったです。

今の時点では、自分でGoogleマップを検索して緯度・経度を確認するのが一番早いというのが私の感触です。

 

 

また、Google マップAPIは、たくさんの機能がありますので、有効活用してみてください。