【Rails】Google Mapの表示方法

目標

開発環境

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

前提

下記実装済み。

・Googleアカウントを作成済み。
・Slim導入

Google Cloud Platformに登録

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

Google Cloud Platform

2.「使ってみる」をクリック

3.プロジェクト名(適当で良い)を入力し、「作成」をクリック

4.「請求先アカウントの作成」をクリック

5.利用規約にチェックを入れ、「続行」をクリック

6.請求情報を入力し、「無料トライアルを開始」をクリック

APIキーを取得

1.「APIの概要に移動」をクリック

2.「APIとサービスを有効化」をクリック

3.「Maps JavaScript API」をクリック

4.「有効にする」をクリック

5.「認証情報」をクリック

6.「APIとサービスの認証情報」をクリック

7.「認証情報を作成」をクリック

8.「APIキー」をクリック

9.一旦「閉じる」をクリック

10. 「APIキーの名前」をクリック

11.認証情報の設定をする

①アプリケーションの制限
なしを選択する。

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

③Maps JavaScript APIが選択されている事を確認して、保存をクリック

12.赤枠で囲われているマークをクリックし、APIキーをコピー

実装

1.APIキーを環境変数化

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

Gemfile

gem 'dotenv-rails'

ターミナル

& bundle

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

ターミナル

$ touch .env 

③.envファイルを編集

.env

GOOGLE_MAP_API = 'コピーしたAPIキー' # 追記

④.gitignoreファイルを編集

.gitignore

/.env # 追記

2.ビューを編集

~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
    });
  }

注意

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

turbolinksを無効化する方法