【Rails】Google Mapの表示方法

# 目標

![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/6466fcf7-7df8-3e3b-1184-a6c005c86cdf.gif)

# 開発環境

・Ruby: 2.5.7
・Rails: 5.2.4
・Vagrant: 2.2.7
・VirtualBox: 6.1
・OS: macOS Catalina

# 前提

下記実装済み。

・[Googleアカウント](https://accounts.google.com/signup/v2/webcreateaccount?continue=https%3A%2F%2Faccounts.google.com%2FManageAccount%3Fnc%3D1&hl=ja&flowName=GlifWebSignIn&flowEntry=SignUp)を作成済み。
・[Slim導入](https://qiita.com/matsubishi5/items/b639ffddecc626856039)

# `Google Cloud Platform`に登録

### 1.下記リンクにアクセス

[Google Cloud Platform](https://cloud.google.com/maps-platform/)

### 2.「使ってみる」をクリック
![スクリーンショット 2020-06-02 10.25.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/f6091612-bd3f-5727-ae64-79fce0b1471f.png)

### 3.プロジェクト名(適当で良い)を入力し、「作成」をクリック
![スクリーンショット 2020-06-02 10.36.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/a96fda4e-3650-6929-ba9b-6969ef5d5b16.png)

### 4.「請求先アカウントの作成」をクリック
![スクリーンショット 2020-06-02 10.38.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/cf96d27a-4fca-1a2f-29f9-03e23e63c54a.png)

### 5.利用規約にチェックを入れ、「続行」をクリック
![スクリーンショット 2020-06-02 10.40.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/b435a2d0-a5ea-2ac4-3554-4613eaf21955.png)

### 6.請求情報を入力し、「無料トライアルを開始」をクリック
![スクリーンショット 2020-06-02 10.43.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/fcdab5db-ae9f-34f5-9f88-f46adcd7c694.png)

# `APIキー`を取得

### 1.「APIの概要に移動」をクリック
![スクリーンショット 2020-06-02 10.53.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/1ba2b803-1dad-165c-1d42-ac893513a8c5.png)

### 2.「APIとサービスを有効化」をクリック
![スクリーンショット 2020-06-02 10.55.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/8a203002-5f05-6f0b-b9f4-8720c5cea273.png)

### 3.「Maps JavaScript API」をクリック
![スクリーンショット 2020-06-02 10.58.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/51ea4c41-a9a1-7b1a-4546-c81fc7a20e8f.png)

### 4.「有効にする」をクリック
![スクリーンショット 2020-06-02 10.58.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/4d569e4e-855f-e304-afc7-b8415a4504f4.png)

### 5.「認証情報」をクリック
![スクリーンショット 2020-06-02 11.01.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/621696bc-8dca-c90b-8b01-8366afe9babb.png)

### 6.「APIとサービスの認証情報」をクリック
![スクリーンショット 2020-06-02 11.01.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/19f5d993-f79f-9107-d459-2bb1ea57bdb8.png)

### 7.「認証情報を作成」をクリック
![スクリーンショット 2020-06-02 11.01.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/bf9d00d8-9ac0-f948-e592-52af7acd2748.png)

### 8.「APIキー」をクリック
![スクリーンショット 2020-06-02 11.01.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/71697b53-befd-165d-848c-95c521857159.png)

### 9.一旦「閉じる」をクリック
![スクリーンショット 2020-06-02 11.13.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/c5205b7d-fed0-a5b1-c559-54ef7e64ca3b.png)

### 10. 「APIキーの名前」をクリック
![スクリーンショット 2020-06-02 11.06.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/b7f27a2e-9f52-c5e6-21d5-a24a63c821ab.png)

### 11.認証情報の設定をする
**①アプリケーションの制限**
`なし`を選択する。

**②APIの制限**
`キーを制限`を選択し、プルダウンメニューから`Maps JavaScript API`を選択する。

**③`Maps JavaScript API`が選択されている事を確認して、`保存`をクリック**
![スクリーンショット 2020-06-02 11.10.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/15167977-03ba-3eb6-2064-3f28aa5d5d64.png)

### 12.赤枠で囲われているマークをクリックし、APIキーをコピー
![スクリーンショット 2020-06-02 11.18.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/62bda87d-49dd-9180-944b-ea20f9c16a06.png)

# 実装

### 1.APIキーを環境変数化

**①「gem 'dotenv-rails'」を導入**

```ruby:Gemfile
gem 'dotenv-rails'
```

```terminal:ターミナル
& bundle
```

**②アプリケーション直下に「.env」ファイルを作成**
※アプリケーションのディレクトリに移動してから下記コマンドを実行

```terminal:ターミナル
$ touch .env 
```
![スクリーンショット 2020-06-02 11.32.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/6136dec1-89a9-94cb-0410-8aec11f79a8b.png)

**③`.env`ファイルを編集**

```:.env
GOOGLE_MAP_API = 'コピーしたAPIキー' # 追記
```

**④`.gitignore`ファイルを編集**

```:.gitignore
/.env # 追記
```

### 2.ビューを編集

```slim:~html.slim
/ マップを表示
#map style='height: 500px; width: 500px;'

/ APIを読み込み
- google_api = "https://maps.googleapis.com/maps/api/js?key=#{ ENV['GOOGLE_MAP_API'] }&callback=initMap".html_safe
script{ async src=google_api }

javascript:

  let map;

  function initMap() {
    geocoder = new google.maps.Geocoder()

    // マップを作成
    map = new google.maps.Map(document.getElementById('map'), {
      // マップの中心に表示する場所の緯度経度を指定
      center: { lat: 40.7828, lng:-73.9653 },
      zoom: 12,
    });

    // マーカーを立てる場所の緯度経度を指定
    marker = new google.maps.Marker({
      position: { lat: 40.7828, lng:-73.9653 },
      map: map
    });
  }
```

![スクリーンショット 2020-06-02 11.58.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579893/e6433aa8-bac5-1882-f6e0-74ed6361fb81.png)

# 注意

`turbolinks`を無効化しないと地図が切り替わらないので、必ず無効化しておきましょう。

[turbolinksを無効化する方法](https://qiita.com/matsubishi5/items/c4c8a5df03ae630ae534)