Google map apiを使用しeach文により複数マップを表示したいが一つしか表示されません。

Question

現在railsでgoogle map APIを使用し、いきたい場所の登録→登録したものを一覧表示するアプリを作っています。
その中の一覧表示に関してうまく行かないので質問させていただきます。
一覧表示の内容としては、
場所の名前や場所と一緒にgoogle mapによる表示がされるように作っています。
それがeach文により複数表示されていくといったイメージです。
登録したものをeach文により表示させるというものはうまくできたのですが、今回作りたいのは行ったことがある場所を除いた全ての登録を一覧表示させるというものです。

html.erb

<% @places.each_with_index do |place,i| %>
        <% unless current_user.checkcomp?(place) %>
          <tr>
            <td><%= place.id %></td>
            <td><%= place.name %></td>
            <td><%= place.latitude %></td>
            <td><%= place.longitude %></td>
            <td><%= place.address %></td>
            <td><%= place.price_level %></td>
            <td><%= place.rating %></td>
            <td><%= link_to ( place ), :title => "show" do %>
              <span class="glyphicon glyphicon-stats"></span>
            <% end %></td>
            <td><%= link_to "削除", place, method: :delete, data: { confirm: "本当に削除しますか？" } %></td>

          <td>
          <% if current_user.checkfav?(place) %>
            <%= form_with(url: create_favorite_path(id: place.id), local: true, method: :delete) do |f| %>
              <%= hidden_field_tag :place_id, place.id %>
              <%= f.submit '登録解除', class: 'btn btn-danger' %>
            <% end %>
          <% else %>
            <%= form_with(url: create_favorite_path(id: place.id), local: true) do |f| %>
              <%= hidden_field_tag :place_id, place.id %>
              <%= f.submit 'お気に入り登録', class: 'btn btn-primary' %>
            <% end %>
          <% end %>
          </td>

          <td>
            <%= form_with(url: create_complete_path(id: place.id), local: true) do |f| %>
              <%= hidden_field_tag :place_id, place.id %>
              <%= f.submit '完了', class: 'btn btn-primary' %>
            <% end %>
          </td>

            </tr>
            <div id="todo-maps<%=i%>" date-lat="<%=place.latitude%>" date-lng="<%=place.longitude%>" style='width: 100%; height: 500px;'></div>

            <script src="https://maps.googleapis.com/maps/api/js?key=####&callback=initMap" async defer>
            function initMap(){
              //Idの数だけマップを出力
                const e = document.getElementById('todo-maps<%=i%>');
                var latlng = new google.maps.LatLng(<%=place.latitude%>,<%=place.longitude%>;

                map = new google.maps.Map(document.getElementById('todo-maps<%=i%>'),{
                  center: {lat: <%=place.latitude%>, lng: <%=place.longitude%>},
                  zoom: 18
                });
                marker = new google.maps.Marker({
                  position: latlng,
                  map: map
                });
            }
            </script>

        <% end %>
      <% end %>

かなり省いての全体の説明になりますが、

@places

には登録されているすべての情報があり、each文で一覧表示させています。
次に

<% unless current_user.checkcomp?(place) %>

により行った場所（checkcomp）かどうかを判断しunlessにより行っていない場合(false)は一覧に表示させる文を書いています。

次にマップの表示に関して

<div id="todo-maps<%=i%>" date-lat="<%=place.latitude%>" date-lng="<%=place.longitude%>" style='width: 100%; height: 500px;'></div>

により行っていない場所の緯度経度とマップ表示のためのidを記述しています。
"todo-maps<%=i%>"に関しては複数マップを表示させるためIDをユニークにする必要があると思い、記述しています。"todo-maps0"や"todo-maps1"といった感じです。

scriptでは

 const e = document.getElementById('todo-maps<%=i%>');

によりIDを取得し

var latlng = new google.maps.LatLng(<%=place.latitude%>,<%=place.longitude%>;

で緯度経度を取得して表示するという記述をしています。

以上の説明ですが、マップの表示が一番最初のものしか表示することができません。

var latlng = new google.maps.LatLng(<%=place.latitude%>,<%=place.longitude%>;

こちらにはきちんとeach文により取得した緯度経度がそれぞれ入っているのは確認できています。
どのようにすれば複数マップが表示されるのでしょうか、
予想ではtodo-map1 todo-map2 todo-map5のようなIDが作られ
new google.mapsで緯度経度を取得しgetElementByIdによりそれぞれのIDのstyleに反映されて行くイメージでしたが、違うのでしょうか・・・
どのようにしたら複数マップが表示されますか？

HTMLの記述など整っていない点ありますが、ご教授願います。

Answer 1

map はあまり使いこなしていないのと、JSは不得意なので、半分本気で読んでください。

その表示される「一つ」というのは @places. の最後のではないですか？
function initMap() が @places.の数定義されています。
ので、最後のものだけ有効になっているのではないでしょうか。
scriptは一つだけにし、そのなかで、 @places. の数 loopしてmap = new google.maps.Map(document.getElementById('todo-maps<%=i%>')してはどうでしょう。

Comments

[ryota5656]

はい！まさに最後の一つだけ表示されています。
”scriptは一つだけにし、そのなかで、 @places. の数 loopして”というのはどのような意味でしょうか。。。？
特にscriptは一つだけにしが理解できませんでした。。。

[winterboum]

eachのなかに scriptが書かれているので沢山できています。
loopの外で記述すれば一つになります。
scriptのなかでloopさせます。

ああ、function initMap( の定義を一つにする という意味です

[ryota5656]

返信ありがとうございます。
こちらの返信にコードの記述が向いていなかったので回答の投稿でコードを記述したものを載せました。
function initMap(内でLOOPさせるという意味かと思いましたが結果は一つも表示されませんでいた。
おそらく
<div id="todo-maps<%=i%>" date-lat="<%=place.latitude%>" date-lng="<%=place.longitude%>" style='width: 100%; height: 500px;'></div>
をscript内で記述しているせいかなと思いますが、上記の記述はLOOP内に入れなければならなくてうまく記述ができません。。。script内にhtml書くとき特別なタグが必要なのでしょうか

[ryota5656]

<div id="todo-maps<%=i%>" date-lat="<%=place.latitude%>" date-lng="<%=place.longitude%>" style='width: 100%; height: 500px;'></div>
を別でscript外でループさせるように記述しても一つも表示されませんでした。

[winterboum]

mapを表示するエリアの<div>はscriptの外においたままで、
script全体をeachの外にだす。
tableが正しく閉じる

としてもだめかな？
ブラウザーの検証機能でエラーを確認するとか
ソースみて期待通りのscriptになっているかみるとか
してみたかな？

[ryota5656]

返信ありがとうございます。
問題が解決しました。どうやら
const e = document.getElementById('todo-maps<%=i%>');
この部分に、eが二重に宣言されているとエラーがはかれていました。
おそらくLOOP内に入れていたせいで何度もeを宣言していたためだと思います。なので
document.getElementById('todo-maps<%=i%>');
とすることで無事に思い通りに全てマップを表示させることができました。
考え方としては、winterboumさんの考え方でうまく行くことができ、大変助かりました。
ありがとうございました！

Answer 2

解決したコード

<script>
function initMap(){
  <% @places.each_with_index do |place,i| %>
    <% unless current_user.checkcomp(place) %>
      //Idの数だけマップを出力
        document.getElementById('todo-maps<%=i%>');
        var latlng = new google.maps.LatLng(<%=place.latitude%>,<%=place.longitude%>);

        map = new google.maps.Map(document.getElementById('todo-maps<%=i%>'),{
          center: {lat: <%=place.latitude%>, lng: <%=place.longitude%>},
          zoom: 18
        });
        marker = new google.maps.Marker({
          position: latlng,
          map: map
        });
    <%end%>
  <%end%>
}
</script>

Comments

[winterboum]

//Idの数だけマップを出力
の直後の
document.getElementById('todo-maps<%=i%>');
は不要では？

[ryota5656]

まさに必要ありませんでした。。。削除しました。