質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

解決済

3回答

4686閲覧

GoogleMAPとboostrapのタブ機能を連携するとすべて表示されない

hideo

総合スコア29

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

2クリップ

投稿2014/10/20 07:33

こんにちは。

現在、boostrap3のタブ機能(tab1,tab2)を使用し、以下のように表示するページを考えています。

tab1 → カレンダー
tab2 → 地図

実装すると、tab2に地図を表示すると以下のように地図をすべて表示しません。

![イメージ説明]WIDTH:600

ただ、ブラウザのサイズを少し変更すると地図は表示されます。また、

tab1 → 地図
tab2 → カレンダー

にすると問題なく表示されます。

上記のようにtab2に地図を表示したときに最初から表示するにはどうしたらいいものか悩んでいます。もし、ご存じの方がいらっしゃいましたらご教授お願いいたします<(_ _)>

ソースコードです。

lang

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="components/bootstrap3/css/bootstrap.css"> 6 <link rel="stylesheet" href="css/calendar.css"> 7 8 <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 9 <style> 10 #map-canvas{ 11 height:400px; 12 max-width:none; 13 } 14 15 16 </style> 17 18 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 19 <script> 20 function initialize() { 21 var myLatlng = new google.maps.LatLng(34.6894052, 135.4992158); 22 var mapOptions = { 23 zoom: 17, 24 center:myLatlng 25 }; 26 27 var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 28 var marker = new google.maps.Marker({ 29 position: myLatlng, 30 map: map, 31 title: 'Hello World!' 32 }); 33 } 34 google.maps.event.addDomListener(window, 'load', initialize); 35 </script> 36 37</head> 38<body> 39<div class="container"> 40 41 <ul class="nav nav-tabs"> 42 <li class="active"><a href="#tab1" data-toggle="tab">予定</a></li> 43 <li><a href="#tab2" data-toggle="tab">地図</a></li> 44 </ul> 45<!-- / タブ--> 46<div id="myTabContent" class="tab-content"> 47 <div class="tab-pane fade in active" id="tab1"> 48 <div class="page-header"> 49 <center> 50 <div class="btn-group"> 51 <button class="btn btn-mini btn-primary" data-calendar-nav="prev"><< 前へ</button> 52 <button class="btn btn-mini" data-calendar-nav="today">今日</button> 53 <button class="btn btn-mini btn-primary" data-calendar-nav="next">次へ >></button> 54 </div><!--btn-group--> 55 56 <div class="btn-group"> 57 <button class="btn btn-mini btn-warning active " data-calendar-view="month">月</button> 58 <button class="btn btn-mini btn-warning " data-calendar-view="week">週</button> 59 <button class="btn btn-mini btn-warning " data-calendar-view="day">日</button> 60 </div><!--btn-group--> 61 </center> 62 <h3></h3><!--見出し 年月--> 63 </div><!--page-header--> 64 65 <div class="row"> 66 <div class="span12"><div id="calendar"></div><!--calendar--></div><!--span12--> 67 </div><!--row--> 68 69 70 <script type="text/javascript" src="components/jquery/jquery.min.js"></script> 71 <script type="text/javascript" src="components/underscore/underscore-min.js"></script> 72 <script type="text/javascript" src="components/bootstrap3/js/bootstrap.min.js"></script> 73 <script type="text/javascript" src="components/jstimezonedetect/jstz.min.js"></script> 74 <script type="text/javascript" src="js/language/ja-JP.js"></script> 75 <script type="text/javascript" src="js/calendar.js"></script> 76 <script type="text/javascript" src="js/app.js"></script> 77 78 <script type="text/javascript"> 79 var disqus_shortname = 'bootstrapcalendar'; // required: replace example with your forum shortname 80 (function() {;cript'); dsq.type = 'text/javascript'; dsq.async = true; 81 dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; 82 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); 83 })(); 84 </script> 85 86 87 </div><!--tab1--> 88 <div class="tab-pane fade" id="tab2"> 89 90 <div id="map-canvas"></div> 91 </div><!--tab2--> 92</div><!--myTabContent--> 93 <a href="http://localhost/cake/schedule/regist"> <button type="button" class="btn btn-default">新規登録</button></a> 94</div><!--container--> 95</body> 96</html> 97

bootstrap3を使っています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

コメントが遅れてしまい申し訳ありませんでした!

無事に、tabを使って無事に表示できました!本当に助かりました!
ありがとうございました!

投稿2014/10/23 09:00

hideo

総合スコア29

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

早速のご回答ありがとうございます。
タブの切替時に初期化の処理ですが、おそらくしているとは思います。
未熟なためしているといいきれなくて申し訳ありません。

大変申し訳ありません。タブの切替時ということは

<div class="tab-pane fade" id="tab2"> のあたりに、google.maps.event.triggerの命令をいれるということでしょうか?

ちんぷんかんぷんな質問をして申し訳ありません。

投稿2014/10/21 08:00

hideo

総合スコア29

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TaMaMhyu

2014/10/21 08:11

回答に、参考になりそうなサイトを追記しました。
guest

0

ベストアンサー

確認はしていませんが、2番目のタブに切り替えるタイミングで初期化的な処理が必要だったりしないでしょうか?

タブの切り替え時に、google.maps.event.triggerresizeを使用する必要がありそうです。

このサイトが参考になるでしょうか?
http://www.bootply.com/102479

投稿2014/10/20 07:58

TaMaMhyu

総合スコア1356

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TaMaMhyu

2014/10/21 08:15

サイズが合わない理由は、非表示のタブの中はサイズが本来のものとは異なるため、そのままサイズを参照されるとそうなってしまうということだと思います。 これはCSSを動的に切り替える物全般で同じような事象が発生すると思います。サイズが正しい状態になってから、それを反映するという手順が必要になります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問