Rails5でGoogleMapを表示

以外にハマったので備忘録
google mapのapiの仕様が変わって昔の記事を参考にするとダメみたい

googleからAPIキーを取得

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

下記URLにGoogleアカウントでログインして次の手順でAPIキーを取得してください。手順に従うだけです。

プロジェクトを作成

rails new google_map -d mysql

geocoderを追加

住所から経度、緯度を取得してくれるいいやつ

gem 'geocoder'

bundle install

scaffoldでいろいろ作成

rails g scaffold map address:string latitude:float longitude:float

DBを作成する

rails db:create

rails db:migrate

Viewを弄る

formで緯度、経度を直接操作できないように修正

form.html.erb

<%= form_for(map) do |f| %>
  <% if map.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(map.errors.count, "error") %> prohibited this map from being saved:</h2>

      <ul>
      <% map.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :address %>
    <%= f.text_field :address %>
  </div>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

GoogleMapを表示するscriptとstyleとviewを設定

show.html.erb

<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=[googleで取得したAPIキー]&callback=initMap">
</script>

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

<p>
  <strong>Address:</strong>
  <%= @map.address %>
</p>

<p>
  <strong>Latitude:</strong>
  <%= @map.latitude %>
</p>

<p>
  <strong>Longitude:</strong>
  <%= @map.longitude %>
</p>

<style type="text/css">
  #map { height: 400px;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
    width: 80%;}
</style>
<div id="map"></div>

<%= link_to 'Edit', edit_map_path(@map) %> |
<%= link_to 'Back', maps_path %>

サーバー起動してテスト

1. rails s
2. http://localhost:3000/maps 画面で New Map
3. address に適当な住所を入力して Create Map

ほいでけた！