#目標
- 現在地を中心に表示
- 登録済みの店舗（: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を定義します。
def maps
gon.studios = Studio.all
end
##ビューの編集
<%= include_gon %>を記述することで、Javascript内で使用可能にする。
<!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' %>
では、実際に記述していきます。
#ここにマップ表示される
<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等で、高さ・幅の設定をしていないとマップが表示されません。忘れずに設定しておいてください。
...
#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表示する