Zmienne z Ruby w plikach .js

Zielona szkoła
1

Cześć,

Piszę aplikację w której używam google maps API. Na chwilę obecną moje widoki wyglądają dość paskudnie. Np. w form mam takie cudo:

<%= form_for @pet, html: { multipart: true } do |f| %>
  <p></p><%= f.label :date %>: <%= f.date_select :date %></p>
  <p><%= f.label :species %>: <%= f.text_field :species %></p>
  <p><%= f.label :description %>: <%= f.text_field :description %></p>
  <p><%= f.label :address %>: <%= f.text_field :address %></p>
  <p><%= f.label :image%>: <%= f.file_field :image %></p>
  <%= f.submit %>
  <%= f.hidden_field :latitude, :id => "lat" %>
  <%= f.hidden_field :longitude, :id => "lng" %>
  <%= hidden_field_tag :state, params[:state] %>
<% end %>

<div style='width: 800px;'>
  <div id="map" style='width: 800px; height: 400px;'></div>
</div>

<script>
  var lat = $("#lat");
  var lng = $("#lng");
  var marker = null;
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: {lat: 52.2297, lng: 21.0122 }
    });        
    placeMarker({lat: 52.2297, lng: 21.0122 }, map);
    set_latlng_to_input(marker);     
    map.addListener('click', function(e) {
      if (marker != null) {
        marker.setMap(null)
      };
      placeMarker(e.latLng, map);
      set_latlng_to_input(marker);
    });
  }

  function placeMarker(latLng, map) {
    marker = new google.maps.Marker({
      position: latLng,
      map: map
  });
  }
  
  var set_latlng_to_input = function(marker){
    lat.val(marker.getPosition().lat());
    lng.val(marker.getPosition().lng());
  }
</script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=<%= Rails.application.secrets.google_maps_key %>
    &callback=initMap"></script>

Na wygenerowanej mapie ustawiam sobie marker i następnie jego współrzędne są zapisywane w bazie.

Chcciałbym wywalić wszystko z <script> do osobnego pliku map.js i wywołać go za pomocą <% javascript_include_tag ‘map’ %>. Nie wiem jak poradzić sobie z transferem zmiennych lng i lat do formularza znajdującego się w widoku.

W drugim przypadku chcę wyswietlić statyczną mape przekazując współrzędne z modelu. Znalazłem dość prosty sposób opisany tutaj:
http://railscasts.com/episodes/324-passing-data-to-javascript?autoplay=true
wykorzystujący gem https://github.com/gazay/gon.
Czy to dobry pomysł? Ten railscast jest sprzed 5 lat a to szmat czasu…

Jak wg. Was powinno to wyglądać?
Ciut długi post wyszedł ale może ktoś dotrwa do końca i podzieli się sugestiami :slight_smile:
Z góry dzieki!

2

Czołem!

Sam jestem świeżak, a na dodatek JSa znam tyle co nic, ale właśnie niedawno skończyłem pracę nad implementacją Map Google’a do Railsów więc postaram się pomóc.
Poruszyłeś dwie kwestie:

  1. W pierwszej po namyśle raczej nie pomogę, bo przekazywałem dane tylko Rails->JS.
  2. Tu nie łapię jaki związek ma przekazywanie danych z modelu Railsów z tym railscastem, w którym jest o przekazywaniu danych do JSa. Samą statyczną mapę można wygenerować bardzo prosto jednym linkiem wołającym do Google Maps API.
    Czyli na przykład taki helper załatwi sprawę:
    def google_map(center)
    “https://maps.googleapis.com/maps/api/staticmap?center=#{center}&size=300x300&zoom=17”
    end

Jako center można dać full adres, albo lat i lng połączone przecinkiem.

Przydatne linki:
https://developers.google.com/maps/documentation/static-maps/intro <- Dokumentacja Google’a, pewnei znasz, ale na wszelki wypadek daję, bo ładnie tam jest wszystko wyjaśnione.
https://anadea.info/blog/how-to-integrate-google-maps-into-ruby-on-rails-app <- Bardzo praktyczny art, przyda się do statycznej mapki, ale może także do punktu pierwszego.

Powodzenia!

3

https://www.google.pl/search?q=ruby+js+google+api+map

masa materiałów blogów nawet screencastów. W pierwszych kilku masz wszystko od tego jak to zrobic za pomocą gotowych gemów do google maps w rails po zrobienie tego ręcznie

4

Jeżeli nie chcesz robić spagetti w plikach .erb wstrzykując Ruby do tagu script, możesz przenieść cały JS do osobnego pliku i skorzystać z gema Paloma, który pozwala w kontrolerze przekazać zmienne w taki sposób:

def show
    js key: Rails.application.secrets.google_maps_key
end

A w plikach JS pozyskać je w kontrolerze Palomy w taki sposób:

show: function() {
  alert("key: " + this.params.key);
}

Stosujemy to rozwiązanie w naszym projekcie, łatwo się zarządza kodem, dziwi mnie że Palomy nie ma domyślnie w Railsach :wink:

1 Like