google maps 吹き出しカウントダウン

質問

google maps api v3の情報ウィンドウの吹き出しの表示に、
添付画像のようなカウントダウンを表示したいのですが、
自分のレベルでは吹き出しに文字を表示することしかできません。
どなたか吹き出しの表示に添付画像のようなカウントダウンを表示する方法
知りませんでしょうか。

回答No.1

LancerVII · ベストアンサー

こんにちは。

以下のような感じになると思います。
以下のスクリプトの場合、markerStartというマーカーを選択するとinfoWindow1が開きます。
setIntervalを利用して1秒ごとにinfoWindow1のcontent(内容)を再表示しています。

var infoWindow1 = new google.maps.InfoWindow ({
content: '',
positon: centerLatLng
});
google.maps.event.addListener ( markerStart, 'click', function() {
infoWindow1.open ( map, markerStart );
});

//　きもとなるのは以下の部分
var targetDate = Date.parse('2013/07/07 00:00:00');
window.setInterval ( function() {
var now = new Date().getTime();
var diff = targetDate - now;
var day = Math.floor ( diff / 86400000 );
diff -= day * 86400000;
var hour = Math.floor ( diff / 3600000 );
diff -= hour * 3600000;
var minute = Math.floor ( diff / 60000 );
diff -= minute * 60000;
var second = Math.floor ( diff / 1000 );
// google.maps.InfoWindow#setContentで内容を設定する
infoWindow1.setContent ( '七夕まで' + day + '日' + hour + '時間' + minute + '分' + second + '秒' );
},1000);

お礼

ありがとうございます。
非常に参考になります。

回答No.2

fujillin

すでに回答が出ていますが…

どこかで見た内容だと思ったら、数ヶ月前にまったく同様の質問がありましたので、少しはご参考になるかと。
okwave.jp/qa/q8007055.html

たまたまなのか、ハンドル名も似ているようで…