googleマップでタブメニューdisplay:none;で座標がずれたらこれで一発解決【超簡単な方法】

Googleマップをタブメニューに入れると座標がずれてしまった人へ・・・、これならバッチリ！

実際に上手くいった実例がこちら↓
http://www.k-sansui.net/access/

Googleマップをタブメニューの中に入れなければならない案件があったのですが、
以前からの知る人はしっている問題のようですね。

問題点は、
Googleマップの座標が左上にずれてしまうというもので、

まあ～はまりにはまりました。。
1日？2日？わかりませんが超はまりました。。

ネットで調べても、
部分的な情報だったり、
Jqueryかけるような技術が高い人向けだったりするので、
散々、試してみても何をやってもダメでした。

そんな、中
まぐれ当たりと言うか、

じーーーーーーーーーーーっと
script部分を眺めていたら見えてきた！！！

まぐれ？

どっちかわかりませんが。
とにかくタブメニュー内にgoogleマップを入れても座標がズレない方法を編み出しました！！

すみません、大げさですね。。反省。。

という訳で、
CSS側でdisplay:none;を使う方法ではなく
js（スクリプト）の方でやる方法で見事解決しました！！！！！！！

以下がその解決方法です。

まず、scriptがこちら↓　（tab_menu.jsなど適当に新規で作ってそこに入れてください。）

function seltab(bpref, hpref, id_max, selected) {
  if (! document.getElementById) return;
  for (i = 0; i <= id_max; i++) {
    if (! document.getElementById(bpref + i)) continue;
    if (i == selected) {
      //document.getElementById(bpref + i).style.visibility = "visible";
	  document.getElementById(bpref + i).style.display = "block";
      document.getElementById(bpref + i).style.position = "";
      document.getElementById(hpref + i).className = "open";
	  
    } else {
      //document.getElementById(bpref + i).style.visibility = "hidden";
	  document.getElementById(bpref + i).style.display = "none";
      document.getElementById(bpref + i).style.position = "absolute";
      document.getElementById(hpref + i).className = "close";
    }
  }
}

↑のscriptに関しての説明ですが、
実はこのscript↓あえてこれをコメントで残してあるんですが、

//document.getElementById(bpref + i).style.visibility = "visible";
//document.getElementById(bpref + i).style.visibility = "hidden";

↑この部分を、それぞれ

document.getElementById(bpref + i).style.display = "block";
document.getElementById(bpref + i).style.display = "none";

に変更したら上手くいきました。
（※visibility = “visible”のままだと、その場所にあるけど見えないだけなので
このタブメニューをフッターのすぐ手前とかにおいてあると、
フッターの下に大きな白い空白が出来たりするんです。

次に、さっき作ったtab_menu.jsをヘッダーなどで読み込みます。

●ワードプレスのオリジナルテーマのjsフォルダなどに入れてある場合は、こんな感じ

<?php wp_enqueue_script('tab_menu', get_bloginfo('template_url').'/js/tab_menu.js'); ?>

●普通のHTMLならこんな感じ

<script src="/js/tab_menu.js" type="text/javascript"></script>

スタイルシートCSSはこんな感じ

.tabheader .close {
  background-color: #f0f0f0;
  margin:0;
  white-space: nowrap;
  display:block;
  border-radius:10px 10px 0 0;
}
.tabheader .close a{
	color:#333;
	padding: 0.5em;
	display:block;
	border-radius:10px 10px 0 0;
	border:1px solid #ccc;
}
.tabheader .close a:hover{
	background:#e0e0e0;
	border-radius:10px 10px 0 0;
}
.tabheader .open {
  background-color: #555;
  margin:0;
  white-space: nowrap;
  display:block;
  border-radius:10px 10px 0 0;
}
.tabheader .open a{
	color:#fff;
	padding: 0.5em;
	display:block;
	border-radius:10px 10px 0 0;
	border:1px solid #ccc;
}
.tabheader .open a:hover{
	background:#777;
	border-radius:10px 10px 0 0;
}
.tabheader{
	overflow:hidden;
	width:100%;
	margin-top:20px;
}
.tabheader #head1{
	width:50%;
	float:left;
	text-align:center;
}
.tabheader #head2{
	width:50%;
	float:left;
	text-align:center;
}
#box1{
	padding:10px;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
}
#box2{
	padding:10px;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;	
}
#box1 p img{
	width:100%;	
}
#box2 p iframe{
	width:100%;	
}

※ちなみにこのCSSはリキッドでスマホ対応も考慮したレスポンシブなCSSで、マウスオーバーも設定しています。
いらない人は、余計な部分は外してください。

HTMLソースはこんな感じ

<div class="tabheader">
<div id="head1"><a href="javascript:seltab('box', 'head', 10, 1)">略地図</a></div>
<div id="head2"><a href="javascript:seltab('box', 'head', 10, 2)">グーグルマップ表示</a></div>
</div>

<div class="tabbody">
<div id="box1">
<p><img src="<?php bloginfo('template_directory');?>/images/42.gif" alt="地図" /></p>
</div>
<div id="box2">
<p><iframe height="500" marginheight="0" src="http://maps.google.co.jp/maps?hl=ja&amp;lr=lang_ja&amp;ie=UTF8&amp;q=%E5%B1%B1%E7%BF%A0&amp;fb=1&amp;gl=jp&amp;hq=%E5%B1%B1%E7%BF%A0&amp;hnear=0x353f24235e12dcbd:0xb7f518f62efec126,%E5%AE%AE%E5%B4%8E%E7%9C%8C%E9%83%BD%E5%9F%8E%E5%B8%82&amp;cid=0,0,11237685556500689074&amp;t=m&amp;vpsrc=6&amp;brcurrent=3,0x353efce4b5240103:0xb374753e2e8f74f0,0&amp;ll=31.785676,130.758591&amp;spn=0.145916,0.238266&amp;z=12&amp;output=embed&amp;iwloc=B" frameborder="0" width="695" marginwidth="0" scrolling="no"></iframe><br />
<small><a style="text-align: left; color: #0000ff" href="http://maps.google.co.jp/maps?hl=ja&amp;lr=lang_ja&amp;ie=UTF8&amp;q=%E5%B1%B1%E7%BF%A0&amp;fb=1&amp;gl=jp&amp;hq=%E5%B1%B1%E7%BF%A0&amp;hnear=0x353f24235e12dcbd:0xb7f518f62efec126,%E5%AE%AE%E5%B4%8E%E7%9C%8C%E9%83%BD%E5%9F%8E%E5%B8%82&amp;cid=0,0,11237685556500689074&amp;t=m&amp;vpsrc=6&amp;brcurrent=3,0x353efce4b5240103:0xb374753e2e8f74f0,0&amp;ll=31.785676,130.758591&amp;spn=0.145916,0.238266&amp;z=12&amp;source=embed&amp;iwloc=B">大きな地図で見る</a></small></p>
</div>
</div>

※↓この部分は、WPなのでこんなURLですが、もちろん普通にフルパスでも、相対パスでも大丈夫！

<p><img src="<?php bloginfo('template_directory');?>/images/42.gif" alt="地図" /></p>

こんなでもOK→　

<p><img src="http;//○○○/img/○○○.jpg" alt="地図" /></p>

　みたいな・・・。

実際に成功した、完成例はこちら！

こんな感じで、タブメニューにGoogleマップを入れても、
座標がずれることもなく実際に上手くいきました！！！！！！
http://www.k-sansui.net/access/

めでたしめでたし！！（＾＾）／