学習32日目

内容

google map機能の実装(マップの表示)

手順

gemfile

gem 'dotenv-rails'
gem 'geocoder'
gem 'gmaps4rails'
gem 'gon'

terminal

$ bundle install

terminal

touch .env

gitignore

.env

.env

GOOGLE_API_KEY = '************************'

※ 自分のapi keyを設定

xxxx.html.erb

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

<script>
let map
function initMap(){
  geocoder = new google.maps.Geocoder()
  map = new
    google.maps.Map(document.getElementById('map'), {
    center: {lat: 40.7828, lng:-73.9653},
    zoom: 12,
    });

marker = new google.maps.Marker({
  position:  {lat: 40.7828, lng:-73.9653},
  map: map
  });
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=ENV['GOOGLE_API_KEY']&callback=initMap" async defer></script>

application.css

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

※ 好きなサイズでOK

コメント

参考にした記事ではapi keyを直接コード内に入力していた。
しかし、.envから呼び出す方がセキュリティ上安全かと考え、追加した。