カウントダウンを表示

質問

Googleマップの複数マーカーでマーカーをクリックしたとき、
吹き出し(infowindow)内に、決められた時間からあと何時間何分何秒と
カウントダウンを表示するにはajaxを使用してどうスクリプトを組めばいいのでしょうか。

回答No.1

fujillin · ベストアンサー

どういうシテュエーションかがよく理解できていませんが…

「決められた時間」がマーカーごとに違うとするなら、まず、その残り時間をajaxなどで取得する必要があります。
あるいはHTMLの出力時に、（可変）データとして埋め込んでおけばajaxの必要はなくなりますが、マーカーの数が非常に多い場合はajaxのほうが便利かもしれません。
あとはローカルのタイマーを利用してその残り時間をカウントダウンすればよさそう。

残り時間を取得するには、マーカー毎の基準時がどこかにデータ化されていて、それをもとに計算することになりますが、いずれにしろサーバー側での処理が必要になるので、使用する言語とデータの保存方法（データベースなど）にもよることになります。
スクリプトからのajaxリクエストは、普通に「ajax」で検索すれば方法は見つかると思います。

データを先に出力しておく方式をとるなら、ＨＴＭＬを読み込んだ時のローカルＰＣの時間を最初に取得しておいて、ページ表示からの経過時間とデータ（当初の残り時間）から表示すべき残り時間を計算するようにすればよいでしょう。
この方法の場合はajaxは不要ですが、HTMLの出力自体をサーバ側のプログラム（ＣＧＩなど）で行なうことになります。

マップのinfoWindowの制御方法やそのcontentの表示・変更方法については、googlemapsのapiのドキュメントに出ています。
https://developers.google.com/maps/documentation/javascript/reference#InfoWindow

カウントダウンタイマーの考え方は、検索すればたくさん見つかるはず。
何を最初のデータにするかによって、具体的な計算方法は若干変わる可能性がありますが、考え方はほぼ同じでいけるはずです。
（ローカルＰＣの経過時間だけを利用して、時刻の設定には頼らないロジックにしておく方がよいと思います。）
http://www.bing.com/search?srch=105&FORM=AS5&q=%e3%82%ab%e3%82%a6%e3%83%b3%e3%83%88%e3%83%80%e3%82%a6%e3%83%b3%e3%82%bf%e3%82%a4%e3%83%9e%e3%83%bc+javascript

後は、これらを組み合わせればできあがり？

あっと、あと、infoWindowが閉じられた時に、タイマーが自動的に停止するようにしておく必要がありそうに思います。
（そうでないと、無駄に動きっぱなしになる可能性がある）