Google Maps API v3：InfoWindowのサイズが正しくない

Question 1

Google Maps v3のホームアイコンをクリックすると、InfoWindowがInfoWindowのコンテンツに適切に自動サイズ設定されていないようです。

すべきでないときにスクロールバーを表示します。インフォウィンドウは適切に自動サイズ設定されている必要があります。

理由について何かアイデアはありますか？

リクエストごとに、インフォウィンドウのHTMLを挿入する関連するJavaScript：

listing = '<div>Content goes here</div>';

更新

このバグは問題のGoogleによって処理されました

https://issuetracker.google.com/issues/35823659

この修正は、2015年2月にMaps JavaScriptAPIのバージョン3.19で実装されました。

Question 2

情報ウィンドウ内にdivを追加します

<div id=\"mydiv\">YourContent</div>

次に、cssを使用してサイズを設定します。私のために働きます。これは、すべての情報ウィンドウが同じサイズであることを前提としています。

#mydiv{
width:500px;
height:100px;
}

Question 3

簡単な答え：コンストラクターでmaxWidthオプションプロパティを設定します。はい、最大幅を設定することがあなたがやりたかったことではなかったとしても。

長い話：v2マップをv3に移行すると、説明されている問題が正確にわかりました。ウィンドウの幅と高さはさまざまで、垂直スクロールバーがあるものとないものがありました。データに<br/>埋め込まれているものもありますが、少なくとも1つはそのサイズで問題ありません。

幅を制限する必要がなかったので、InfoWindowsOptions.maxWidthプロパティが適切であるとは思いませんでした...しかし、InfoWindowコンストラクターで設定することで、必要なものが得られ、ウィンドウは（垂直方向に）自動サイズ設定され、垂直スクロールバーなしでコンテンツ全体を表示します。私にはあまり意味がありませんが、機能します！

参照：http：//fortboise.org/maps/sailing-spots.html

Question 4

jQueryオブジェクトからInfoWindowにコンテンツを提供する必要があります。

var $infoWindowContent = $("<div class='infowin-content'>Content goes here</div>");
var infoWindow = new google.maps.InfoWindow();
infowindow.setContent($infoWindowContent[0]);

Question 5

.gm-style-iw{
    height: 100% !important;
    overflow: hidden !important;
}

わたしにはできる

Question 6

編集済み（目立つように）：私を信じてください、この質問に対する他の100の答えのうち、これはなぜそれが起こっているのかを説明する唯一の正しいものです

わかりました。このスレッドは古く、1000の回答がありますが、どれも正しくなく、正しい回答を投稿する必要があると感じています。

まず、スクロールバーなしでinfoWindowを表示するために、または何かを指定する必要はありませんが、これを行うことで誤って機能させることがあります（ただし、最終的には失敗します）。width'sheight's

第二に、Google Maps APIにinfoWindow's はスクロールのバグがなく、それらがどのように機能するかについて正しい情報を見つけることは非常に困難です。さて、ここにあります：

次のようにinfoWindowで開くようにGoogleMapsAPIに指示すると：

var infoWindow = new google.maps.InfoWindow({...});
....
infoWindow.setContent('<h1>Hello!</h1><p>And welcome to my infoWindow!</p>');
infoWindow.open(map);

すべての意図や目的のために、一時的に置くGoogleマップdiv（あなたのページの最後に、実際にそれが作成されますdetached DOM tree-それは、私はあなたが想像言えば理解することは概念的に簡単ですdiv、あなたのページの最後にあること場所をあなたがすることをHTMLコンテンツで）指定されています。また、その後の対策というのdiv（この例では、私の文書でのCSSルールが適用何でも、手段h1とpタグがそれに適用されます）、それはだ取得するwidthとheight。次に、Googleはdivそれを取得し、ページに追加されたときに取得した測定値を割り当てて、マップ上の指定した場所に配置します。

多くの人が問題を抱えているのはここです-彼らは次のようなHTMLを持っているかもしれません：

<body>
 <div id="map-canvas"><!-- google map goes here --></div>
</body>

そして、何らかの理由で、次のようなCSS：

h1 { font-size: 18px; }
#map-canvas h1 { font-size: 32px; }

問題がわかりますか？APIがinfoWindow（表示する直前に）測定を行おうとするh1と、コンテンツの一部のサイズは18px（一時的な「測定div」が本文に追加されるため）になりますが、APIが実際infoWindowにマップでは、#map-canvas h1セレクターが優先されるため、APIがのサイズを測定したときのフォントサイズとは大きく異なりinfoWindowます。この状況では、常にスクロールバーが表示されます。

にスクロールバーがある特定の理由により、微妙に異なるニュアンスが存在する可能性がありますinfoWindowが、その背後にある理由は次の理由によるものです。

infoWindow 実際のHTML要素がマークアップのどこに表示されるかに関係なく、同じCSSルールを内部のコンテンツに適用する必要があります。そうでない場合は、infoWindowにスクロールバーが表示されることが保証されます

だから私がいつもしていることは、このようなものです：

infoWindow.setContent('<div class="info-window-content">...your content here...</div>');

そして私のCSSでは：

.info-window-content { ... }
.info-window-content h1 { .... }
.info-window-content p { ... }
etc...

したがって、APIが測定値を追加する場所に関係なくdiv、閉じる前bodyまたはAPI内で#map-canvas、適用されるCSSルールは常に同じになります。

再編集：フォントファミリー

Googleはフォントの読み込みの問題（以下で説明）に積極的に取り組んでいるようで、機能が最近変更されたためinfoWindow、使用しているAPIのバージョンに応じて、最初に開いたときにRobotoフォントの読み込みが表示される場合と表示されない場合があります。未解決のバグレポートがあり（変更ログでこのバグレポートはすでに修正済みとしてマークされていますが）、Googleがこの問題でまだ問題を抱えていることを示しています。

もう1つ：あなたのフォントファミリーを見てください!!!

APIの最新の化身では、グーグルは巧妙になり、CSSセレクターでターゲットにできるものでそのinfoWindowコンテンツをラップしようとしました- .gm-style-iw。上で説明したルールを理解していない人にとっては、これは実際には役に立たず、場合によってはさらに悪化しました。スクロールバーは、ほとんどの場合、最初infoWindowに開いたときに表示されますが、infoWindowもう一度開くと、まったく同じコンテンツであっても、スクロールバーは表示されなくなります。真剣に、これがあなたの心を失う前にあなたが混乱していなかったならば。何が起こっていたかは次のとおりです。

APIが読み込まれるときにGoogleがページに読み込むスタイルを見ると、次のことがわかります。

.gm-style {
     font-family: Roboto,Arial,sans-serif
 ...
}

わかりました。Googleは、常にRobotofont-familyを使用するようにすることで、マップの一貫性を少し高めたいと考えていました。問題は、大多数の人にとって、を開く前infoWindowに、ブラウザがまだRobotoフォントをダウンロードしていないことです（ページ上の他の何もフォントを使用していないため、ブラウザはダウンロードする必要がないことを知っているほど賢いです）このフォント）。このフォントのダウンロードは非常に高速ですが、瞬時には行われません。を初めて開いたときにinfoWindow、APIがコンテンツを本文に追加しdivてinfoWindow測定を行うと、Robotoフォントのダウンロードが開始されますが、infoWindow's測定が行われ、Robotoダウンロードが完了する前にウィンドウが地図上に配置されます。結果は、かなり頻繁に、infoWindowコンテンツがArialまたはsans-serifフォントを使用してレンダリングされたときに測定されましたが、マップに表示されたとき（およびRobotoダウンロードが終了したとき）、コンテンツは異なるサイズのフォントで表示されていました-そして出来上がり-スクロールバーが最初に表示されますを開きますinfoWindow。まったく同じものをもう一度開きます。infoWindowこの時点で、Robotoはダウンロードされ、APIがinfoWindowコンテンツの測定を行っているときに使用され、スクロールバーは表示されません。

Question 7

私はリストされた答えのそれぞれを試しました。誰も私のために働いていませんでした。これは最終的にそれを永久に修正しました。私が継承したコードには、DIVすべてのエントリ<h#>と<p>エントリのラッパーがありました。必要な最大幅を考慮して、同じDIVに「スタイル」を強制し、万が一の場合に備えて行の高さの変更をスローし（他の誰かの修正）white-space: nowrap、自動オーバーフローで正しい調整を行いました。スクロールバー、切り捨て、問題はありません！

html = '<div class="map-overlay" style="max-width: 400px;
                                        line-height: normal;
                                        white-space: nowrap;
                                        overflow: auto;
                                       ">';

Question 8

これが古いスレッドであることは知っていますが、同じ問題が発生しました。私が持っていた<h2>し、<p>情報ウィンドウ内の要素、およびこれらの両方が下のマージンを持っていました。余白を削除し、InfoWindowのサイズを正しく設定しました。他の提案された修正はどれも機能しませんでした。インフォウィンドウサイズの計算ではマージンが考慮されていないようです。

Question 9

これらのどれも私の問題を修正しなかったので、リストに私の答えを追加しようとしています。結局、コンテンツをdivでラップし、そのdivにクラスを与え、divでをmin-width指定maxWidthし、infoWindowでを指定しました。両方とも同じサイズである必要がありました。そうしないと、幅または高さがオーバーフローします。内容の量が間違っているボックス。

Javascript：

// Set up the content for the info box
var content = "<div class='infowindow-content'>" + content + "</div>";

// create a map info box
var infoWindow = new google.maps.InfoWindow({
    maxWidth: 350,
    content: content
});

CSS：

div.infowindow-content {
    min-width: 350px;
}

Question 10

私はこれらすべての解決策を試しましたが、どれもうまくいきませんでした。試行錯誤の末、私はそれを理解しました。

<style type="text/css">
#map_canvas {
    line-height:normal;
}
</style>

マップキャンバスdivのline-height：normalを設定します。

Question 11

問題はRobotoWebフォントにあるようです。

情報ウィンドウは、提供されたコンテンツに基づいてインラインの幅と高さのプロパティでレンダリングされます。ただし、すでにレンダリング/ロードされているWebフォントでは計算されません。マップ全体が画面に印刷された後にフォントがレンダリングされると、ウィンドウのDIV内にインラインの「overflow：auto」プロパティがあるため、スクロールバーが表示されます。

私がうまくいくことがわかった解決策は、コンテンツをDIVでラップしてから、CSSを適用してWebフォントをオーバーライドすることです。

.gmap_infowin {
    font-family: sans-serif !important;
    font-weight: normal !important;
}

<div class="gmap_infowin">Your info window content here.</div>

Question 12

面白いことに、次のコードはWIDTHスクロールバーを修正します。

.gm-style-iw
{
    overflow: hidden !important;
    line-height: 1.35;

}

HEIGHTスクロールバーを修正するには、次のようにします。

    .gm-style-iw div
    {
        overflow: hidden !important;
    }

編集： 空白の追加：nowrap; どちらのスタイルでも、スクロールバーが削除されたときに残るように見える間隔の問題が修正される可能性があります。素晴らしいポイントネイサン。

Question 13

これは私にとってはうまくいきます。に入れdivてsetContent

sh_map.infoWindow.setContent([
  '<div id=\"mydiv\">',
  'Your content goes here',
].join(''));

次に、このCSSをページに追加します。

<style type="text/css">
#map-canvas {
 text-align: center;
 vertical-align: middle;
}
#mydiv {
 font-family: "Comic Sans MS", cursive;
 font-size: 10px;
 border-top-width: 0px;
 border-right-width: 0px;
 border-bottom-width: 0px;
 border-left-width: 0px;
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
 border-left-style: none;
 letter-spacing: normal;
 text-align: center;
 vertical-align: middle;
 word-spacing: normal;
}
</style>

たとえば、http：//www.student-homes-northampton.co.ukを参照してください。家の写真の下にあるリンクをクリックして、Googleマップを表示します。

Question 14

これは私の問題を完全に解決しました：

.gm-style-iw {
    overflow: visible !important;
    height: auto !important;
    width: auto !important;
}

Question 15

IEでも同じ問題が発生し、これらの応答で詳しく説明されている修正の多くを試しましたが、IEの垂直スクロールバーを確実に削除できませんでした。

私にとって最も効果的なのは、情報ウィンドウ内で固定フォントサイズに切り替えることでした-'px '...私はemsを使用していました。フォントサイズを修正することで、情報ウィンドウの幅や高さを明示的に宣言する必要がなくなり、スクロールバーが完全になくなりました。

Question 16

マップコンテナの高さも重要です。小さいinfoWindowの場合、常に80pxの高さになります。それ以外の場合maxWidth、#innerDiv修正は魅力のように機能します。

Question 17

他に何もない場合は、ウィンドウを開いた後にコンテンツを追加してみてください。これにより、サイズが強制的に変更されます。

infoWindow = new google.maps.InfoWindow()
infoWindow.open(map, marker)
infoWindow.setContent(content)

Question 18

domreadyイベントを使用して情報ウィンドウを再度開き、domreadyイベントが2回発生した後に非表示のコンテンツを表示して、すべてのdom要素が読み込まれていることを確認します。

// map is created using google.maps.Map() 
// marker is created using google.maps.Marker()
// set the css for the content div .infowin-content { visibility: hidden; } 

infowindow = new google.maps.InfoWindow();    
infowindow.setContent("<div class='infowin-content'>Content goes here</div>");
infowindow.setPosition(marker.getPosition());
infowindow.set("isdomready", false);
infowindow.open(map);   

// On Dom Ready
google.maps.event.addListener(infowindow, 'domready', function () {
    if (infowindow.get("isdomready")) {
        // show the infowindow by setting css 
        jQuery('.infowin-content').css('visibility', 'visible');               
    }
    else {
        // trigger a domready event again.
        google.maps.event.trigger(infowindow, 'content_changed');
        infowindow.set("isdomready", true);
    }
}

setTimeout（/ * show infowin callback * /、100）を実行しようとしましたが、コンテンツ（つまり、画像）の読み込みに時間がかかりすぎると、それでも機能しない場合がありました。

これがあなたのために働くことを願っています。

Question 19

私は同じ問題を抱えていました。特に、<h2>要素が2行目に折り返されているときに顕著でした。

<div>infoWindowのにクラスを適用し、フォントを、それが使用していた@ font-face Webフォントではなく、汎用システムフォント（私の場合はHelvetica）に変更しました。問題は解決しました。

Question 20

//infowindow.setContent(response);    
var infowindowopts = { 
    maxWidth: 274, 
    content: response
};
infowindow.setOptions(infowindowopts);

Question 21

min-heightinfoWindowクラス要素にを追加します。

infoWindowsがすべて同じサイズの場合は、これで問題が解決します。

そうでない場合は、次のjQuery行をinfoWindowのクリック関数に追加します。

//remove overflow scrollbars
$('#myDiv').parent().css('overflow','');

Question 22

私はそれをどんな形や形でも機能させることができませんでした、私は箱に3つのdivを含めていました。幅と高さがすべて正しく設定された外側のdivでそれらをラップしましたが、何も機能しませんでした。

結局、divを絶対左上に設定して修正し、divの前に、透明なgifの2つの画像（幅300pxと高さ1px、高さ120pxと幅1px）を設定しました。

その後、適切にスケーリングされました。

その醜いですが、それは動作します。

また、1つの画像を実行して、期待するzindexを設定することも、ウィンドウにインタラクションがない場合は1つの画像だけを設定することもできますが、これにはフォームが含まれていたため、オプションではありませんでした...

Question 23

この動作は、外部コンテナのcssスタイリングが原因だと思います。同じ問題が発生しましたが、内部divを使用してパディングを追加することで解決しました。奇妙なことですが、問題は解決しました。

<div id="fix_height">
    <h2>Title</h2>
    <p>Something</p>
</div>

そして私のstyle.cssで

div#fix_height{
    padding: 5px;
}

Question 24

の中にインライン要素（タグ）を直接入れ、それをタグdivでstyle="overflow:auto"[...ラップしてp修正しました。

情報ウィンドウのすぐ内側のブロック要素にネストされていないインライン要素がこれを引き起こすように見えます。

Question 25

私の答えは、（addListenerOnceを使用して）リスナーを追加して、infoWindowがDOMに追加されているかどうかを確認してから、infoWindowを再度開くことです（閉じる必要はありません）。

// map, marker and infoWindow code, we'll call them 
// myMap, myMarker and myInfoWindow

myInfoWindow.open(myMap, myMarker);
google.maps.event.addListenerOnce(myInfoWindow, 'domready', function(){
                myInfoWindow.open(myMap, myMarker);
            });

Question 26

私のCSSに以下を追加することで、私はうまくいきました。

white-space: nowrap;

Question 27

すべてのブラウザで私のために働いたすべてのソリューションを要約するだけです：

情報ウィンドウ内で余白を使用せず、パディングのみを使用してください。
情報ウィンドウの最大幅を設定します。

this.infowindow = new google.maps.InfoWindow({ maxWidth: 200 });
情報ウィンドウの内容を次のようにラップします

<div style="overflow:hidden;line-height:1.35;min-width:200px;">*CONTENT*</div>

（情報ウィンドウのmaxWidthで設定した値の最小幅を変更します）

私はそれをテストしました、そしてそれはすべてのブラウザで動作しました、そして私は400以上のマーカーを持っていました...

Question 28

他の多くの人が自分の特定のケースでうまくいく解決策を見つけたことを知っていますが、私の特定のケースではうまくいかなかったので、これは他の誰かに役立つかもしれないと思いました。

いくつかの詳細：

インラインCSSが本当に避けたいプロジェクトで、Google Maps APIv3を使用しています。私のinfowindowsは、幅が正しく計算されなかったIE11を除いてすべてで機能していました。これにより、divオーバーフローが発生し、スクロールバーがトリガーされました。

私は3つのことをしなければなりませんでした：

情報ウィンドウのコンテンツ内のすべてからすべてのdisplay：inline-blockスタイルのルールを削除します（display：blockに置き換えました）-誰かが同じものを持っていたスレッド（もう見つけることができません）からこれを試すというアイデアを思いつきましたIE6の問題。
コンテンツを文字列ではなくDOMノードとして渡します。私は交換することによってこれを行うことができますので、私は、jQueryのを使用しています：infowindow.setContent(infoWindowDiv.html());とinfowindow.setContent($(infoWindowDiv.html())[0]); これは私のために最も簡単であることが判明したが、同じ結果を得るために他の方法がたくさんあります。
「setMaxWidth」ハックを使用します-コンストラクターでMaxWidthオプションを設定します-後でオプションを設定しても機能しません。最大幅が本当に必要ない場合は、非常に大きな数に設定してください。

これらがなぜ機能したのかわかりませんし、それらのサブセットが機能するかどうかもわかりません。私は、それらのどれもが私のすべてのユースケースで個別に機能するわけではなく、2 +3が機能しないことを知っています。1 +2または1 + 3をテストする時間がありませんでした。

Question 29

情報ウィンドウの幅と高さをハードコーディングしたり、設定したりすることは受け入れられませんでしwhite-space: nowrapた。maxWidthソリューションは役に立たず、他のすべてが機能しないか、ユースケースに不適切でした。

私の解決策は、コンテンツを設定し、ウィンドウを開いて、domreadyイベントが発生したときheightに、コンテンツのCSSプロパティを高さに設定し、それに応じてGoogleマップにインフォウィンドウのサイズを変更させることでした。

infoWindowはInfoWindowオブジェクト、$infoWindowContentsはそこに入れたいコンテンツのJqueryオブジェクト、mapはMapオブジェクトです。markerクリックされたマーカーです。

infoWindow.setContent($infoWindowContents.get(0));

var listener = google.maps.event.addListener(infoWindow, 'domready', function() {
  // Stop listening, otherwise the listeners stack up if the window is opened again
  google.maps.event.removeListener(listener);

  // Set the height on the container to however tall the browser is currently rendering it
  $infoWindowContents.height($infoWindowContents.height());

  // Force Google Maps to recalculate the InfoWindow height
  infoWindow.setContent($infoWindowContents.get(0));
});

infoWindow.open(map, marker);

（同様の質問に同じ解決策を投稿しました。Googleマップのインフォウィンドウを、その中に配置されているコンテンツに合わせてサイズ変更するにはどうすればよいですか？）

Question 30

時間を失ってしばらく読んだ後、私はただ何か簡単なものが欲しかったのですが、このcssは私の要件に合っていました。

.gm-style-iw > div { overflow: hidden !important; }

また、すぐに解決できるわけではありませんが、問題にスターを付けたりコメントしたりすると、修正されたと信じているため、修正される可能性があります：http： //code.google.com/p/gmaps-api-issues/issues/detail？id = 5713

Question 31

さて、これは私のためにトリックをしたものです：

.gm-style-iw>div {
    overflow: visible !important;
}

オンに設定overflow: visibleするだけで.gm-style-iw実際に問題が悪化しました！Chromeデベロッパーツールインスペクターで、.gm-style-iw要素内に2つのdivがあり、どちらもoverflow: autoデフォルトで設定されていることに気付きました。

InfoWindowsにHTML形式のテキストを大量に表示しているため、他のソリューションがまったく機能しなかった可能性があります。