質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2243閲覧

グーグルマップの表示・非表示の切替

shinoda

総合スコア75

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2015/09/07 03:14

お世話になります。

まず全体的な流れをざっくりと説明致します

ある店舗情報が入ったエクセルシートをphpのプログラムにドラッグ&ドロップすると、jsonファイルを吐き出し、そのjsonファイルをjavascriptでループ処理をし、jsonファイルに入った緯度・経度を基にグーグルマップに表示するというプログラムを作成しました。

ここからが質問事項なのですが、jsonファイルに入っている、イベントが始まる日、終わる日の項目があり、その日付が過ぎたら、グーグルマップ上から非表示という機能(データを削除ではない)を実装したいのですが、うまくいかず困っています。

条件分岐の条件をどのように記述して良いのかがわかっていません。(下記★印部分)

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

【作成中のコード】******
$(function() {
var data = new Array();
$.getJSON("array.json" , function(data) {
for( var i in data){
for( var j in data[i] ){
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(data[i]["M"], data[i]["N"]),
map: myMap,
});
attachMessage(myMarker, data[i]["J"]);
}
}
});
});


data[i]["H"] → イベントが始まる日
data[i]["I"] → イベントが終わる日

if(★ ){
google.maps.Marker#setVisible(true) → 表示されている Marker を表示にする
} else {
google.maps.Marker#setVisible(false) → 表示されている Marker を非表示にする
};

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

日時をDateクラスにして、普通に大なり小なりで判定できます。
Dateクラスには日時の文字列が渡せますので、jsonで返ってきた日付フィールドからDateクラスが生成できます。

投稿2015/09/07 08:57

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shinoda

2015/09/07 09:18

お世話になっております ご回答ありがとうございます。 下記のような感じで合っていますでしょうか? あまり知識がないもので全くの見当違いをしていたら、ご指摘ください。 data[i]["H"] → イベントが始まる日 data[i]["I"] → イベントが終わる日 ****************************** var date = new Date() if(date =< data[i]["H"]){ google.maps.Marker#setVisible(true) → 表示されている Marker を表示にする } else if (date >= data[i]["I"]) { google.maps.Marker#setVisible(false) → 表示されている Marker を非表示にする }; ******************************
退会済みユーザー

退会済みユーザー

2015/09/07 09:35

json取り込み時にDateクラスのインスタンスにしているなら、これで行けます。 この場合、 data[i]["H"] はDateクラスではないですよね? ブラウザのJavaScriptコンソールなどから以下を実行して比較してみると判りやすいかと思います。 > console.log(new Date() > new Date('2015/09/07 18:30:00')) true > console.log(new Date() > '2015/09/07 18:30:00') false
shinoda

2015/09/07 10:13

>json取り込み時にDateクラスのインスタンスにしているなら、これで行けます。 >この場合、 data[i]["H"] はDateクラスではないですよね? 申し訳ございません。私の知識不足のためご質問の全てを読み取ることができません。 実際に、jsonファイルの中身を記述します。(エクセルから渡ってきた値) *********** "H":"09-12-15","I":"09-13-15", *********** jsonファイルを配列に格納する際に、なにか加工をしなければならないということでしょうか?
退会済みユーザー

退会済みユーザー

2015/09/07 10:26

先に書かれていた var date = new Date() if(date =< data[i]["H"]){ の部分ですが、これはDateクラスと、文字列を比較しようとしているので、正しい結果が得られません。(型の違いは理解されていますか?) それを判って頂くために > console.log(new Date() > new Date('2015/09/07 18:30:00')) true > console.log(new Date() > '2015/09/07 18:30:00') false を書いてみました。 またjsonで返ってくる日付"09-13-15"では、Dateクラスの初期化ができないので、 Dateクラスが認識できる書式にする必要があります。 > console.log(new Date('09-13-15')) Date {Invalid Date} > console.log(new Date('2015-09-13')) Date {Sun Sep 13 2015 09:00:00 GMT+0900} jsonで返ってくる日付をDateクラスで認識できる書式にできれば、 var date = new Date() if(date =< new Date(data[i]["H"])){ で比較できるようになります。 ちなみに、if文で開始日と終了日を別々に判定されていますが、 if ((今日が開始日より後) && (今日が終了日より前)) { マークを表示 } // マークは元々定義されていないなら、消す処理は不要? になるかと思います。
shinoda

2015/09/07 10:30

ご丁寧に解説、迅速なご回答ありがとうございます。 ご回答を基に色々試してみますので、また不明点がでたらご質問させていただきます。 宜しくお願い致します。
shinoda

2015/09/11 06:07

お世話になっております。 あれからいろいろ調べてみましたが >jsonで返ってくる日付をDateクラスで認識できる書式にできれば、 上記の部分がかなり難しそうです。 更に調べる必要があり、時間がかかりそうなので一旦この質問はクローズしたいと思います。 ご回答有り難うございました。 別途質問することがあると思いますがどうぞ宜しくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問