Ruby on Rails: Iteration with gmaps4rails

Question

I'm new to Ruby on Rails. I've followed the instructions in gmaps4rails to create a simple app where you can load ONE map with MANY markers. I'm interested in loading many maps with just one marker. when I try to put the code inside the iteration the div just stays empty.. in the view:

<p id="notice"><%= notice %></p>

<h1>Listing Places</h1>

<table>
  <thead>
    <tr>
      <th>Latitude</th>
      <th>Longitude</th>
      <th>Address</th>
      <th>Description</th>
      <th>Title</th>
      <th>Map</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @places.each do |place| %>
      <tr>
        <td><%= place.latitude %></td>
        <td><%= place.longitude %></td>
        <td><%= place.address %></td>
        <td><%= place.description %></td>
        <td><%= place.title %></td>
        <td><div style='width: 80px;'>
            <div id="minimap" style='width: 80px; height: 40px;'></div>
          </div>

          </td>
        <td><%= link_to 'Show', place %></td>
        <td><%= link_to 'Edit', edit_place_path(place) %></td>
        <td><%= link_to 'Destroy', place, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<br>

<%= link_to 'New Place', new_place_path %>

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

<script type="text/javascript">
  handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
  markers = handler.addMarkers(<%=raw @hash.to_json %>);
  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();
});
</script>

in the controller I have this code:

def index
    @places = Place.all
    @hash = Gmaps4rails.build_markers(@places) do |place, marker|
      marker.lat place.latitude
      marker.lng place.longitude
end

Ive tried putting the script inside the loop and changing the markers to

markers = handler.addMarkers("lag":<%= place.latitude %>,"lng":<%= place.longitude %>);

but it didn't work.

Can somebody help me? Here's my repository: https://github.com/francisconlm/mapps tell me if you need more details thank you

ps: if somebody thinks there's a better way to use gmaps api than gmaps4rails, advice is always welcome :)

Answer 1

I found the answer. I needed to loop the variables also. This worked for me but maybe somebody can tell me how to improve it :)

 <% @places.each do |place| %>
        <tr>
          <td><%= place.latitude %></td>
          <td><%= place.longitude %></td>
          <td><%= place.address %></td>
          <td><%= place.description %></td>
          <td><%= place.title %></td>
          <td>

  <div style='width: 400px;'>
              <div id="map<%= place.id %>" style='width: 400px; height: 200px;'></div>
            </div>

  <script type="text/javascript">
    handler<%= place.id %> = Gmaps.build('Google');
    handler<%= place.id %>.buildMap({ provider: {}, internal: {id: 'map<%= place.id %>'}}, function(){
    markers<%= place.id %> = handler<%= place.id %>.addMarkers([{ lat: <%= place.latitude %>, lng: <%= place.longitude %>}]);
    handler<%= place.id %>.bounds.extendWith(markers<%= place.id %>);
    handler<%= place.id %>.fitMapToBounds();
    handler<%= place.id %>.getMap().setZoom(10);
    });
  </script>
          </td>
          <td><%= link_to 'Show', place %></td>
          <td><%= link_to 'Edit', edit_place_path(place) %></td>
          <td><%= link_to 'Destroy', place, method: :delete, data: { confirm: 'Are you sure?' } %></td>
        </tr>
      <% end %>

Answer 2

You have to use it with like

markers = handler.addMarkers(<%=raw @hash.to_json %>); 

You cannot loop inside your div. Please check with firebug that is that any error on js.