Ruby on Rails - set the markers on the map with javascript in ruby on rails- ruby on rails tutorial - rails guides - rails tutorial - ruby rails
Set the markers on the map with javascript
There is a .google_map div, which will become the map, and which has the address fields to show as markers as data attribute
<!-- 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>Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - ruby on rails tutorial - rails guides - ruby rails - rubyonrails - learn ruby on rails - team
To make use of the document .ready event with turbolinks without managing the turbolinks events by hand, use the jquery.turbolinks gem. We 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 markersClicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - ruby on rails tutorial - rails guides - ruby rails - rubyonrails - learn ruby on rails - team
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