javascriptでのグーグルマップ表示

Question

お世話になります

あるCSVファイルから住所、店舗名、グーグルマップの吹き出しに表示するメッセージ、リンク先をjavascriptで読み込み、配列に格納し、表示したいのですがうまくいかなくて困っています。

CSVファイルの中にはいくつか条件分岐もあるので、その結果によりグーグルマップ上に表示される内容を変えたいと思っています。

あわせて、グーグルマップに表示される吹き出しの中身をある日付がきたら非表示などはできるのでしょうか？

初心者のため、説明文もうまく表現できていないとは思いますがどうぞ宜しくお願い致します。

可能ならばコードやサンプルサイトなどを添えていただけたら幸いです。

Answer 1

//個々の独立した変数で管理すると、全てのマーカーに処理をしたい時に面倒…
marker1 = new google.maps.Marker( {...} ); //1つ目のマーカー
marker2 = new google.maps.Marker( {...} ); //2つ目のマーカー
marker3 = new google.maps.Marker( {...} ); //3つ目のマーカー

//配列で管理すれば、ループ処理などで簡単に、全てのマーカーに処理を適用できる
markers = [] ;
markers[0] = new google.maps.Marker( {...} ); //1つ目のマーカー
markers[1] = new google.maps.Marker( {...} ); //2つ目のマーカー
markers[2] = new google.maps.Marker( {...} ); //3つ目のマーカー
オプション
Markerクラスのオプションオブジェクトに指定できる、主なプロパティを紹介します。
Markerクラスのオプション一覧
anchorPoint
Pointクラスを指定することで、マーカーのアンカーポイントを変更することができます。アンカーポイントとは、例えば、吹き出しをマーカーに付ける時の支点です。ややこしいのですが、何も指定しない場合は、その画像の一番上の真ん中が自動的に選択されます。これは0,0ではない点にご注意下さい。指定する場合は、画像の一番下の真ん中からスタートして、指定したX座標(→方向)、Y座標(↓方向)のピクセル数分だけ、支点が移動します。
指定例: anchorPoint: new google.maps.Point( 0 , -24 )
サンプル: [anchorPoint]を指定した例
animation
Animationクラスを指定することで、マーカーにアニメーション効果を付けることができます。
指定例: animation: google.maps.Animation.BOUNCE
サンプル: [animation]を指定した例
clickable
falseを指定すると、クリックすることができなくなります。マーカーにクリックイベントなどを指定することができません。

Comments

[shinoda]

お世話になっております。
ご回答有難うございます。

マーカーの件ありがとうございます。
参考にさせて頂きます。

今現在、そこまで作業は進んでおらず、csvファイルを読み込んで、配列に格納する部分でとまっています。

運用を考えると、もともとあるExcelファイルをそのままPHPExcelを使い読み込んで配列に格納したほうが良いのか？などを考えている段階です。

まず作業を進める方針が会っているのかもよくわからず質問させていただきました。
現状、想定しているのは

1）Excelファイル（CSV含む）PHPかJavaScriptで読み込み配列に格納する。
※　読み込み方についてもよくわかっていない

2）配列をループで回し、条件にあったものをグーグルマップに表示する処理をする。あわせて条件によって表示する吹き出しなどを変更する

すごいざっくりですが上記のような想定です。
説明を読んだだけでわかってしまいそうですが、初心者のため何から手を付け、どのように実装したら良いのかわかっていません。

以上、ご教授いただければ幸いです。

[piotcard]

function getCSVFile() {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
createArray(xhr.responseText);
};

xhr.open("get", "csv_test_file.csv", true);
xhr.send(null);
}
getCSVFile();

function createXMLHttpRequest() {
var XMLhttpObject = null;
XMLhttpObject = new XMLHttpRequest();
return XMLhttpObject;
}

function createArray(csvData) {
var tempArray = csvData.split("\n");
var csvArray = new Array();
for(var i = 0; i<tempArray.length;i++){
csvArray[i] = tempArray[i].split(",");
}
console.log(csvArray);
}
Ajaxを利用してCSVファイルを読み込んでいるコードになっています．

CSVはテキストデータなので文字列として扱い，splitメソッドを用いて，改行コードごとに区切って配列を作成します．
var tempArray = csvData.split("\n");
さらに，その配列の中身の文字列をカンマで区切り，レコードと項目の2次元配列を作成します．
var csvArray = new Array();
for(var i = 0; i<tempArray.length;i++){
csvArray[i] = tempArray[i].split(",");
}配列にすることで扱いやすくなるうえ，CSVファイルはexcelなどの表計算ソフトで簡単に出力でき，管理も用意なので，地図の座標なんかの管理には最適かと思います．

※CSVファイルの文字コードによっては文字化けが発生する場合があります．

追記
読み込んだデータの項目内にカンマ(，)や改行コードが混ざっている場合の対処方法について

カンマが入っている場合

CSVファイルを作成する際に\やバックスラッシュなどの文字を入れ，項目ごとの配列作成前に(\,)を別の文字にreplaceし，配列作成後に(\,)を元に戻す．

例
abc\,abc,1\,200

改行コードが入っている場合

レコードを区切る改行コードがCR+LFであった場合は，CR+LFによってレコード単位の配列を作成することが出来ます．

1
.split("\r\n");
レコードを区切る改行コードがLFで，項目内の改行コードがLFである場合はカンマ同様に￥やバックスラッシュなどの文字を挿入しておき，配列作成前後で置換する必要があります．

例
"abc\(LFによる改行)abc"

レコードを区切るための改行コードは，作成するソフトやOSによって差があるので，バイナリエディタで確認するか，文字コードを出力して確認して下さい．
また，データの送り手側と受け手側で，項目の記述方法について取り決めを行ったほうが確実かと思われます．
JavaScriptで配列をループを使って処理する場合、

for...in
for
ネイティブのArray.forEach()
jQuery.each()
Underscoreなどの _.each や _.mapなど
Lo-Dashの _.each や _.map など
for (var i = 0, i < arr.length; i++) {
process(arr[i]);
}

[shinoda]

お世話になっております。

ご回答されたものを参考にし配列に格納しました。
後はループ処理をし条件にあったものをグーグルマップ上に表示するという部分を実装したいと思います。

またなにか不明点がでた時にご質問させていただくかと思いますが、どうぞ宜しくお願い致します。