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

解決済

質問者：chic_punk
質問日時：2010/10/14 19:46
回答数：1件

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

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

V2では、

こちらや、
http://oshiete.goo.ne.jp/qa/4513879.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>
-----------------------------------------------

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： yyr446
回答日時：2010/10/15 12:33

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 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>

- 0
- 件

通報する

この回答へのお礼

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

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

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

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

通報する

お礼日時：2010/10/18 16:17

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！