結局JavaScriptとhtmlで作るのが一番簡単。railsでアプリの本体って感じ。railsってアプリ作るのにはすごい便利だけど、JavaScriptを巻き込まざるを得ない。そのくらいJavaScriptは本当に便利。
まあ、やることはめちゃくちゃ簡単で、html.erbに下記のように書くだけ。jsを分けるとかは個人の裁量で。***google mapのapiキーを取得してね
<script type="text/javascript"> function initMap() { // 住所 var location ={lat: 35.54033769999999, lng: 139.69739949999996}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 15, center: location }); //google mapsインスタンス化 var transitLayer = new google.maps.TransitLayer(); transitLayer.setMap(map); // マーカーを押したときにポップアップで出る情報 var contentString = '住所:<%= @address %>'; var infowindow = new google.maps.InfoWindow({ content: contentString }); //マーカーの実体を作る var marker = new google.maps.Marker({ position:location, map: map, title: contentString }); //マーカーをクリックできるようにする marker.addListener('click', function() { infowindow.open(map, marker); }); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=あなたのapiキー&callback=initMap"> </script> <style type="text/css"> #map { height: 400px; margin-left:auto; margin-right:auto; text-align:left; width: 80%;} </style> <!-- ここにマップを描画する --> <div id="map"></div>
下記のように描けば、作ったlacetionの配列に応じて自動的にたくさんマーカーを添付できるよ
<script type="text/javascript"> function initMap() { var locations = [ ['Title A', 3.180967,101.715546], ['Title B', 3.200848,101.616669], ['Title C', 3.147372,101.597443], ['Title D', 3.19125,101.710052] ]; var map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: new google.maps.LatLng(3.171368,101.653404), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow; var marker, i; for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOURAPIKEY=initMap"> </script> <style type="text/css"> #map { height: 400px; margin-left:auto; margin-right:auto; text-align:left; width: 80%;} </style> <div id="map"></div>