GoogleMapsにCSVファイルを読み込んで、複数のマーカーを表示させたくていろいろ試行錯誤した。サンプルのスクリプトも多数あるのですが、なかなか思うようなものが見つからない。見つけ方が悪いのか？そんな中、やっと、やりたいことができそうなものを見つけられました。
参考にしたのはこちら→「テキストファイルの取得 - 外部ファイルの読み込み - Google Maps入門」
多少の手を加えて高田馬場グルメに設置しました。
ところが、やっぱり、スムーズにはいきません。マーカーが全部表示されない。MovableTypeで書き出しているCSVファイルがきちんと処理されていない感じです。CSVファイルがきちんとsplitされていない？まず、改行コードでsplitされているところが処理されていない感じなので、script内のsplitするところの改行コードの指定を変更してみる
// 元々は"¥n"でsplitするようになっている。
var lines = data.split("¥n");
// 他のサイトを参考に下記のように修正。
var CR = String.fromCharCode(10);
var lines = data.split(CR);
これで無事に表示されるようになりました...。と、思ったら、Internet Explorerでは表示されてないではないですか。高田馬場グルメはGoogle Analyticsのデータをみる限り、アクセスの6割程度はInternet Explorerからのアクセスです。さすがにまずかなと思い、また、試行錯誤です。
MovableTypeで書き出されたCSVファイルをダウンロードして、いろいろと手を加えてみる。特にMTで書き出されると、無駄な改行や行ができるのでそれを削除してみる。しかし、改善される気配なし。どうしたものかと思っていたら、ふと、思いついたことが。CSVを処理する際、まず、各行を切り分けて、さらに行ごとを","で切り分けて、「北緯／東経／カテゴリーID／情報ウィンドウのHTML」を取り出すようになってます。
//データを","でsplitするようになっている。
var vals = lines[i].split(",");
これを使って「"改行コード"ではなく、"特定の文字"を使って各行を切り出すようにすればいいんじゃない。」と思いさらに修正。
// 最初に修正したもの。
var CR = String.fromCharCode(10);
var lines = data.split(CR);
// 改行を";"でsplitするように修正。
var lines = data.split(";");
修正してチェックしてみると...。うまくいきました。なんとか解決。
でも、本当のところは完全には解決されていません。Internet Explorerでは、なぜか、左上に余分なマーカーが一つ現れます。いろいろ、やってみましたが、直せませんでした。う〜ん、なんとかしたい。