目標

開発環境

・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を無効化する方法

【Rails】Google Mapの表示方法

目標