display:noneのGoogleMapが表示したらズレる

管理画面で、地点を登録するときにGoogleMap上を直接たたいて緯度と経度を取得する仕組みを作成。
登録しなくてはならない地点が1点と2点のときがあって、1つの地図でその2つを登録できたらいいんだけど、よくわからないので1点目用と2点目用の地図を用意。
2点目まで登録するのはまれなので、普段は「display:none」でしまっておき、必要な時だけ「display:block;」で表示できるようにしていた。

このとき、「display:block」で表示したmapが左上にずれる。
……まぁ、わからないでもない。

調べていて参考にさせていただきましたー。

display:noneの要素にGoogle Mapsを貼り付ける

私の場合は、こんな感じかな

function HideCBox( boxid ) {
	   var target = document.getElementById(boxid);
	   if( target.style.display != "block" ) {
	      target.style.display = "block";
	      google.maps.event.trigger(map2, 'resize');
	      map2.setCenter(latlng2);
	      document.hidebutton.src = "files/close.gif";
	   }
	   else {
	      target.style.display = "none";
	      document.hidebutton.src = "files/open.gif";
	   }
	}

この

	      google.maps.event.trigger(map2, 'resize');
	      map2.setCenter(latlng2);

という部分です。
target.style.display = “block”;
の後です。前だと同じようにずれるー。
表示してから、位置の修正ってことですかね。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です