【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からAPIを取得できます。

この記事ではAPIの取得方法は割愛しますので、下の記事を参考に「Maps JavaScript API」と「Geolocation API」を有効にしてください。
Google Mapを利用する 【Rails6】【Geocoder】【heroku】

#実装
##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>

#ユーザーの位置情報を取得する
###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があるディレクトリ)に自分で作成します。

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

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

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

/.env

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

#おまけ
###自分の位置情報と投稿した住所にマーカーを立てる
以下の記事を参考に投稿した住所にマーカーが立つようにしましょう！
【Rails6 / Google Map API】住所を投稿してマップに複数マーカーを立てる

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

<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>

#参考記事
Google Mapを利用する 【Rails6】【Geocoder】【heroku】
【Rails】Geolocation APIを用いて位置情報を取得する方法