使用 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