みんなの「教えて(疑問・質問)」にみんなで「答える」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>

投稿日時 - 2013-07-23 12:45:01

QNo.8188218

すぐに回答ほしいです

質問者が選んだベストアンサー

infoWindow.setContent()を利用して書き込むと、ちらついてしまうようですね。

google.mapの処理を追いかけてはいませんが、どうやら要素そのものを作成し直しているのか、一時非表示にして処理をしているのかわかりませんが、さらに、一旦スクリプトの処理が開放されているかして起こっているのではないでしょうか?


ご提示のコードでは、一つだけのinfoWindowを利用しているようですので、初期設定でcontent内に<div>や<span>などを作成しておいて、内容を書換える際は、google.mapのメソッドを利用せずに、直接その要素の内容を修正するようにすればちらつきは出なくなるようです。

ごく簡単なスクリプトでPCで確認しましたが、スマホでは確認していません。
(多分いけるのではないかと)

投稿日時 - 2013-07-23 21:42:48

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問