googlemap複数タブ切り替え 片方mapのマーカー表示されない

Question

こんにちは。わたしはプログラマーじゃなくてデザイナーなのですが
こちら大丈夫でしょうかしら。。
初めて投稿します！どなたかご教授下さるとうれしいです。
表題のブツを制作中で、かなり苦戦ましたが、切り替えおよび各マップの表示はうまく行ったのですが
2つめのタブのマーカーがどうしても表示されません。。

お手素ですが、以下のサンプルを参照頂けるでしょうか。
http://codepen.io/aki8933/pen/NGoOvp

たぶん for (var i = 0; i 以降の書き方に問題があるような気がするのですが、、
どう書いたらよいでしょうか？

■要件
見てのとおりなのですが以下となります。
・2つの別々のmapをそれぞれタブで切り替え
・独自マーカーは2種類あり
・マーカークリックで情報ウィンドウ表示
・ちなみにレスポンシブ

■試したこと
試したことというか、別の方法として
・axgmap.jsなどのプラグインの採用→片方のタブが表示されないなど表示不具合
・cssでタブきりかえ →googlemapのjsタブ切り替えが相性悪いのかな？と試行しましたが
高さが可変でそれぞれ内容異なりNG

以上、よろしくお願いします！！！

Answer 1

とりあえず気になったところは下記２点です。

○ map2 に追加するマーカーの画像パスが正しくない
○ createMaker でマーカーを追加するようにしていますが、map (１のほう）に追加するように指定している

具体的には下記箇所を修正してくださいな。

1. js 34行目～46行目 createMaker 関数は必要ないです。（別の箇所で定義しているので）
2. js 63行目、createMaker の第４引数は map → maps['#panel2']
3. js 72行目、createMaker の第４引数は map → maps['#panel2']
4. js 62行目、icons の画像パスは正しくない（画像が存在しない）
5. js 71行目、icons の画像パスは正しくない（画像が存在しない）

これらを修正したら、tab2 でも表示されました。
→ icons のパスは map1 と同じものを利用。

補足：
今回は、文法的にどうなの？という指摘はとりあえずおいておきますね。

補足２：
質問者様のご希望によりコード部分は削除しました。

Comments

[rurikabuto]

usk様 早速ありがとうございます！
わたしは、、、アホです、、改善されてます。

＞＞（表示されたくないとのことでしたら、コメントしてください）

大変勝手ながらソースコードは削除、またはアイコン画像パス部分を変更して
頂けるでしょうか。お手数おかけして申し訳ないです。

＞＞今回は、文法的にどうなの？という指摘はとりあえずおいておきますね。
はい！、、、ちなみにjsの基本的な部分以外にも、そもそも
htmlとjsの混在が文法的にどうなのということででしょうかね

[usk]

> そもそもhtmlとjsの混在が文法的にどうなのということででしょうかね

突っ込みどころというのは、Javascript の書き方、お作法などのお話ですね。
実際の業務に携わっていると、html と js が混在してしまうことはよくあることなので、それほどひどくなければ、個人的にはありかなーって思います。（良いか悪いかは別としてね）

[rurikabuto]

はい！！
なるほどー。お作法、、道のりは遠いですが、、精進します！
また、極限まできたらなにか質問してしまうかも知れませんが
その際は、どうぞよろしくお願い致します。
お時間いただき、ありがとうございました。