BootstrapとGoogle Map Apiの干渉

【事象】
Bootstrap（v2.3）を使用したページに、jQuery gMap v3（http://www.smashinglabs.pl/gmap）を使用してGoogle Mapを表示したところ、コントロール画像が表示されない。

どうやら、imgタグに対するCSSがBootstrapとGoogle Mapで干渉している模様。

[BootstrapのCSS]
img {
…
max-width: 100%; <=これをコメントアウトすると表示されます。
…
}

【対策】
Google Map用にCSSをオーバーライド
#map .gm-style img {
max-width: inherit; <=これを追加
}

するとコントロール画像が表示されます。

【補足】
ちなみに、google map表示の設置方法

1.HTMLに空div用意
<div id="map"></div>

2.HTMLに必要なjsをロード
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery.gmap.js"></script>

（ソースはこちら）

3.jsを記述

jQuery('#map').gMap({ address: '東京都◯◯◯□□□△△△',

panControl: true,

zoomControl: true,

zoomControlOptions: {

style: google.maps.ZoomControlStyle.SMALL

mapTypeControl: true,

navigationControl: true,

scaleControl: true,

streetViewControl: false,

overviewMapControl: true,

scrollwheel: true,

icon: {

image: "http://www.google.com/mapfiles/marker.png",

shadow: "http://www.google.com/mapfiles/shadow50.png",

iconsize: [20, 34],

shadowsize: [37, 34],

iconanchor: [9, 34],

shadowanchor: [19, 34]

zoom:16,

markers: [{ 'address' : '東京都◯◯◯□□□△△△',

html: "ここは東京都◯◯◯□□□△△△の場所です。",

popup: true

}]

});

このブログの人気の投稿

iframeに異なるドメイン（クロスドメイン）のコンテンツを読み込んで高さを自動調節する方法

趣旨 iframe（親）に異なるドメインのページ（子）を読み込んで、親フレームにスクロールが出ないよう、iframeの高さを子ページの高さに自動調節する方法普通にやると、「Uncaught SecurityError: Blocked a frame with origin "http://hoge.com" from accessing a frame with origin "http://fuga.com". Protocols, domains, and ports must match. 」などと怒られてしまいますのでこちらを参考に http://stackoverflow.com/questions/18456498/how-can-i-change-the-size-of-an-iframe-from-inside http://i556tips.tumblr.com/post/15710917018/%E3%82%AF%E3%83%AD%E3%82%B9%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%A7iframe%E3%81%AE%E9%AB%98%E3%81%95%E3%82%92%E8%87%AA%E5%8B%95%E8%AA%BF%E7%AF%80%E3%81%99%E3%82%8Bjavascript コード hoge.com（親） <html> <head> <title>親</title> <script src="js/jquery.js"></script> <script> window.addEventListener('message', function(e) { var iframe = $("#fugapage"); var eventName = e.data[0]; var data = e.data[1]; switc

MovableTypeでクエリーからGET値をPHPで取得して、そのパラメータで記事を動的に出力する方法

【実現したいこと】 MovableTypeで、クエリー（http://◯◯◯.com/?aaa=bbbの?以下）からパラメータをPHPで取得して、MovableTypeの変数に引き渡して、取得したパラメータで特定カテゴリの記事を動的に出力する。【呼び出し元】（ウェブページ、インデックステンプレートなどから） <a href="<$mt:BlogURL$>list/?category=hogehoge">カテゴリー「ほげほげ」の記事を動的に出力</a> ↓ 【呼び出し先】（インデックステンプレートなどで） <mt:Ignore></mt:Ignore> <mt:SetVarBlock name="mycategory" strip_linefeeds="1" trim="1"><?php $mycategory = $_GET['category']; echo $mycategory; ?></mt:SetVarBlock> <mt:Ignore></mt:Ignore> <mt:SetVarBlock name="mycategorylabel" strip_linefeeds="1" trim="1"><?php if ($mycategory == "hogehoge") { $my_category_label = "ほげほげ"; } else if ($mycategory == "fugafuga") { $my_category_label = "ふがふが"; } else if () { ... } echo $my_category_label; ?>&l

HTMLの要素を下揃えする方法

【実現したいこと】上の図において、要素１と要素２の下面を揃えたい。【よく見る方法は...】・親要素に「position:relative;」・子要素に「position:absolute;」、「bottom:0;」とすると、左右のdivの高ささえ揃えておけば、下面を合わせられますが、BootstrapなどのCSSフレームワークを使用していたりして、既存のスタイルと干渉してしまう場合に、JavaScript（jQuery）で実現する方法を記載します。【JavaScriptでの実現方法（考え方）】上の図において、スクリプトを使用し、「A」、「B」、「C」を高さを取得し、計算により「D」の高さを取得します。「D」=「A」-「B」-「C」この「D」を要素２の「margin-top」に追加してあげます。今回は、レスポンシブ（RWD）に対応するため、ウィンドウの幅を変えた時にも「margin-top」を設定し直す仕様とします。【実装】 jQuery(document).ready(function() { adjustPosition(); $(window).resize(function () { adjustPosition(); }); function adjustPosition(){ var heightA = $("要素１").outerHeight(); var heightB = $("テキスト部").outerHeight(); var heightC = $("要素２").outerHeight(); var heightD = heightA - heightB - heightC; if (heightD > 0) { $("#要素２").css("margin-top", heightD + "px"); } } }); 【解説】特に難しいことはしていませんが、初回とウィンドウリサイズ時に、それぞれの要素の高さ

カウンセラーのための「あなたに相談したい！」と言われる、集客／顧客獲得型ホームページの作り方

このブログを検索