こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

GoogleMapAPI V3 にて、マップの表示がずれてしまいます。

GoogleMapAPI V3 にて、マップの表示がずれてしまいます。

Google Map を表示させるタブをクリックすることで、
下記ソースの「id="gmap"」の箇所を display :block で表示させるようにしているのですが、
その際に、マップの表示がくずれてしまいます。
(もちろん「id="gmap"」を初期表示としていた場合はくずれません)

V2では、

こちらや、
http://okwave.jp/qa/q4513879.html

こちらで
http://d.hatena.ne.jp/nitoyon/20050917/p2

解決出来たのですが、V3での解決方法が分かりません。。

どなたかご教授願えないでしょうか。
よろしくお願いいたします。

-----------------------------------------------
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" charset="utf-8"></script>
<script type="text/javascript">
var latlng = new google.maps.LatLng(lat, lng);
var mapOptions = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
</script>
</head>
<body>

~略~

<--! 写真を表示させるタブ -->
<div id="photo" style="display: block;">

~略~

</div>
<--! /写真を表示させるタブ -->

<--! Google Map を表示させるタブ -->
<div id="gmap" style="display: none;">

~略~

<div id="inner">
<div id="map_canvas" style="width:600px; height:400px;"></div>

~略~

</div>
</div>
<--! /Google Map を表示させるタブ -->

</body>
-----------------------------------------------

投稿日時 - 2010-10-14 19:46:14

QNo.6250162

すぐに回答ほしいです

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

GoogleMapAPI V3は、map表示が完了する前に、<div>ボックスを非表示に
してしまうとおかしくなります。
やはり、フラグを一つ設けて、マップタイルロード完了のイベントで、
display:noneにするしかないかと...
GoogleMapAPI V2 の方を使っていても、支障は無いと思います。

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Google Maps V3で地図を表示する</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var disp_flag=true;
google.maps.event.addDomListener(window, 'load', function() {
 var mapdiv = document.getElementById("map_canvas");
 var myOptions = {
       zoom: 16,
       center: new google.maps.LatLng(35.686773, 139.68815),
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       scaleControl: true
    };
 var map = new google.maps.Map(mapdiv, myOptions);
 google.maps.event.addListener(map,'tilesloaded',function() {
  if(dispflg){
   mapdiv.style.display="none";
   disp_flag=false;
  }
 });
});
function mapshow(){
 document.getElementById("map_canvas").style.display="block";
}
</script>
</head>
<body>
<button type="button" onclick="mapshow();">地図表示</button>
<div id="map_canvas" style="width:600px;height:400px;"></div>
</body>
</html>

投稿日時 - 2010-10-15 12:33:24

お礼

ありがとうございます!
無事、解決しました!!

このイベントが知れて良かったです。
google.maps.event.addListener(map,'tilesloaded',function() {

もしよろしければ、こちらもご回答頂けますと幸いです。

http://okwave.jp/qa/q6258704.html

投稿日時 - 2010-10-18 16:17:21

ANo.1

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

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

回答(1)

あなたにオススメの質問