Bootstrap 2.0 × Google MAP API

Bootstrap ＞ 2系

max-width:100%;

　状態:- 　閲覧数:2,321 　投稿日: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%;を強制回避したけど、
やっぱその方法しかないのかね。
それだと、レスポンシブじゃなくなるんだけど…。

横幅に応じて非表示対応

　閲覧数:949　投稿日: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
2025/12/31 16:37 更新
週間人気ページランキング ／ 12-24 → 12-30
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 50
2 デザイン変更 | Webデザイン(デザイン) 6
2 Bookmarks clean up | Chrome 拡張機能 6
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 4
3 Design 0 4
3 似顔絵ジェネレーター : 似顔絵メーカー ／ NIGAOE MAKER 4
3 RGB → 色相H … 最小値基準 × 図形 の考え方 | 色変換(色) 4
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 4
4 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 3
4 RGB ⇔ Lab | 色変換(色) 3
4 Material Design 2014 年 | Material Design(色) 3
4 色モデルイメージ図 | 色変換(色) 3
4 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 3
4 HLS ／ HSL 3
4 効果を打ち消すスタイルシート | CSS 3
4 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 3
4 StableDiffusionのweb版「DreamStudio」を使用してみた感想。それなりに楽しめましたが、課金してまで使用してみたいとは思いませんでした。 | AI画像生成 3
4 キャラクター無料着せ替えジェネレーター Dress up game ／ オンラインサービス | イラスト参考(デザイン) 3
5 「Google Chrome」で「This browser does not support WebGL」と表示される場合は、ハードウェアアクセラレーションに不具合がある可能性があるため、設定画面よりハードウェアアクセラレーションを一旦無効にしてみる | Google Chrome(ブラウザ) 2
5 これまで動作していたChrome拡張機能が期待通り動作しなくなったときは、最初に、Chrome を最新の状態へ更新してみます。 | Chrome 拡張機能 2
2025/12/31 1:01 更新