新專案需要將地址放在google map顯示,於是使用gmaps4rails實作
經過一陣鬼打牆的debug後才搞定這個功能,這裡記錄下來,也提醒自己別再犯錯。
Install gmaps4rails
1 | gem 'gmaps4rails' |
然後bundle 安裝gem
Javascript Dependencies
這段code需要放在view裡面1
2
3<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=®ion="></script>
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes -->
接著在vendor/assets/javascripts底下新增underscore.js
並且將這段程式碼放入
Javascript Source Code
1 | //= require underscore |
Views
1 | <div style='width: 800px;'> |
Javascript Code
在view底下加入javascript code,這段會顯示一個標記在經緯度原點的地圖1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<script type="text/javascript">
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers([
{
"lat": 0,
"lng": 0,
"picture": {
"url": "http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-32.png",
"width": 32,
"height": 32
},
"infowindow": "hello!"
}
]);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
</script>
Controller
假設我們有一個post controller和model,其中有個欄位是address
此欄位需要轉換為經緯度,並且在controller建立一個hash table做為google map標記的資料1
2
3
4
5
6
7
8
9
10
11class PostsController < ApplicationController
...略
def show
@post = Post.find(params[:id])
@hash = Gmaps4rails.build_markers(@post) do |post, marker|
marker.lat post.latitude
marker.lng post.longitude
end
end
end
這裡要注意的是建立hash這段code要放在相對應的action,本來照著官網的示範做(它是放在index),一直都失敗
才發現是hash沒建出來
Model
1 | class Post < ActiveRecord::Base |
需要使用geocoded_by才能轉換至經緯度座楆
以上都設定好後,可以回頭修改script
Javascript Code
在view底下加入javascript code,這段會顯示一個標記在經緯度原點的地圖1
2
3
4
5
6
7
8
9
10<script type="text/javascript">
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers(<%=raw @hash.to_json %>); # 將hash table轉成json格式當標記
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
handler.getMap().setZoom(15); # 預設zoom為15
}
);
</script>
到這裡就完成google map的顯示了,如果還需要其它功能(畫路徑、客製化圖層)請參考官方說明
參考來源:
Youtube教學影片
gmaps4rails github
geocoder github
“Change default zoom” from Stack Overflow