プログラミング ホーム

Rails5でGoogle Mapを描画する方法

2018年10月22日

0
0

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

Pocket
LinkedIn にシェア

りょすけ
毎月3万人以上のプログラマーが訪れるoff.tokyoで、プログラマーさん向けのアンケートを実施しています、アンケートに無料回答すると、他の人の投票も見ることが出来ます!

学びたいプログラミング言語は何ですか?

エンジニアにおすすめできる本

Card image cap
リーダブルコード

より良いコードを書くためのシンプルで実践的なテクニック

Card image cap
Webを支える技術

HTTP,URI,HTML,そしてREST

Card image cap
誰でもPythonで作れる

儲かるAIとソフトウェアの作り方

Card image cap
プログラマが知るべき97のこと

現場で使える実践哲学のマスターピース

Card image cap
情熱プログラマー

時代を超えて。ソフトウェア開発者の幸せな生き方

Card image cap
アジャイルサムライ

プログラミング達人開発者への道

Card image cap
Rubyを作った男 まつもとゆきひろ

コードの世界 スーパー・プログラマになる14の思考法

 vaaaval@gmail.com



  • この記事を書いた人
  • 最新記事

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

-プログラミング, ホーム

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.