- ベストアンサー
カウントダウンを表示
Googleマップの複数マーカーでマーカーをクリックしたとき、 吹き出し(infowindow)内に、決められた時間からあと何時間何分何秒と カウントダウンを表示するにはajaxを使用してどうスクリプトを組めばいいのでしょうか。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- google map吹き出し
下記google mapをスマホで見ると吹き出しが頻繁に出たり消えたりして見づらいのですが 吹き出しは出しっぱなしでカウントダウンのみ動かす方法ありませんか。 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <style type="text/css"> div#map-canvas { position: absolute; width: 100%; height: 100%; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var geocoder, map, marker, infoWindow; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(35.710058, 139.810718); var mapDiv = document.getElementById('map-canvas'); var myOptions = { center: latlng, zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(mapDiv, myOptions); google.maps.event.addListener(map, 'click', function(e) { marker = new google.maps.Marker({ position: e.latLng, map: map, draggable: true, title: "Click Me!" }); if(infoWindow) infoWindow.close(); infoWindow = new google.maps.InfoWindow(); var targetDate = Date.parse('2014/07/07 00:00:00'); 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 ); if(infoWindow) infoWindow.setContent ( '七夕まで' + day + '日' + hour + '時間' + minute + '分' + second + '秒' ); },1000); infoWindow.open(map, marker); map.setCenter(e.latLng); }); }; google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html>
- ベストアンサー
- AJAX
- グーグルマップAPIで右クリックで吹き出し
お世話になっております。 グーグルマップAPIを使ってサイトを作成しています。 右クリックをして、吹き出しを出すにはどうしたらよろしいでしょうか？ 以下のようなスクリプトがあるのですが、全く反応しません。 google.maps.event.addListener(map, "rightclick", function() { infowindow.setContent(contentString); infowindow.open(map,marker); document.getElementById("result").innerHTML += "<br>rightclickイベント発生："+(new Date()); 上記ではなく、rightclickの部分をclickにすると動きますが、右クリックで動作させたいのです。 できれば、その吹き出しの中にフォームを作りたいと思っています。 よろしくお願い致します。
- 締切済み
- JavaScript
- グーグルマップの吹出しは複数可能？
グーグルマップを自分のサイトに設置しようとしています。 マーカーをクリックすると吹き出しが出ますが 他のマーカーをクリックすると吹出しが消えて２つ表示ができません。 吹出しでなくてもいいのですが 吹出し見たいのを複数常時表示することはできますか？ お忙しいところ是非教えていただければと思います。 よろしくお願いします。
- 締切済み
- HTML
- WordpressのGmapに吹き出しを付けたい
wordpressにACFを利用して埋め込んでいるGooglemapのピンにクリックで表示される吹き出しを付けたいのですが、うまくいきません。 しばらく前にwordpressのサポートでも質問したのですが回答を得られなかったのでかなり困っています。 状況としては、 「Advanced Custom Fieldsの全項目解説・公開側表示編集編」（http://blog.s-giken.net/253.html#googlemap） を参考に下記のように書きました。 記述場所はphpファイル内です。 <?php $name = get_field ( 'name' ); $map = get_field ( 'map' ); echo '<div id="map" style="width: 95%; height: 300px; margin:5px auto;"></div>'; echo '<span itemprop="hasMap"><script type="text/javascript">'; echo ' google.maps.event.addDomListener(window,"load",function(){'; echo ' var mapdiv=document.getElementById("map");'; echo ' var myOptions={zoom:15,center:new google.maps.LatLng(' . $map[lat] . ',' . $map[lng] . '),mapTypeId:google.maps.MapTypeId.ROADMAP,scaleControl:true};'; echo ' var map=new google.maps.Map(mapdiv,myOptions);'; echo ' var marker=[];'; echo ' var infowindow=[];'; echo ' marker[0]=new google.maps.Marker({icon:"http://maps.google.com/mapfiles/kml/paddle/red-stars.png",position:new google.maps.LatLng(' . $map[lat] . ',' . $map[lng] . '),map:map,title:"' . $name . '"});'; echo ' var markerCluster=new MarkerClusterer(map,marker);'; echo ' });'; echo '</script></span>'; ?> この状態でACF側で入力した住所をもとにマップ上に指定のマーカーを立てることはできているのですが、ここにクリックで表示される吹き出しを追加しようとしてもうまくいきません。 「マーカーがクリックされたら情報ウィンドウ（ふきだし）を表示する」（http://www.openspc2.org/reibun/Google/Maps/API/ver3/code/map/marker/0004/） や 「配列を使用してGoogleMapに複数のマーカと情報ウィンドウを表示する」（https://ghweb.info/post-2709.html） を参考にいろいろいじってみて、 google.maps.event.addListener(marker, "click", function() { infowindow[0]=new google.maps.InfoWindow({ content: "このコンテンツを表示します" }); infowindow.open(map, marker); }); みたいな感じのをecho' 'で挟んで追記すれば動くかなと試したのですが、どうもうまくいきません。 解決方法をご教授いただければ幸いです。
- ベストアンサー
- JavaScript
- googlemapの表示
http://ascii.jp/elem/000/000/424/424032/index-2.html を参考にして地図は表示できたのですがマーカーをクリックせず地図を表示した段階で ふきだしを表示するにはどのように書き換えればいいのでしょうか？ 制御しているのは google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); の箇所というのは判断できるのですがどのように変更すればいいものか教えてください。
- ベストアンサー
- JavaScript
- google mapに複数マーカーを設置する関数
google mapに複数のマーカーとそれに伴う吹き出しを作成しています。 マーカーの数は上下するのですが、大体30～40個くらいが設置される予定です。 ただできるだけjsのソースを少なくしたいと思っているため、ループでまとめて記述できないかと試行錯誤しています。 ちなみに現状は以下のように記述しています。 * * * * * * * * * * * * * * * * * * * * * * * * * var marker2 = new google.maps.Marker({ position: new google.maps.LatLng(座標), map: map, title: 'マーカー2' }); var contentString2 = '吹き出しテキスト'; var infowindow2 = new google.maps.InfoWindow({ position: new google.maps.LatLng(座標), content: contentString2 }); google.maps.event.addListener(marker2, 'click', function() { infowindow2.open(map,marker2); }); * * * * * * * * * * * * * * * * * * * * * * * * * この「2」の部分を各数字に変えてマーカー分記述していたのですが、 面倒で尚且つソースが非常に多くなるため困っています。 for関数でループさせてみようと思い作成してみたのですが、うまく動作しません。 ちなみに吹き出し内のコメントはすべて違う内容になるため、せめてgoogle.maps.event.addListenerの部分だけでも、と思っています。 javascriptは初心者で、上記のソースも色々調べた上で見よう見まねで作っています。 どなたか効率のよい方法を教えていただけますでしょうか。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- google maps 吹き出しカウントダウン
google maps api v3の情報ウィンドウの吹き出しの表示に、 添付画像のようなカウントダウンを表示したいのですが、 自分のレベルでは吹き出しに文字を表示することしかできません。 どなたか吹き出しの表示に添付画像のようなカウントダウンを表示する方法 知りませんでしょうか。
- ベストアンサー
- AJAX
- googleマップにajax
googleマップにajax、php、mysqlを使って複数マーカを表示したい場合 googleマップの地図をマウスで動かすごとにmysqlのSqlを実行しデータ を抽出してgoogleマップに表示しているのでしょうか。
- ベストアンサー
- AJAX
- グーグルマップのマーカー
グーグルマップに表示されたマーカーをクリックすると 吹き出しとか関係なくそのマーカーのもっている座標点に 地図の中心が移動するようにしたいのですが どのように記述するのでしょうか？
- 締切済み
- その他（プログラミング・開発）
- ブラウザの「戻る」を押しても有効なカウントダウン
ブラウザの「戻る」を押しても有効なカウントダウン PHPで取得した時間を使ってカウントダウンを表示させるプログラムに 挑戦中なのですが、今の知識で解決出来ない問題が出ているのでご質問させて 頂きました。 PHPで取得した時間が45秒だった場合、残り45秒からカウントダウンが 始まります。javascriptにこの「45」を読み込ませて、45秒から 1秒ずつリアルタイムに秒が減っていくという形です。 0秒が過ぎたら-1秒、-2秒と進んでいきます。 下記のスクリプトで、それが実現出来ました。 －－－－－－－－－－－－－－－－－－－－－－ <script type="text/javascript"> <!-- var phpsecond=<?php print date(s) ?>; var countSecond=60; var nowSecond=second; function countdown(){ document.getElementById('countdown').innerHTML=countSecond-nowSecond; nowSecond++; setTimeout('countdown()',1000); } //--> </script> </head> <body onload="countdown()"> －－－－－－－－－－－－－－－－－－－－－－－ ただ問題があって、ずっとこのページを見ている状態であれば 大丈夫なのですが、 ページを移動させた後、ブラウザの「戻る」でこのページに戻ると、 移動していた間の時間が止まってしまい、 ページを移動する直前の秒からカウントダウンが再開してしまいます。 これを何とか、ページに戻ってきた時にすぐ正しい秒を表示し直すように 命令したいのですが可能でしょうか？ 私なりに考えたのが、 PHPの時間とjavascript時間との差をjavascriptに変数で覚えさせれば 常に正しい時間が表示出来るのかなと思いました。 良い記述方法がございましたら、ご教授頂けますと幸いです。 ※それから、このページに戻った際、カウントダウンが0秒を切っていた場合は ページを自動的にリロードするようにしたいです。 宜しくお願い致します。
- ベストアンサー
- JavaScript
