Ruby on Rails Using GoogleMaps with Rails Set the markers on the map with javascript
Example
Suppose, there is a .google_map div, which will become the map, and which has the address fields to show as markers as data attribute.
For example:
<!-- 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>
To make use of the $(document).ready event with turbolinks without managing the turbolinks events by hand, use the jquery.turbolinks gem.
If you want to perform some other operations with the map, later, for example filtering or info windows, it's convenient to have the map managed by a coffee script class.
# 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
When using several coffee script files, which are namespaced by default, it's convenient to define a global App namespace, which is shared by all coffee script files.
Then, loop through (possibly several) .google_map divs and create one instance of the App.GoogleMap class for each of them.
# 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
