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; |
//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"; |
//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はこんな感じ
background-color: #f0f0f0; |
border-radius:10px 10px 0 0; |
border-radius:10px 10px 0 0; |
.tabheader .close a:hover{ |
border-radius:10px 10px 0 0; |
border-radius:10px 10px 0 0; |
border-radius:10px 10px 0 0; |
.tabheader .open a:hover{ |
border-radius:10px 10px 0 0; |
border-left:1px solid #ccc; |
border-right:1px solid #ccc; |
border-bottom:1px solid #ccc; |
border-left:1px solid #ccc; |
border-right:1px solid #ccc; |
border-bottom:1px solid #ccc; |
※ちなみにこのCSSはリキッドでスマホ対応も考慮したレスポンシブなCSSで、マウスオーバーも設定しています。
いらない人は、余計な部分は外してください。
HTMLソースはこんな感じ
< 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 > |
< p >< img src="<?php bloginfo('template_directory');?>/images/42.gif" alt="地図" /></ p > |
< p >< iframe height = "500" marginheight = "0" src = "http://maps.google.co.jp/maps?hl=ja&lr=lang_ja&ie=UTF8&q=%E5%B1%B1%E7%BF%A0&fb=1&gl=jp&hq=%E5%B1%B1%E7%BF%A0&hnear=0x353f24235e12dcbd:0xb7f518f62efec126,%E5%AE%AE%E5%B4%8E%E7%9C%8C%E9%83%BD%E5%9F%8E%E5%B8%82&cid=0,0,11237685556500689074&t=m&vpsrc=6&brcurrent=3,0x353efce4b5240103:0xb374753e2e8f74f0,0&ll=31.785676,130.758591&spn=0.145916,0.238266&z=12&output=embed&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&lr=lang_ja&ie=UTF8&q=%E5%B1%B1%E7%BF%A0&fb=1&gl=jp&hq=%E5%B1%B1%E7%BF%A0&hnear=0x353f24235e12dcbd:0xb7f518f62efec126,%E5%AE%AE%E5%B4%8E%E7%9C%8C%E9%83%BD%E5%9F%8E%E5%B8%82&cid=0,0,11237685556500689074&t=m&vpsrc=6&brcurrent=3,0x353efce4b5240103:0xb374753e2e8f74f0,0&ll=31.785676,130.758591&spn=0.145916,0.238266&z=12&source=embed&iwloc=B" >大きな地図で見る</ a ></ small ></ p > |
※↓この部分は、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/
めでたしめでたし!!(^^)/