GoogleMapsに複数のマーカーを表示する

  • 投稿者:
  • カテゴリ:
このエントリーをはてなブックマークに追加

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では、なぜか、左上に余分なマーカーが一つ現れます。いろいろ、やってみましたが、直せませんでした。う〜ん、なんとかしたい。

こちらに続く→GoogleMapsに複数のマーカーを表示する Part2

このエントリーをはてなブックマークに追加

2004/02/13にMovableTypeでこのブログを始めてからカウンター日が経ちました。

公開記事数は記事数件で、日/記事数日に1エントリーのペースで記事を書いていることになります。