google api 　住所から経度緯度取得してgoogle map に表示　環境変数の定義の仕方

#やりたいこと
レストラン（写真。店名。店の説明。住所）の投稿の際に
住所入力したら、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というプロジェクト名です。（キータ記事とコード少し違うところあります。）