目標

現在地を中心に表示
登録済みの店舗（:studio）をピンを立てて表示。ピンをクリックすると詳細画面へのリンクが表示され、リンククリック後に詳細画面へ遷移。

開発環境

Ruby: 2.6.4
Rails: 5.2.4
OS: macOS Catalina

前提条件

Google Maps APIを利用して、マップが１件以上表示できること

以前、投稿した記事の内容の続きです。
一度、目を通しておくとわかりやすいかと思います。

【Rails】Google Maps APIを利用して登録した住所をMap表示する

`Geolocation API`を有効化

Geolocation APIを利用して、現在地情報を取得します。
下記の記事を参考に、Geolocation APIを有効化しました。
Geocoding APIの有効化についてまとめてある記事ですが、手順は同じです。

【Rails】Geocoding APIを用いて高精度で緯度経度を算出し、Google Mapに表示する方法

実装

今回は、現在地検索用に新たにビューを作成しているのでコントローラーの編集も行っていきます。

現在地検索ページ→ maps.html.erb

コントローラーの編集

gon.studiosを定義します。

app/controllers/studios_controller.erb

  def maps
    gon.studios = Studio.all
  end

ビューの編集

<%= include_gon %>を記述することで、Javascript内で使用可能にする。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>StudioDig</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= include_gon %> #追記
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">
    <%= stylesheet_link_tag    'application', media: 'all' %>
    <%= javascript_include_tag 'application' %>

では、実際に記述していきます。

app/views/studios/maps.html.erb

#ここにマップ表示される
<div id="map"></div>


<script>
let map;
let marker = []; // マーカーを複数表示させたいので、配列化
let infoWindow = []; // 吹き出しを複数表示させたいので、配列化
const studios = gon.studios; // コントローラーで定義したインスタンス変数を変数に代入

function initMap(){
  // 現在位置の特定
  navigator.geolocation.getCurrentPosition(function (position){
    // LatLngに位置座標を代入
    LatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

    // mapの初期位置設定
    map = new google.maps.Map(document.getElementById('map'), {
      center: LatLng,
      #倍率はお好みで
      zoom: 13
    });
    // map.setCenterで地図が初期位置に移動
    map.setCenter(LatLng);

    // forは繰り返し処理
    // 変数iを0と定義し、
    // その後gonで定義したstudios分繰り返し加える処理を行う
    for (let i = 0; i < studios.length; i++){
      // studios[i]は変数iのユーザーを取得している
      marker[i] = new google.maps.Marker({
        map: map,
        position: {
          // DBに保存してある、緯度・経度を呼び出す
          lat: studios[i].latitude,
          lng: studios[i].longitude
        }
      });

      // 変数iを変数idに代入
      let id = studios[i]['id']

      // infoWindowは吹き出し
      infoWindow[i] = new google.maps.InfoWindow({
        // contentで中身を指定
        // 今回は文字にリンクを貼り付けた形で表示
        content: `<a href='/studios/${id}'>${studios[i].name}</a>`
      });
      // markerがクリックされた時、
      marker[i].addListener("click", function(){
        // infoWindowを表示
        infoWindow[i].open(map, marker[i]);
      });
    }
  });
}
</script>

<script async defer
      src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GMAP_API'] %>&callback=initMap">
</script>

CSS等で、高さ・幅の設定をしていないとマップが表示されません。忘れずに設定しておいてください。

application.scss

...
#map {
  height: 500px;
  width: 100%;
}
...

おわりに

Google Maps API実装の初期段階で、エラーがどこに出てくるのかわからず「エラーどこ..?」となったのでエラーがどこに表示されるかを簡単に説明して終わりとします。

javascriptで実装しているので、ブラウザのデバッグツールからエラー内容が確認できます。

該当ページで、デバッグツールを開きます。
エラーがある際は、右上に赤いバツ印があるのでそれをクリック

すると、下のコンソールにエラーが表示されます。

さらに、コンソールの右上部分をクリック
すると、今度は右上に具体的なエラー箇所が表示されます。

経験則ですが、具体的なソースコードを見てもわけわからんコードが羅列してあるようなときは、APIが起因（APIが正常に起動してないとか）であることが多かった印象です。
そんなときは、もう一度ターミナルからログを確認したり、Google Maps APIの設定を見直してみると良いかもしれません。
（筆者はそこでめちゃくちゃ苦戦しました。）

参考記事

【Rails】Geolocation APIを用いて位置情報を取得する方法
 【Ruby on Rails】Googlemapの複数ピン立て、吹き出し、リンク
 【Rails】Google Maps APIを利用して登録した住所をMap表示する

【Rails】Google Maps API を利用して現在地から店舗検索を実装する

目標