使用 javascript 在地圖上設定標記

假設有一個 .google_map div，它將成為地圖，並且其地址欄位顯示為 data 屬性的標記。

例如：

<!-- http://localhost:3000/profiles/123 -->
<div class="google_map" data-address-fields="[
  {label: 'Work address', value: 'Willy-Brandt-Straße 1\n10557 Berlin', 
  position: {lng: ..., lat: ...}},
  ...
]"></div>

要使用 turbolinks 來使用 $(document).ready 事件而不用手動管理 turbolinks 事件，請使用 jquery.turbolinks gem 。

如果你希望稍後使用地圖執行某些其他操作，例如過濾或資訊視窗，則可以方便地使用咖啡指令碼類管理地圖。

# app/assets/javascripts/google_maps.js.coffee
window.App = {} unless App?
class App.GoogleMap
  constructor: (map_div)->
    # TODO: initialize the map
    # TODO: set the markers

當使用幾個預設名稱空間的咖啡指令碼檔案時，可以方便地定義全域性 App 名稱空間，該名稱空間由所有咖啡指令碼檔案共享。

然後，遍歷（可能是幾個）.google_map div 併為每個 div 建立一個 App.GoogleMap 類的例項。

# app/assets/javascripts/google_maps.js.coffee
# ...
$(document).ready ->
  App.google_maps = []
  $('.google_map').each ->
    map_div = $(this)
    map = new App.GoogleMap map_div
    App.google_maps.push map