web-dev-qa-db-ja.com

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

Google Maps v3のホームアイコンをクリックすると、InfoWindowがInfoWindowのコンテンツに対して適切に自動サイズ調整されていないように見えます。

スクロールバーが表示されるべきではないときにそれを提供します。情報ウィンドウは適切に自動サイズ調整されるはずです。

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

リクエストごとに、InfoWindowにHTMLを挿入する関連JavaScript：

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

[〜＃〜] update [〜＃〜]

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

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

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

javascripthtmlcssgoogle-maps
81
JacobT

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

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

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

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

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

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

InfoWindowsOptions.maxWidthプロパティが関連しているとは思いませんでした。幅をconstraint気にしなかったので...しかし、InfoWindowコンストラクターで設定することで、欲しかったので、ウィンドウは自動的に（垂直に）サイズ調整され、垂直スクロールバーなしでコンテンツ全体が表示されます。私にはあまり意味がありませんが、うまくいきます！

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

30
fortboise

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

var $infoWindowContent = $("<div class='infowin-content'>Content goes here</div>");
var infoWindow = new google.maps.InfoWindow();
infowindow.setContent($infoWindowContent[0]);
24
Baris Aydinoglu
.gm-style-iw{
    height: 100% !important;
    overflow: hidden !important;
}

わたしにはできる

21
Rejeesh Prarath

編集済み（傑出した）：この質問に対する他の100の答えのうち、これが起こっている理由を説明する唯一の正しい答えです

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

まず、しないスクロールバーなしで情報ウィンドウを表示するには、何かにwidth'sまたはheight'sを指定する必要がありますが、これ（ただし、最終的には失敗します）。

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

Google Maps APIに次のようにinfoWindowで開くように指示すると：

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を測定し（この例では、h1およびpタグに適用されるドキュメント内のCSSルールが適用されます）、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」がbody）。ただし、APIが実際にinfoWindowをマップに配置すると、#map-canvas h1セレクターが優先され、APIがinfoWindowのサイズを測定したときとこの状況でフォントサイズが大きく異なりますalwaysスクロールバーを取得します。

infoWindowにスクロールバーがある特定の理由により、わずかに異なるニュアンスが存在する場合がありますが、その理由は次のとおりです。

実際のHTML要素がマークアップのどこに表示されるかに関係なく、infoWindow内のコンテンツに同じCSSルールを適用する必要があります。そうでない場合、guaranteedになり、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の前または#map-canvasの内側に適用されるCSSルールは常に同じです。

編集RE：フォントファミリ

Googleはフォントの読み込みの問題（下記を参照）に積極的に取り組んでいるようで、機能がごく最近変更されたため、使用しているAPIのバージョンに応じて、infoWindowを初めて開いたときにRobotoフォントの読み込みが表示される場合と表示されない場合があります。 Googleがまだこの問題に苦労していることを示すオープンなバグレポートがあります（ changelog でこのバグレポートは既に修正済みとマークされていますが）。

もう1つ：フォントの家族を見てください!!!

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

APIのロード時にGoogleがページにロードするスタイルを見ると、次のように表示されます。

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

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

21
Adam

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

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

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

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;
}
9
Jen

私はこれが古いスレッドであることを知っていますが、同じ問題に遭遇しました。私は<h2>および<p> InfoWindowの要素、およびこれらの両方には下マージンがありました。マージンを削除し、InfoWindowのサイズを正しく設定しました。その他の推奨される修正は機能しませんでした。 InfoWindowサイズの計算ではマージンを考慮していないと思います。

9
Mike

これらのソリューションをすべて試しましたが、どれも機能しませんでした。いくつかの試行錯誤の後、私はそれを理解しました。

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

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

7
Nick

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

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

動作することがわかった解決策は、コンテンツをDIVにラップし、CSSを適用してwebfontをオーバーライドすることです。

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

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

おもしろいですが、次のコードはWIDTHスクロールバーを修正します：

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

}

HEIGHTスクロールバーを修正するのにこれが必要でした：

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

編集：空白の追加：nowrap;どちらのスタイルでも、スクロールバーが削除されたときに残ると思われる間隔の問題を修正できます。素晴らしい点ネイサン。

4
Houdini Sutherland

これは私のために動作します。 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マップを表示します。

3
Alan

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

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

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

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

2
Jim T.

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

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

また、マップコンテナの高さも重要です。小さい場合、infoWindowは常に80pxの高さになります。それ以外の場合は、maxWidthおよび#innerDiv fixは、チャームのように機能します。

1
xsi1

Domreadyイベントを2回起動した後、domreadyイベントを使用して情報ウィンドウを再度開き、非表示のコンテンツを表示して、すべての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）を実行しようとしましたが、コンテンツ（画像など）の読み込みに時間がかかりすぎると、まだ機能しない場合がありました。

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

0
Steve Tranby

シェイプやフォームを機能させることができませんでした。3つのdivをボックスに含めていました。幅と高さをすべて正しく設定した外側のdivにラップしましたが、何も機能しませんでした。

最後に、divを絶対左上に設定して修正し、divの前に、透明gifの2つの画像（幅300ピクセル、高さ1ピクセル、高さ120ピクセル、幅1ピクセル）を設定しました。

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

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

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

0
MS...

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

  • 情報ウィンドウ内では余白を使用せず、パディングのみを使用します。

  • 情報ウィンドウの最大幅を設定します。

    this.infowindow = new google.maps.InfoWindow({ maxWidth: 200 });

  • 情報ウィンドウの内容をラップします

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

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

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

0
Daniel Castilla

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

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

また、即座の解決策ではありませんが、問題にスターを付ける/コメントすることで、修正されたと思われるため、修正する場合があります。 http://code.google.com/p/gmaps-api-issues/issues/ detail？id = 571

0
Dan

2014年中期現在、複数のブラウザに影響するGoogle Maps v3のInfoWindowサイズ変更バグがあるようです。

ここで報告されています：
https://code.google.com/p/gmaps-api-issues/issues/detail?id=571
（ およびデモJSFiddleはこちら ）
修正することに投票するには、上記の問題の星をクリックしてください！

すべてのテストから、一部のフォントサイズでのみ発生するため、要素サイズの丸めエラーに関連するのように見えます。

悪い回避策：

このページのほとんどの提案をいじって、次は良い解決策ではありませんです：

  • overflow: hidden（潜在的にコンテンツを遮断できる）
  • white-space: nowrap（潜在的にコンテンツを遮断できる）
  • JQueryオブジェクトまたはDOMノードを渡す（コンテンツが潜在的にInfoWindowの外にオーバーフローする）
  • InfoWindowコンテンツを開いた後に設定する（それ自体では、助けにはなりません）
  • フォントをRobotoから変更する（この問題はどのフォントでも発生する可能性があります）

考えられる回避策の1つは、InfoWindowに固定幅（max-widthとmin-widthの設定を提案した人など）を与えることですが、多くのマーカーがあり、コンテンツの量が変動する場合、これは理想的ではありません。モバイル/レスポンシブデザインにとっても悪いことです。

合理的な回避策：

したがって、Googleがこれを修正するまで、回避策を作成する必要がありました。約12時間以上のテストとデバッグの後、次のことを思いつきました。

notには、他の提案と同じ欠点があります。

  • コンテンツがクリップされることはありません（InfoWindowの幅を超える大きな画像がない限り）。
  • 垂直スクロールバーが追加されますが、必要な場合のみです。
  • InfoWindowの外にコンテンツがオーバーフローしないようにする必要があります
  • ほとんどの場合、InfoWindowはコンテンツに合わせて自動的にサイズ変更されます（固定サイズではありません）
  • モバイルおよびレスポンシブレイアウトに適している必要があります
  • マージン、パディング、フォントはすべて正常に機能するはずです

欠点：

  • 私のバージョンはjQueryを必要としますが、おそらく純粋なJSになるように作り直される可能性があります
  • コンテンツの右側に20pxのパディングを作成して、必要に応じてスクロールバー用のスペースを確保します。必要に応じてこれをスキップするか、必要なときにのみパディングを追加するためにさらにチェックを行うことができます。
  • それはかなりハックですが、Googleのjavascriptを編集せずに、おそらく唯一の方法です。

Githubでコードを表示

改善点や修正点を見つけたら送信してください。

0
Simon East

divのすぐ内側にインライン要素（タグ）があり、style="overflow:auto"[...はそれをpタグでラップして修正しました。

情報ウィンドウ内のブロック要素に直接入れ子にされていないインライン要素がこれを引き起こすように見えます。

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

この動作は外側のコンテナのCSSスタイリングのためであると思います、私は同じ問題を抱えていましたが、内側のdivとそれにパディングを追加して解決しました、それは奇妙ですが、問題を解決しました

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

そして、私のstyle.cssで

div#fix_height{
    padding: 5px;
}
0
maurizzzio

情報ウィンドウの幅と高さをハードコーディングしたり、white-space: nowrap、maxWidthソリューションは役に立たず、他のすべては機能しなかったか、私のユースケースには不適切でした。

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

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-maps InfoWindowのサイズを変更して、その中に配置されているコンテンツに合わせてサイズを変更するにはどうすればよいですか？ ）

0
tremby

特に<h2>要素が2行目にラップされている場合に、同じ問題が発生していました。

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

0
Taylor Dewey

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

いくつかの詳細：

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

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

  1. すべてのディスプレイを削除します：情報ウィンドウコンテンツ内のすべてからインラインブロックスタイルルール（ディスプレイ：ブロックに置き換えました）-誰かが同じスレッドを持っている（もう見つけられない）スレッドからこれを試すというアイデアを得ましたIE6の問題。

  2. コンテンツを文字列ではなくDOMノードとして渡します。私はjQueryを使用しているので、以下を置き換えることでこれを行うことができます。infowindow.setContent(infoWindowDiv.html());をinfowindow.setContent($(infoWindowDiv.html())[0]);で置き換えるこれは私にとって最も簡単であることがわかりましたが、同じ結果を得る他の方法がたくさんあります。

  3. 「setMaxWidth」ハックを使用-MaxWidthオプションを設定コンストラクター内-後でオプションを設定しても機能しません。最大幅が本当に必要ない場合は、非常に大きな数に設定してください。

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

0
thomij

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

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

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

InfoWindowsで非常に多くのHTML形式のテキストを表示しているため、他のソリューションがまったく機能しなかったのかもしれません。

0
Magnus W

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

情報ウィンドウがすべて同じサイズの場合、問題は解決します。

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

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

私の答えは、（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);
            });
0
borbulon

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

white-space: nowrap;
0
ruggershawn