JQueryで複製した投稿フォームで、GoogleMap上に任意でマーカーを落としたい

Question

前提・実現したいこと

Ruby on Railsを使って作った投稿フォームを、JQueryで複製して複数投稿をできるものを作っています。
投稿フォームの複製はできているのですが、複製されたフォームでGoogleMap上に任意でマーカーを落とせるようにしたいです。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read property 'setCenter' of undefined

該当のソースコード

・・・
<!-- 投稿フォーム -->
<% j = 0 %>
<%= c.fields_for :travelogues do |t| %>
 <!--　Jqueryで複製されるフォーム部分  -->
 <div class="form-block" id="form-block">
  <input name="del" type="button" value="この投稿を削除する" class="del del-button edit-form btn btn-md btn-danger ">
  <table class="table">
   <tr>
    <th class="show-th"><%= t.label "本文",class:"th-font" %></th>
    <td><%= t.text_area :body, name:"body", class:"form-control" %></td>
   </tr>
   <tr>
    <th rowspan="2" class="show-th">
     <%= t.label :address, "スポット名(Google Mapで検索)", class:"th-font" %>
    </th>
    <td>
     <%= t.text_field :address, placeholder: "スポット名を入力", name:"address", id:"address_#{j}" %>
     <input name="onclick" onclick='codeAddress("<%= j %>")' type="button", value="検索"></input>
    </td>
   </tr>
   <tr>
    <td colspan="2">
     <div name="map" id="map_<%= j %>" style="height: 300px; width: 80%;"></div>
    </td>
   </tr>
  </table>
  <input type="button" value="投稿を追加する" class="add edit-form btn btn-md btn-danger">
 </div>
<% end %>
・・・

// 動的に投稿フォームを追加する用
let idNo = 1;

// class="add"がクリックされたらフォームをクローンする
$(document).on("click", ".add", function () {
	// 投稿削除のボタンを表示させる
	$("input[name=del]").removeClass("del-button");
	$(this).parent()
			// フォームをコピー
			.clone(true)
			// idを削除
			.removeAttr("id") 
			// 新たにidを付与
		    .find("input[name=body]")
		    .attr("id", "body" + idNo)
		    .end()
                    .find("[name=map]")
		    .attr("id", "map_" + idNo)
		    .end()
		    .find("input[name=onclick]")
		    .attr("onclick", "codeAddress(" + idNo + ")")
		    .end()
		    .find("input[name=address]")
		    .attr("id", "address_" + idNo)
		    .end()
		    // 親要素の後にinsert
			.insertAfter($(this).parent());
			// ID番号加算
		    idNo++;
});
// class="del"がクリックされたらフォームを削除
$(document).on("click", ".del", function () {
	// 2ヵ所で使うので選択された親要素を変数targetに格納
	var target = $(this).parent();
	// 変数targetの親要素下の要素数が1以下だったら
	// 変数targetを削除
	if(target.children().length > 1){
	target.remove();
	}
});

let maps = [] //変数の定義
let geocoder //変数の定義

function initMap(){ //最初にGooglemapを表示する時のコールバック関数
  geocoder = new google.maps.Geocoder() //GoogleMapsAPIジオコーディングサービスにアクセス
  if(document.getElementById('map_0')){ //'map'というidを取得できたら実行
    // 地図を複数表示させるためfor文でループ
    for (var i = 0; i < 10; i++) {
      maps[i] = new google.maps.Map(document.getElementById('map_' + i), { //'map'というidを取得してマップを表示
        center: {lat: 35.6594666, lng: 139.7005536}, //最初に表示する場所（今回は「渋谷スクランブル交差点」が初期値）
        zoom: 15, //拡大率（1〜21まで設定可能）
      });
    }
  }else{ //'map'というidが無かった場合
    for (var i = 0; i < 10; i++) {
      maps[i] = new google.maps.Map(document.getElementById('show_map_' + i), { //'show_map'というidを取得してマップを表示
        center: {lat: gon.lat[i].latitude, lng: gon.lng[i].longitude}, //controllerで定義した変数を緯度・経度の値とする（値はDBに入っている）
        zoom: 15, //拡大率（1〜21まで設定可能）
      });
      marker = new google.maps.Marker({ //GoogleMapにマーカーを落とす
        position:  {lat: gon.lat[i].latitude, lng: gon.lng[i].longitude}, //マーカーを落とす位置を決める（値はDBに入っている）
        map: maps[i] //マーカーを落とすマップを指定
      });
    }
  }
};
function codeAddress(j){ //検索ボタンを押した時のコールバック関数
  // ここは引数を渡すだけでループさせない
  let inputAddress = document.getElementById('address_' + j).value; //'address'というidの値（value）を取得
  geocoder.geocode( { 'address': inputAddress}, function(results, status) { //ジオコードしたい住所を引数として渡す
    if (status == 'OK') {
      console.log(results[0].geometry.location)
      maps[j].setCenter(results[0].geometry.location); //検索値に最も近い結果の緯度・経度
      let marker = new google.maps.Marker({
          map: maps[j], //マーカーを落とすマップを指定
          position: results[0].geometry.location //マーカーを落とす位置を決める
      });
    } else {
      alert('該当する結果がありませんでした');
    }
  });
};

試したこと

console.logで見ると、複製されたフォームでも緯度・経度の取得はできていました。

補足情報（FW/ツールのバージョンなど）

・Ruby
Rails 5.2.4.1

Comments

[Lhankor_Mhy]

コードを拝見する限り、なにかのフレームワークを使っていると思いますが、それを質問に記述し、場合によってはタグの変更を検討してください。

もし、フレームワークが関係のない問題であるならば、HTMLをフレームワークからの出力物に差し替えてください。

[Lhankor_Mhy]

「console.logで見ると」とのことですが、ご提示のコードにはありませんでした。
どの場所で何を見た結果か、ご提示いただけますか？

[Lhankor_Mhy]

「投稿フォームをJQueryで複製して複数投稿をできる」とのことですが、私が見た限りご提示のコードではその部分が漏れているように感じられました。複製している部分をお示しください。

[admj]

フレームワークの記述、console.logのコード、Jqueryでの複製コードを追記しました。

Answer 1

とりあえず$(document).on("click", ".add", function () { の中でマップの定義をしていないので追加されたマップは動かないかもしれませんね。少なくともmapsにインスタンスは入っていないし、追加はできないでしょう。

Answer 2

自身で色々調べて試していたら、ご返信がかなり遅くなってしまいました…すみません。
お二方のご回答を参考にして、フォームを複製した際にMapクラスのインスタンスを再作成することで解決できました！
ありがとうございました！

Answer 3

不明の部分が多いのでカンで答えますが。

<input name="onclick" onclick='codeAddress("<%= j %>")' type="button", value="検索"></input>

とあり、

function codeAddress(j){ //検索ボタンを押した時のコールバック関数
//...
      maps[j].setCenter(results[0].geometry.location); //検索値に最も近い結果の緯度・経度
//...
};

とあります。
ここで、jは必ず文字列ですが、mapsは配列ですから、添え字は数値である必要があります。
要素にアクセスできていないのではありませんか？

Comments

[admj]

ご回答ありがとうございます！
不明部分が多くすみません…
理解できなくて申し訳ないのですが、jにはHTML側で数値を定義しているため、数値を渡せていると考えているのですが、いかがでしょうか？

[Lhankor_Mhy]

私はrailsについて素人なので逆に教えていただきたいのですが、
j = 0
の時に、
onclick='codeAddress("<%= j %>")'
というテンプレートを展開すると、
onclick='codeAddress("0")'
と出力されるのではないかと思うのですが、違うのですか？

[admj]

仰る通りで、j=0の場合はonclick='codeAddress("0")'になります。
なので、maps[j]はmaps[0]となっていて数値を渡せていると思っているのですが…

[Lhankor_Mhy]

いえ、その場合、maps[j]はmaps["0"]になります。
JavaScriptでは、0 と "0" は別のものです。
Rubyでは数値と文字列の区別をしないのですか？

[Lhankor_Mhy]

ちょっと調べてみました。
Rubyでは、添え字に整数以外の値を使うと、整数に暗黙の型変換をするようですね。

JavaScript では配列もオブジェクトのため、添え字の値が整数ではない場合、文字列などに暗黙の型変換をして、オブジェクトのアクセサとみなされます。つまり、arr["prop"] は、arr.prop と同義なんです。

[admj]

理解不足で何度もすみません…
maps[j]のjには整数が入っているのに、その整数に沿ってmapsの配列から地図を持って来れないのでしょうか？
(j=0の場合、maps[0]、j=1の場合maps[1]を持ってくる等)

[Lhankor_Mhy]

>maps[j]のjには整数が入っているのに、

jに整数が入っているなら、できます。
ですが、現在のコードではjには文字列が入っているはずなので、できません。

[Lhankor_Mhy]

というか、コメントでできるできないを議論してても始まらないので、試してみた方が早いのではありませんか？

[admj]

ありがとうございます！
試してはみたのですがうまくいかず、、、また自分で色々やってみます！

[Lhankor_Mhy]

試してみた、というのは、

onclick='codeAddress("<%= j %>")'
↓
onclick='codeAddress(<%= j %>)'

ですよね？
上手くいかないまでも、エラーメッセージの内容は変わりませんでしたか？

[admj]

仰る通りです！
そのようにやったのですが、同じエラーメッセージが出てしまってます。
（Cannot read property 'setCenter' of undefined）

[Lhankor_Mhy]

うーん、そうすると、私が何か勘違いをしているのでしょうね……
お役に立てず申し訳ありません。

[admj]

いえ、とんでもないです。
ご丁寧にありがとうございます！

[Lhankor_Mhy]

あと、考えられそうなのは、フォームを複製した時にGoogleマップを作り直さず、maps を更新していないとか、その辺でしょうか……？