Bootstrap 2.0 × Google MAP API

Bootstrap ＞ 2系

max-width:100%;

　状態:- 　閲覧数:2,602 　投稿日:2012-01-19 　更新日:2014-05-12
レスポンシブサイトとGoogleMap APIとの相性
・具体的には、max-width:100%;と書いてあると、
・「Google MAP API V2」地図が表示されない
・「Google MAP API V3」地図は表示されるが、ストリートビューは表示されない


経緯メモ
・既存サイトに、「Bootstrap2.0」エンジン組む込んだら、「Google MAP API V3」ストリートビューが表示されなくなった
・犯人は、「bootstrap.css」
・jsではなく、cssが影響している理由は、「max-width:100%;」の影響
・一つ一つcssを外していった結果、ようやく判明したよ

「Google MAP API V2」の時は、地図部分にクラスを割り当て、max-width:100%;を強制回避したけど、
やっぱその方法しかないのかね。
それだと、レスポンシブじゃなくなるんだけど…。

横幅に応じて非表示対応

　閲覧数:1,079　投稿日:2012-01-03　更新日:2014-05-12
横幅に応じて非表示対応
・メディアクエリcssで、display:none;するだけ

レスポンシブの画面サイズによる画像サイズ自動変更は、max-width:100%;によって行なわれる
・例えば、img{width:600px;!important;}とかしていると機能しない

max-width:100%;で困るのは、
・「Google MAP API V2」地図が表示されなくなる
・GoogleADsenseなど、直接imgタグを触れない場合

GoogleADsenseに関しては、上位タグに「max-width:100%;」でイケる


分からないのは、max-width:auto;(多分この指定は出来ない)とか、
width:auto;とかの違い。


画面サイズを変えてうまくいかないときは、
大体、block;inline;の指定がうまくいっていないため。

画面サイズに寄って切り替えればうまくいくが(media-queries.cssとかで)、結構、メンドくさい。

ちゃんとやろうと思えば思うほど、一杯記述しなければいけなくなる。


スマホメインの人には、専用サイトで切り分けた方がいいと思われ。



1/20
レスポンシブで、下記解像度による表示の違いに凝ってみたのだが、
1024×768
1280×1024
imgタグに「max-width:100%;」ってやっても、
その上位タグに「max-width:100%;」ってやっても、
「tdタグ」「trタグ」「tableタグ」「「tableタグの上位タグ」に「max-width:100%;」ってやっても、
tableがあると、レスポンシブにならないのね。

テーブルは、レスポンシブには鬼門と思われ。

しょうがないので、テーブル止めたら、普通にレスポンシブになった





「Bootstrap, from Twitter」を利用する際、「current page」では白アイコンを利用する方法



類似度ページランキング
順位 ページタイトル抜粋 ％
1 Bootstrap 2.0 × Google MAP API 67
2 Twitter Bootstrap 2.0 47
3 Bootstrap v2.3.1 43
4 Bootstrap 2.0 → 3.1.1 43
5 Material Design 2014 年 42
6 Twitter Bootstrap 1.4 39
7 「Bootstrap v2.3.1」不具合 39
8 Bootstrap 3 39
9 Bootstrap 4 39
10 Bookmarks clean up 38
11 MediBang Paint 36
12 spacer.gif 35
13 Group Tabs 35
14 History Disabler 35
15 Save As MHT 0.1.3 34
16 Font Awesome 4.7.0 33
17 「Invalid property value.」遭遇事例一覧 33
18 「Illustrator」は「SVG」 出力可能 33
19 Font Awesome v5.0.8 33
20 さよならBootstrap 33
2026/9/29 21:17 更新
週間人気ページランキング ／ 9-22 → 9-28
順位 ページタイトル抜粋 アクセス数
1 Design 0 10
2 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 3
2 「東京都」のカラーコード取得は難しい | カラーコード(色) 3
2 RGBの種類 ／ ビットカラー | RGB(色) 3
2 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 3
2 Chromeブックマーク(ブラウザ) カテゴリー 3
2 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
2 FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 | Font Awesome(フォント) 3
2 ログイン 3
2 スキップリンク | アクセシビリティ(UI) 3
3 PNG画像透明化問題 | 画像 2
3 Uncaught Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/) | 4系(Bootstrap) 2
3 HTMLエディタ カテゴリー 2
3 ケルビン（kelvin）／ 記号K 2
3 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 2
3 RGB ⇔ Lab | 色変換(色) 2
3 レスポンシブ画像(レスポンシブ) カテゴリー 2
4 Chrome で右クリックから保存しようとするとフリーズする → フォルダーオプションで「別のプロセスでフォルダーウィンドウを開く」 | Google Chrome(ブラウザ) 1
4 Sleipnir | ブラウザ 1
4 これまで動作していたChrome拡張機能が期待通り動作しなくなったときは、最初に、Chrome を最新の状態へ更新してみます。 | Chrome 拡張機能 1
2026/9/29 5:05 更新