Google Maps Javascript APIの導入（Rails6）

googleマップAPIの導入について記録します。

・rails: 6.0.3.4

・webpacker、slim使用

流れとしては

1. APIキー取得

2. 取得したAPIキーをcredentialsに記載

3. HTML, javascript, css実装

のステップで行います。

1. APIキー取得

まずはGoogle Cloud PlatformからAPIキーを取得します。

この部分は省略します。（以下の記事がわかりやすかったです。）

Google Maps API を使ってみた - Qiita

2. 取得したAPIキーをcredentialsに記載

取得したAPIキーはcredentials.yml.encに以下の構成で記載。

credentials.yml.enc

api_key:
  maps_javascript_api: '取得したAPIキー'

取り出すときはRails.application.credentials.api_key[:maps_javascript_api]

3. HTML, javascript, css実装

後は公式通りにビューを実装していきますが、slimでの記法やwebpackに不慣れだったので何点か苦労しました。

developers.google.com

app/view/index.html.slim

- google_api = "https://maps.googleapis.com/maps/api/js?key=#{ Rails.application.credentials.api_key[:maps_javascript_api] }&callback=initMap".html_safe
script{ async src = google_api }

div#map

callback処理でjsでinitMap関数を呼び出し、div id='map'の部分にgoogleマップが埋め込まれます。

app/javascript/google_maps.js

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 35.6581, lng: 139.7017 },
    zoom: 14,
  });
}
window.initMap = initMap;

center:でマップの中心座標、zoom:で縮尺のデフォルト表示の設定ができます。

また、window.initMap = initMap;の部分は下記を参考に追加しました。

javascript - Google Maps APIでWebpackを使用するには？

この記述がないとinitMap is not a functionのエラーによりマップが表示されませんでした。

webpackを使っている場合はグローバル変数領域に宣言する必要があるようです。

参考：（この質問の回答がわかりやすかった）

JavaScript - webpack環境で関数をコンソールで実行したところエラーが返る｜teratail

app/javascript/stylesheets/application.scss

#map {
  height: 400px;
  width: 600px;
}

マップの表示サイズを設定します。

height: 100%など、%で指定するとマップが表示されないのでpxでの指定が必要です。

app/javascript/packs/application.js

require("google_maps.js")

最後にapplication.jsでrequireすればマップが表示されると思います。