小ネタ: Google Maps の吹き出し(infoWindow)内のスクロールバーを消す

超小ネタ。Google Maps API V3 の吹き出し(infoWindow)内にテキストを表示させた際に、縦スクロールバーが表示されてしまうことがあります。

日本語のテキストを表示させたときのみ表示されるようです。邪魔なので消したいなぁ、と思っていろいろ試してみた結果、以下の方法でうまくいきました(正しいかどうかは別として)。

  1. infoWindow の content に文字列を設定する際、最上位に div 要素を設定
  2. その div 要素の style 属性に margin:5px; を設定

という感じです。以下は HTML への埋め込みサンプルコード。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map" style="width: 674px; height: 300px;"></div>
<script type="text/javascript">
// マップ
var myMap = new google.maps.Map(document.getElementById("map"), {
		zoom: 18,
		center: new google.maps.LatLng(34.674553, 135.47676),
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});
// マーカー
var myMarker = new google.maps.Marker({
		// マーカーの緯度経度
		position: new google.maps.LatLng(34.674253, 135.47676),
		map: myMap
	});
// 吹き出しに表示する文字列
var content = '<div style="margin:5px;">最初に一人暮らしをしたマンション。</div>';
var myInfoWindow = new google.maps.InfoWindow({
		content: content,
		size: new google.maps.Size(50, 50)
	});
// 吹き出しを表示
myInfoWindow.open(myMap, myMarker);
// 吹き出しをマーカーのクリックで再表示
google.maps.event.addListener(myInfoWindow, "closeclick", function() {
		google.maps.event.addListenerOnce(myMarker, "click", function(event) {
				myInfoWindow.open(myMap, myMarker);
			});
	});
</script>
スポンサーリンク
レクタングル(大)
レクタングル(大)

コメント

  1. […] 不具合が出る模様。 解決方法を調べてみると、コメントを書く時に <div> で囲んでマージンをつけろとのこと。 →digitalbox:Google Maps の吹き出し(infoWindow)内のスクロールバーを消す […]

  2. bono より:

    助かりました!!

  3. 匿名希望 より:

    私のwindows8.1のchrome(バージョン38.0.2125.104m)では、何の効果もなくスクロールバー出ちゃいます…。
    なぜだろう???