【Rails / Google Map API】APIを用いて位置情報を取得する

#GOAL
GoogleMapsAPI（Maps JavaScript API/Geolocation API）を用いてユーザーの位置情報を取得するし、マップ上にマーカーを立てる。

#Google Map APIを利用可能にする
自分のアプリ内でGoogleMapを使用するためにはAPIを取得しなければなりません。
今回使用するAPIは、
・Maps JavaScript API
・Geolocation API
の２つです。


[Google Cloud Platform](https://console.cloud.google.com/?hl=ja)からAPIを取得できます。

この記事ではAPIの取得方法は割愛しますので、下の記事を参考に「Maps JavaScript API」と「Geolocation API」を有効にしてください。
[Google Mapを利用する 【Rails6】【Geocoder】【heroku】](https://qiita.com/MandoNarin/items/aa91ffae373a8cfc85d2)

#実装
##Mapの表示（viewファイル）
下記のコードでMapが表示されます。

```index.html.erb

<div id='map'></div>

<style>
    #map {
        height: 500px;
        width: 500px;
    }
</style>

<script>
    let map

    const display = document.getElementById('display')

    // mapの表示関数 
    function initMap() {
        geocoder = new google.maps.Geocoder()

        // mapの初期位置, 縮尺を定義
        map = new google.maps.Map(document.getElementById('map'), {
            center: {
                lat: 35.001637,
                lng: 135.767667
            },
            zoom: 15,
        });
     }
</script>

<script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"  
    async defer>
</script>
```
![スクリーンショット 2021-04-21 224457.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820164/0d80d69c-1470-3840-f215-06f5090bd094.jpeg)

#ユーザーの位置情報を取得する
###viewファイルの編集
```index.html.erb
<div id='map'></div>

<style>
    #map {
        height: 500px;
        width: 500px;
    }
</style>

<script>
let map

 const display = document.getElementById('display')

function initMap(){

　// 位置情報を取得する
  navigator.geolocation.getCurrentPosition(function (position) {
    LatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

　// 取得した位置情報を中心に表示
   map = new google.maps.Map(document.getElementById('map'), {
        center: LatLng,
        zoom: 15
      });

　// マーカーを立てる
      var marker = new google.maps.Marker({
              map : map,         
              position : LatLng   
            });
    });
}
</script>

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

##APIキーの非公開
###gemの追加
Gemfileに.envファイル(後述)を利用するためのgemを追記します。

```
gem 'dotenv-rails'
```

続いて　bundle install　を実行します。

```
bundle install
```
###.envファイルの作成
`.env`というファイルをアプリケーションディレクトリ(appやdbやGemfileがあるディレクトリ)に自分で作成します。

![スクリーンショット 2021-04-20 214827.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820164/36a7b15a-968a-416f-d569-0bc0524183c2.jpeg)

そして、`.env`ファイルにGOOGLE_MAP_API_KEY=xxxの一行を追記します。

```
GOOGLE_MAP_API_KEY=ここに自分のAPIキーを書く
```


公開しないように .gitignoreファイルに以下一行を記述します。（`.gitignore`ファイルがない場合は、アプリケーションディレクトリに自分で作成します。）

```
/.env
```

#完成
位置情報を取得してマーカーを立てることに成功しました！

![スクリーンショット 2021-04-21 230107.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820164/62226bf5-24e3-916a-9edf-8c7d1ba0e6aa.jpeg)

#おまけ
###自分の位置情報と投稿した住所にマーカーを立てる
以下の記事を参考に投稿した住所にマーカーが立つようにしましょう！
[【Rails6 / Google Map API】住所を投稿してマップに複数マーカーを立てる](https://qiita.com/kaiyukun/items/3ab083282872937b1fa5)

記事で実装したコードを以下のように編集すれば完成です。

```
<div id='map'></div>
<%= link_to "投稿ページへ", new_map_path %>
<style>
#map {
  height: 600px;
  width: 600px;
}
</style>

<script>
  let map
function initMap(){
      geocoder = new google.maps.Geocoder()
      
      // 位置情報を取得する
      navigator.geolocation.getCurrentPosition(function (position) {
      LatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
     
      // 取得した位置情報を中心に表示
      map = new google.maps.Map(document.getElementById('map'), {
          center: LatLng,
          zoom: 15,
      });

      // 自分の現在地にマーカーを立てる
      var pin = new google.maps.Marker({
              position:LatLng,
              map: map,
              icon: {
		fillColor: "#0000ff",                //塗り潰し色
		fillOpacity: 1.0,                    //塗り潰し透過率
		path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW, //マーカーの形を指定
		scale: 8,                           //サイズ
		strokeColor: "#0000ff",              //枠の色
		strokeWeight: 1.0                    //枠の透過率
	},
          });

      <% @maps.each do |m| %>
          (function(){
          var contentString = "住所：<%= m.address %>"; 

          var marker = new google.maps.Marker({
              position:{lat: <%= m.latitude %>, lng: <%= m.longitude %>},
              map: map,
              title: contentString,
             animation: google.maps.Animation.DROP,
          });

          })();
      <% end %>
      });
      }
      

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_MAP_API_KEY'] %>&callback=initMap" async defer></script>
```
![スクリーンショット 2021-09-16 090500.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820164/6a74fd89-4bd7-87dd-3b47-cb96db7639b2.jpeg)


#参考記事
[Google Mapを利用する 【Rails6】【Geocoder】【heroku】](https://qiita.com/MandoNarin/items/aa91ffae373a8cfc85d2)
[【Rails】Geolocation APIを用いて位置情報を取得する方法](https://qiita.com/matsubishi5/items/0afa6845ea024c081d76)