ここから本文です

htmlでタブページをcssのみで実装し、中身にgooglemap apiを使った 地図を表示さ...

oba********さん

2020/2/715:11:04

htmlでタブページをcssのみで実装し、中身にgooglemap apiを使った
地図を表示させたいのですが、表示されずに困っています。

タブページを使わなければ問題なく地図が表示されているのですが、
参考サイトからタブ表示部分をコピペし、内容に地図を配置すると
地図だけ表示されず、困っています。

htmlコード
<div class="tab_wrap">
<input id="tab1" type="radio" name="tab_btn" checked>
<input id="tab2" type="radio" name="tab_btn">
<input id="tab3" type="radio" name="tab_btn">

<div class="tab_area">
<label class="tab1_label" for="tab1">tab1</label>
<label class="tab2_label" for="tab2">tab2</label>
<label class="tab3_label" for="tab3">tab3</label>
</div>
<div class="panel_area">
<div id="panel1" class="tab_panel">

<div id="map"></div>
<script src="js/user_map.js"></script>
<script src="//maps.googleapis.com/maps/api/js?APIキー&callback=initMap"></script>

</div>
<div id="panel2" class="tab_panel">
<p>panel2</p>
</div>
<div id="panel3" class="tab_panel">
<p>panel3</p>
</div>
</div>
</div>


参考にしたサイト
https://boel.jp/tips/vol86_tabselect.html

閲覧数:
12
回答数:
1
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

ybb********さん

2020/2/716:56:34

>・・・・地図だけ表示されず・・・・・・・・・・

<div id="map"></div>
<script src="js/user_map.js"></script>
<script src="//maps.googleapis.com/maps/api/js?APIキー&callback=initMap"></script>
の部分の記述に問題がありそうですね

ご参考に↓
https://developers-dot-devsite-v2-prod.appspot.com/maps/documentati...
https://boel.jp/tips/vol86_tabselect.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.tab_wrap{width:500px; margin:80px auto;}
input[type="radio"]{display:none;}
.tab_area{font-size:0; margin:0 10px;}
.tab_area label{width:150px; margin:0 5px; display:inline-block; padding:12px 0; color:#999; background:#ddd; text-align:center; font-size:13px; cursor:pointer; transition:ease 0.2s opacity;}
.tab_area label:hover{opacity:0.5;}
.panel_area{background:#fff;}
.tab_panel{width:100%; padding:80px 0; display:none;}
.tab_panel p{font-size:14px; letter-spacing:1px; text-align:center;}

#tab1:checked ~ .tab_area .tab1_label{background:#fff; color:#000;}
#tab1:checked ~ .panel_area #panel1{display:block;}
#tab2:checked ~ .tab_area .tab2_label{background:#fff; color:#000;}
#tab2:checked ~ .panel_area #panel2{display:block;}
#tab3:checked ~ .tab_area .tab3_label{background:#fff; color:#000;}
#tab3:checked ~ .panel_area #panel3{display:block;}

#map{ width:500px; height:300px; }
</style>
</head>
<body>
<div class="tab_wrap">
<input id="tab1" type="radio" name="tab_btn" checked>
<input id="tab2" type="radio" name="tab_btn">
<input id="tab3" type="radio" name="tab_btn">

<div class="tab_area">
<label class="tab1_label" for="tab1">tab1</label>
<label class="tab2_label" for="tab2">tab2</label>
<label class="tab3_label" for="tab3">tab3</label>
</div>
<div class="panel_area">
<div id="panel1" class="tab_panel">
<div id="map" style="width:400px; height:300px;"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap"
async defer></script>
</div>
<div id="panel2" class="tab_panel">
<p>panel2</p>
</div>
<div id="panel3" class="tab_panel">
<p>panel3</p>
</div>
</div>
</div>
</body>
</html>

この回答は投票によってベストアンサーに選ばれました!

あわせて知りたい

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる