#やりたいこと
レストラン（写真。店名。店の説明。住所）の投稿の際に
住所入力したら、selfで経度緯度所得してgoogle map にピン立てる。

環境

ruby 2.5.1
rails 5.2.3

実装

DBの中身
postsテーブル

カラム名	型	内容
address	string	住所
latitude	float	住所緯度
longitude	float	住所経度
title	text	店の名前
description	text	店の説明
image	string	レストランの写真

google API 所得

参考サイト
(https://nendeb.com/276)

Maps JavaScript API
Geocoding API
この二つの有効化

gem 導入

Gem.file

gem "gmaps4rails"
gem "geocoder"

JS

ターミナル.

rails g gmaps4rails:copy_js

application.html.haml

    %script(src="//maps.google.com/maps/api/js?v=3.23")
    %script(src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js")
    %script(src="//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js" type="text/javascript")
    %script(src="/javascripts/gmaps_google.js")

##Model

post.rb

  geocoded_by :address
  after_validation :geocode

  private
  def geocode
    uri = URI.escape("https://maps.googleapis.com/maps/api/geocode/json?address="+self.address.gsub(" ", "")+"&key=#{Rails.application.credentials.google_map_api}")
    res = HTTP.get(uri).to_s
    response = JSON.parse(res)
    self.latitude = response["results"][0]["geometry"]["location"]["lat"]
    self.longitude = response["results"][0]["geometry"]["location"]["lng"]
  end

##controller

posts_controller.rb

 def show
    @post = Post.find(params[:id])
  end

  private
  def post_params
    params.require(:post).permit(:image, :description, :text, :address, :latitude, :longitude)
  end

##veiw

show.html.haml

    #map
      :javascript
        function initMap() {

          var test = {lat: #{@post.latitude}, lng: #{@post.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 = '住所：#{@post.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{:async => "", :defer => "defer", :src => "https://maps.googleapis.com/maps/api/js?v=3.exp&key=#{Rails.application.credentials.google_map_api}&callback=initMap"}

show.scss

#map {
  height: 400px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
  width: 80%
}

#大切なこと
post.rbとshow.html.hamlのところに
下記の記載があると思います。

#{Rails.application.credentials.google_map_api}

この記載を消して自分で所得したAPIを打ち込めば動きますが
gitでプロジェクト管理してる時にgitにあげるとAPI_KEYが悪用される可能性があり、gitパトロールから注意が入ります。
なので環境変数を使います。

##環境変数の設定
rails のバージョンによって異なります。
今回はrails 5.2.3を使用しています。

ターミナル.

EDITOR="vi" bin/rails credentials:edit

上記コマンドで環境変数の設定を行います。
aws:~~~~はデフォルトで書いてあると思います。
今回はgoogle_map_apiという変数に所得したAPI_KEYを代入している形です。
変数は自分の好きな名前で結構です。

iで入力モードで編集追加できます。
:wqで保存、上書き保存できます。

# aws:
#   access_key_id: 123
#   secret_access_key: 345


google_map_api: 所得したAPI_KEY

##終わりに
私は今回このようなコードで住所から緯度経度所得してmapに表示させました。
gitにもあげているので詳細なコード確認したい方がおられましたら、キータの私のページにgitのリンクありますので見てください。
favorite_food_shareというプロジェクト名です。（キータ記事とコード少し違うところあります。）