たまに予期せぬ縦スクロールバーが出てしまう場合があります。
色々な解決方法はあると思うのですが、
最近気付いた解決方法を紹介します。
多分、スクロールバーが出る条件は色々あると思うし、
日々のgoogleのバージョンなどにも左右されうと思うので、
この方法がどの範囲まで対応出来るか分ないので、
今回は①とタイトルに付けました。
とっても簡単な解決方法なので、
もし良かったら試してみてください。
方法は簡単でinfowindowの中のコンテンツのフォントをメイリオにするだけです。
今回気づいた部分は、
どうやらフォントに太字を指定した場合、
少し文字幅が大きくなり、
その大きくなった分スクロールバーが出てしまう様です。
メイリオのフォントは標準でも太字でもほとんど同じサイズになるので、
そのバグに対するスクロールバーの出現を制御出来ます。
以下サンプルです。
上のInfowindowではスクロールバーが表示されますが、
下のInfowindowではコンテンツにメイリオを指定してるため
スクロールバーは表示されないと思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>infowindowのスクロールバーの話</title>
<style>
#infowindow_1 {
font-weight: bold;
}
#infowindow_2 {
font-family: "メイリオ";
font-weight: bold;
}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
google.maps.event.addDomListener(window, "load", function () {
var map = document.getElementById("map_canvas");
var latlng = new google.maps.LatLng(35.686773, 139.68815);
var mapOptions = {
zoom: 12,
center: latlng
};
var gmap = new google.maps.Map(map, mapOptions);
var infowindow1 = new google.maps.InfoWindow();
infowindow1.setContent("<div id='infowindow_1'>代々木公園</div>");
infowindow1.setPosition(new google.maps.LatLng(35.686773, 139.68815));
infowindow1.open(gmap);
var infowindow2 = new google.maps.InfoWindow();
infowindow2.setContent("<div id='infowindow_2'>代々木公園</div>");
infowindow2.setPosition(new google.maps.LatLng(35.659807, 139.68815));
infowindow2.open(gmap);
});
</script>
</head>
<body>
<div id="map_canvas" style="width: 300px; height: 300px"></div>
</body>
</html>
もしこの方法で解決しない例などありましたら、
コメントなどでお知らせ頂けると有難いです。
宜しくお願いします。
0 件のコメント:
コメントを投稿