ベストアンサー

Google Maps情報ウィンドウのサイズ調整

2011/06/09 12:28

Google Maps V3を使用しています。情報ウィンドウを表示した際に、文字数が少ないと下部に余白が出来てしまいます。枠内にぴったりと収める方法はないでしょうか？ネットで少し調べてみましたが、良い方法が見つかりません。 maxWidthや表示コンテンツのDivに幅や高さを指定してもうまくいきませんでした。 Flashを使えば出来るようなのですが、別の方法で解決したいです。よろしくお願い致します。

25taku
お礼率85% (76/89)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

my--
ベストアンサー率89% (91/102)

2011/06/10 20:43 回答No.1

情報ウィンドウ（InfoWindow）はデザイン的にある程度の大きさが必要みたいで maxWidthでの設定にも限界があるようです。簡単にそれなりのことができるぶん融通が利かなくなるのかもしれない。で、好きに扱えるものを貼り付けるためにOverlayViewてのが用意されてます。実装にはそこそこスキルが必要で、見付かる資料はすこし難しいと思うのですが簡単なサンプルを置いておくので、遊んでみて下さい。 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Google Maps JavaScript API V3 カスタムオーバーレイサンプル</title> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script> 　　　// マップにオーバーレイ要素を追加： mapObject.addOverlay( LatLng, string|DOMNode ) 戻り値：OverlayViewオブジェクト　　　google.maps.Map.prototype.addOverlay = function (latLng, contents) { 　　　　var overlay = new google.maps.OverlayView; 　　　　overlay.contents = contents; 　　　　overlay.latLng = latLng; 　　　　overlay.setMap(this); 　　　　return overlay; 　　　}; 　　　　　　// オーバーレイ要素の作成と挿入　　　google.maps.OverlayView.prototype.onAdd = function () { 　　　　var pane = this.getPanes().floatPane; 　　　　var container = pane.appendChild(document.createElement('div')); 　　　　var contents = this.contents; 　　　　if (typeof contents === 'string') container.innerHTML = contents; 　　　　else if (contents.nodeType === 1) container.appendChild(contents); 　　　　container.className = 'map-overlay'; 　　　　container.style.position = 'absolute'; 　　　　this.container = container; 　　　}; 　　　　　　// オーバーレイ要素の配置更新　　　google.maps.OverlayView.prototype.draw = function () { 　　　　var position = this.getProjection().fromLatLngToDivPixel(this.latLng); 　　　　var container = this.container; 　　　　container.style.left = position.x + 'px'; 　　　　container.style.top = position.y + 'px'; 　　　}; 　　　// カスタムオーバーレイここまで　　　function initialize(data) { 　　　　var mapOption = { 　　　　　zoom: 8, 　　　　　center: new google.maps.LatLng(35.389050, 137.779541), 　　　　　mapTypeId: google.maps.MapTypeId.SATELLITE 　　　　}; 　　　　var map = new google.maps.Map(document.getElementById('map'), mapOption); 　　　　google.maps.event.addListenerOnce(map, 'tilesloaded', function () { 　　　　　var mapBounds = map.getBounds(); 　　　　　for (var i = 0, len = data.length; i < len; i++) { 　　　　　　var obj = data[i]; 　　　　　　var markerOption = { 　　　　　　　position: new google.maps.LatLng(obj.lat, obj.lng), 　　　　　　　map: map 　　　　　　}; 　　　　　　var marker = new google.maps.Marker(markerOption); 　　　　　　var latLng = marker.getPosition(); 　　　　　　map.addOverlay(latLng, obj.text); 　　　　　　mapBounds.extend(latLng); 　　　　　} 　　　　　map.fitBounds(mapBounds); 　　　　}); 　　　} </script> <style> #map { width: 600px; height: 400px; } .map-overlay { border: 1px solid; background-color: #fff; font-size: small; white-space: nowrap; } </style> </head> <body> <div id="map"></div> <script> 　　　var data = [ 　　　　{ 　　　　　"lat": 35.681353, 　　　　　"lng": 139.766350, 　　　　　"text": "東京" 　　　　}, 　　　　{ 　　　　　"lat": 35.170721, 　　　　　"lng": 136.881752, 　　　　　"text": "名古屋" 　　　　}, 　　　　{ 　　　　　"lat": 34.985443, 　　　　　"lng": 135.757778, 　　　　　"text": "京都" 　　　　}, 　　　　{ 　　　　　"lat": 34.733501, 　　　　　"lng": 135.500436, 　　　　　"text": "新大阪" 　　　　} 　　　]; 　　　　　　initialize(data); </script> <p>参考：<a href="http://code.google.com/intl/ja/apis/maps/documentation/javascript/overlays.html#CustomOverlays">Google Maps JavaScript API V3 カスタムオーバーレイ </a></p> </body> </html>

質問者