サイトのJavaScriptをちょっとだけ改良

時間が出来たので、サイト内の探訪記のJavaScriptをちょこっと改良してみました。


例えば、↓のページですが、
　　「咲-Saki-」舞台探訪-長野県内編　その１-
このページのJavaScriptで、今までこんな記述を使っていました。


if ((num == 0) || (num == 27) || (num == 28) || (num == 31) || (num == 32) || ((num > 34) && (num < 37))) {
　　var marker_field = document.getElementById('mark'+ num);
　　var fzoom = function() {
　　　　map.panTo(latlng);
　　　　f();
　　　　map.setZoom(16);
　　}
　　marker_field.onmousedown = fzoom;
}


さて、ここで冒頭の謎のif文ですが、その理由はページ内の『［地図で見てみる］』の箇所にあります。
スクリプトの最後の、
　　marker_field.onmousedown = fzoom;
は、地図内の各マーカに対して、『［地図で見てみる］』の箇所(ID)をクリックされた時の動作を設定しています。
一方、このページには、「咲-Saki-」の南信地方の清澄物件の記事だけが載っています。つまり、このページには南信地方（清澄）の分しか『［地図で見てみる］』のIDがありません。
そのため、『［地図で見てみる］』のIDを取得するメソッド、
　　var marker_field = document.getElementById('mark'+ num);
を全てのIDに対して実行した場合、このページに載っていない北信の鶴賀物件や南信の風越物件のIDが正常に取得出来ません。
そして、この正常に取得できなかったIDをマーカに設定すると、次のエラーが出てしまいます。





document.getElementById()メソッドが取得出来なかったIDは、オブジェクトがnull値となってしまい、マーカの生成時にエラーが起きてしまったわけですね。


それを回避するために使っているのが、前記のスクリプトの冒頭の謎のif文で、このページに存在するIDだけ選んでマーカに設定しているわけです。
何とも不恰好ですね（笑）　そして、各ページ毎に置かれたIDが違いますから、各ページ毎にスクリプトを別に用意する必要がある、というのも難点です。


これが今までの記述方法でした。
これを解消しようとして出た発想が「エラーが起きた事(オブジェクト==null)が分かるなら、それを組み込まなければいいじゃない？」、というもので、それを実装したのが次の記述です。


var marker_field = document.getElementById('mark'+ num);
if (marker_field != null) {
　　var fzoom = function() {
　　　　map.panTo(latlng);
　　　　f();
　　　　map.setZoom(16);
　　}
　　marker_field.onmousedown = fzoom;
}


これでスマートに記述出来るようになり、しかも各ページで共通のJavaScriptファイルで済むようになりました。
思いついてみると、ごく普通の発想で、むしろなぜ今まで面倒な事をしていたのかと反省しきりです。


以上、誰得？、の記事ですが、探訪記内のJavaScriptのお話でした。