GoogleMapAPI V3でマップの表示がずれる問題について

2010/10/14 19:46

このQ&Aのポイント

GoogleMapAPI V3のマップ表示での問題について教えてください。
マップを表示させるタブのクリック時に、表示がずれてしまう問題が発生します。
解決方法が分からず、お知恵を拝借できないでしょうか。

chic_punk
お礼率58% (17/29)

JavaScript
回答数1
ありがとう数3

みんなの回答 （1）
専門家の回答

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

ベストアンサー

yyr446
ベストアンサー率65% (870/1330)

2010/10/15 12:33 回答No.1

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/18 16:17

ありがとうございます！無事、解決しました！！このイベントが知れて良かったです。 google.maps.event.addListener(map,'tilesloaded',function() { もしよろしければ、こちらもご回答頂けますと幸いです。 http://okwave.jp/qa/q6258704.html

ログインすると、全ての回答が全文表示されます。