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

#目標
1. 現在地を中心に表示
2. 登録済みの店舗（:studio）をピンを立てて表示。ピンをクリックすると詳細画面へのリンクが表示され、リンククリック後に詳細画面へ遷移。
![2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771476/4a33cbc2-399e-1801-cc3e-35dd28f40722.gif)

#開発環境
* Ruby: 2.6.4
* Rails: 5.2.4
* OS: macOS Catalina

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

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

[【Rails】Google Maps APIを利用して登録した住所をMap表示する](https://qiita.com/osugi_san/items/72d58bf034dc2db9d02c)

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

[【Rails】Geocoding APIを用いて高精度で緯度経度を算出し、Google Mapに表示する方法](https://qiita.com/osugi_san/items/72d58bf034dc2db9d02c)

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

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

##コントローラーの編集
gon.studiosを定義します。

```ruby:app/controllers/studios_controller.erb
  def maps
    gon.studios = Studio.all
  end
```

##ビューの編集
<%= include_gon %>を記述することで、Javascript内で使用可能にする。

```ruby: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' %>
```

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

```cpp: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等で、高さ・幅の設定をしていないとマップが表示されません。忘れずに設定しておいてください。

```css:application.scss
...
#map {
  height: 500px;
  width: 100%;
}
...
```

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

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

![１０.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771476/4c53bf64-2719-f3a8-d6e3-93f444357fd9.png)

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

![１１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771476/41624aec-1962-6abc-3db3-895519323ada.png)

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

![１２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/771476/118f797f-64fa-9af5-91d9-f6413edd33e8.png)

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

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

#参考記事
[【Rails】Geolocation APIを用いて位置情報を取得する方法](https://qiita.com/matsubishi5/items/0afa6845ea024c081d76)
[【Ruby on Rails】Googlemapの複数ピン立て、吹き出し、リンク](https://qiita.com/japwork/items/1d01663b462264ab92a9)
[【Rails】Google Maps APIを利用して登録した住所をMap表示する](https://qiita.com/osugi_san/items/72d58bf034dc2db9d02c)