Rails5でGoogle Mapを描画する方法

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