Bootstrap3のタブ切り替えでGoogleMapを利用した外部ファイル読み込むときに、地図のサイズ変更ができない
解決済
回答 1
投稿
- 評価
- クリップ 0
- VIEW 2,197
bootstrap3とjqueryのload()を使ってタブによって読み込む内容(htmlかphpファイル)を切り替えるページを作っています。
その読み込むファイルの一つにGooleMapAPIを使って地図を埋め込むhtmlファイルがあるのですが、この地図のサイズを変更することができなくて困っています。
具体的には、widthとheightを指定してもその数値が反映されず、bootstrapのグリッド内に地図を埋め込むdiv要素を入れてもそこからはみ出してしまいます。
上の画像のように、ブラウザでチェックしてみたところ、なぜか横300px、縦480pxという値が勝手に入っていて、これが上書き不可能であるために、サイズを変更できないものだと考えているのですが、
では、この数値はどこから指定されたもので、なぜ上書きできないのでしょうか？
また、本題として、この地図のサイズを変更するにはどのような解決策が考えられるでしょうか？
※> GoogleMAPとboostrapのタブ機能を連携するとすべて表示されないについての問題は、対象のタブの内容を読み込む前に別のタブコンテンツをすべてhide()することで一応解決している…と思います(が、もしかしたらこの部分がまだ不徹底のために、現在の状態に陥っているのでしょうか…)。
本体HTML HEAD部分
本体HTML BODY部分
読み込む地図のファイル(map.html)
もしかしたら、もっと根本的でシンプルな問題かもしれません。
しかし、初心者ながら色々と調べ試してみた結果、同じような事例も見つからずうまくいかなかったので、こちらで質問させていただきました。
よろしくお願いいたしますm(_ _)m
その読み込むファイルの一つにGooleMapAPIを使って地図を埋め込むhtmlファイルがあるのですが、この地図のサイズを変更することができなくて困っています。
具体的には、widthとheightを指定してもその数値が反映されず、bootstrapのグリッド内に地図を埋め込むdiv要素を入れてもそこからはみ出してしまいます。
上の画像のように、ブラウザでチェックしてみたところ、なぜか横300px、縦480pxという値が勝手に入っていて、これが上書き不可能であるために、サイズを変更できないものだと考えているのですが、
では、この数値はどこから指定されたもので、なぜ上書きできないのでしょうか？
また、本題として、この地図のサイズを変更するにはどのような解決策が考えられるでしょうか？
※> GoogleMAPとboostrapのタブ機能を連携するとすべて表示されないについての問題は、対象のタブの内容を読み込む前に別のタブコンテンツをすべてhide()することで一応解決している…と思います(が、もしかしたらこの部分がまだ不徹底のために、現在の状態に陥っているのでしょうか…)。
本体HTML HEAD部分
$(function(){
$("#mapTab").click(function(){
$("#tab2").show();
if($("#tab2").css("display") == "block"){
$("#tab1").hide();
$("#tab3").hide();
$("#tab4").hide();
$("#map-canvas").load("map.html");
$("#sample").load("sample.html");
}else{
alert("マップ読み込み失敗");
}
});
})
本体HTML BODY部分
<div class = "tab-pane fade" id = "tab2" style="display:none">
<div class = "row">
<div class = "col-md-6 col-xs-12" style="margin-top:20px;background-color: red">
<div id = "sample"></div>
</div>
<div class = "col-md-6 col-xs-12" style="margin-top:20px;background-color: yellow"> <div id = "map-canvas" class = "col-md-3" style="background-color:blue"></div>
</div>
</div>
</div>読み込む地図のファイル(map.html)
<script>
displayMap();
</script>
<div id = "map" style="width:500px;height:600px"></div>
<!-- このwidthとheightが適用されない！！ -->
<div id="markerlistbox">
<div class="markerlist_header">マーカーリスト</div>
<ul class="markerlist">
(省略)
</ul>
</div> もしかしたら、もっと根本的でシンプルな問題かもしれません。
しかし、初心者ながら色々と調べ試してみた結果、同じような事例も見つからずうまくいかなかったので、こちらで質問させていただきました。
よろしくお願いいたしますm(_ _)m
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.23%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2014/12/01 15:28
全く的外れなことを質問してしまい大変申し訳ありませんでした。
また、私はjqueryにまだまだ疎いため、そのような手法があることをご教示くださったことも含めまして、このたびはご回答いただき誠にありがとうございました。