javascript code واجهة برمجة تطبيقات خرائط Google الإصدار 3: لا يتم تغيير حجم InfoWindow بشكل صحيح



google map iframe (30)

أضف min-height إلى عنصر فئة infoWindow الخاص بك.

سيؤدي ذلك إلى حل المشكلة إذا كانت جميع إصدارات Windows جميعًا بنفس الحجم.

إذا لم يكن كذلك ، فقم بإضافة هذا السطر من jQuery إلى وظيفة النقر الخاصة بك من أجل infoWindow:

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

https://src-bin.com

يظهر My InfoWindow ، عندما تنقر على أيقونة الصفحة الرئيسية على خرائطي على Google v3 ، لا يتم التحجيم التلقائي لمحتوى InfoWindow.

يعطي أشرطة التمرير عندما لا ينبغي. يجب أن يكون InfoWindow التحجيم التلقائي بشكل صحيح.

أي أفكار حول لماذا؟

لكل طلب ، جافا سكريبت ذات الصلة التي تقوم بحقن HTML لـ InfoWindow:

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

تحديث

تمت معالجة هذا الخطأ بواسطة Google

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

تم تنفيذ الإصلاح في شباط 2015 في الإصدار 3.19 من Maps JavaScript API.


Answer #1

أعتقد أن هذا السلوك بسبب تصميم css في حاوية خارجية ، كان لدي نفس المشكلة ولكنني قمت بحلها باستخدام div الداخلي لإضافة بعض الحشو إليها ، أعلم أنه غريب ولكنه حل المشكلة

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

وفي my.css بلدي

div#fix_height{
    padding: 5px;
}

Answer #2

أعرف أن هذا خيط قديم ، لكنني واجهت نفس المشكلة. كان لدي عناصر <h2> و <p> في InfoWindow ، وكان كلاهما بهوامش سفلية. أزلت الهوامش ، و InfoWindow الحجم بشكل صحيح. لم يعمل أي من الإصلاحات المقترحة الأخرى. أظن أن حساب حجم InfoWindow لا يأخذ في الاعتبار الهوامش.


Answer #3

أعلم أن الكثير من الأشخاص الآخرين قد وجدوا حلولًا ناجحة لحالتهم الخاصة ، ولكن بما أنه لم يعمل أي منهم لحالتي الخاصة ، فقد اعتقدت أن هذا قد يكون مفيدًا لشخص آخر.

بعض التفاصيل:

أستخدم google maps API v3 في مشروع حيث CSS مضمّن هو أمر نرغب فعلاً في تجنبه. كانت تعمل infowindows الخاصة بي على كل شيء باستثناء IE11 ، حيث لم يتم حساب العرض بشكل صحيح. هذا أدى إلى طفح div ، مما أدى إلى ظهور أشرطة التمرير.

اضطررت للقيام بثلاثة أشياء:

  1. إزالة كل الشاشة: قواعد نمط مضمنة - منع من أي شيء داخل محتوى infowindow (استعيض مع عرض: كتلة) - حصلت على فكرة لمحاولة هذا من موضوع (التي لا أستطيع العثور عليها بعد الآن) حيث كان هناك شخص ما لديه نفس الشيء مع IE6.

  2. قم بتمرير المحتوى على هيئة عقدة DOM بدلاً من كسلسلة. أستخدم jQuery ، لذلك يمكنني القيام بذلك عن طريق استبدال: infowindow.setContent(infoWindowDiv.html()); مع infowindow.setContent($(infoWindowDiv.html())[0]); وتبين أن هذا أسهل بالنسبة لي ، ولكن هناك الكثير من الطرق الأخرى للحصول على النتيجة نفسها.

  3. استخدم الاختراق "setMaxWidth" - قم بتعيين خيار MaxWidth في المُنشئ - لا يعمل الخيار لاحقًا. إذا كنت لا تريد عرضًا أقصى ، فعليك تعيينه على عدد كبير جدًا.

لا أعرف سبب نجاحها ، ولست متأكداً مما إذا كانت مجموعة فرعية منهم ستعمل أم لا. أعلم أن أيا منهم لا يعمل في جميع حالات الاستخدام الخاصة بي بشكل فردي ، وأن 2 + 3 لا يعمل. لم يكن لدي الوقت لاختبار 1 + 2 أو 1 + 3.


Answer #4

إجابة قصيرة: قم بتعيين الخاصية خيارات maxWidth في المُنشئ . نعم ، حتى لو لم يكن تحديد الحد الأقصى للعرض هو ما تريد القيام به.

قصة أطول: ترحيل خريطة v2 إلى الإصدار v3 ، شاهدت بالضبط المشكلة الموضحة. اختلفت النوافذ في العرض والارتفاع ، وبعضها كان يحتوي على أشرطة تمرير عمودية وبعضها لم يكن. البعض كان قد تم تضمينه في البيانات ، ولكن واحد على الأقل مع هذا الحجم موافق.

لم أكن أعتقد أن خاصية InfoWindowsOptions.maxWidth كانت ذات صلة ، حيث لم أكن أهتم بتقييد العرض ... ولكن من خلال إعداده مع مُنشئ InfoWindow ، حصلت على ما أريد ، والنوافذ الآن ذاتية (عموديًا) و عرض المحتوى الكامل بدون شريط تمرير عمودي. لا يعقلني الكثير ، لكنه يعمل!

انظر: http://fortboise.org/maps/sailing-spots.html


Answer #5

إذا لم يكن هناك شيء آخر ، فحاول إضافة المحتوى بعد فتح النافذة. هذا يجب أن قوة لتغيير حجمها.

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

Answer #6

إضافة div داخل infowindow الخاص بك

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

ثم قم بتعيين الحجم باستخدام برنامج css. تناسبني. هذا asumes جميع infowindows هي بنفس الحجم!

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

Answer #7

إن إضافة ما يلي إلى CSS الخاص بي كان خدعة بالنسبة لي:

white-space: nowrap;

Answer #8

استخدم الحدث المسيطر وأعد فتح نافذة المعلومات وأظهر المحتوى المخفي بعد تنشيط الحدث المسيطر مرتين لضمان تحميل جميع عناصر 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) ، ولكن في بعض الأحيان لم ينجح ذلك إذا استغرق تحميل المحتوى (أي: الصور) وقتًا طويلاً جدًا.

أتمنى أن يكون هذا مناسبا لك.


Answer #9

جوابي هو إضافة مستمع (باستخدام 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);
            });

Answer #10

حاولت كل واحد من الإجابات المذكورة. لا شيء يعمل بالنسبة لي. هذا أخيرا تم تثبيته نهائيًا. الرمز الذي ورثته كان يحتوي على غلاف DIV حول كافة الإدخالات <h#> و <p> . أنا ببساطة أجبرت بعض "نمط" في نفس DIV ، مع الأخذ بعين الاعتبار عرض ماكس المطلوب ، رمى في تغيير خط الطول فقط في حالة (إصلاح شخص آخر) white-space: nowrap الخاص white-space: nowrap ، مما جعل جعل تجاوز التلقائي التعديلات الصحيحة. لا شريط التمرير ، لا اقتطاع ولا توجد مشاكل!

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

Answer #11

ذاهب لإضافة جوابي إلى القائمة ، حيث لا شيء من هذه المشكلة مشكلتي. انتهى بي الأمر إلى التفاف المحتوى الخاص بي في div ، وإعطاء ذلك div فئة ، وتحديد min-width على div ، وتحديد maxWidth على infoWindow ، وكان كلاهما بحاجة إلى أن يكونا بنفس الحجم ، وإلا فإن العرض أو سيزداد الارتفاع في المربعات التي تحتوي على كمية غير صحيحة من المحتوى.

جافا سكريبت:

// 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;
}

Answer #12

فقط لتلخيص جميع الحلول التي عملت بالنسبة لي في جميع المتصفحات:

  • لا تستخدم الهوامش داخل infowindow ، فقط الحشو.
  • تعيين أقصى عرض لل infowindow:

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

  • التفاف محتويات infowindow مع

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

    (قم بتغيير الحد الأدنى للعرض للقيمة التي قمت بتعيينها على infowindow maxWidth)

لقد اختبرت ذلك وعملت على كل متصفح ، وكان لدي أكثر من 400 علامة ...


Answer #13

كان لدي عنصر مضمّن (علامة) مباشرة داخل div مع style="overflow:auto"[... ملفوف في علامة p وقم بإصلاحه.

يبدو أن أي عنصر مضمّن لا يتم تضمينه في عنصر كتلة مباشرةً داخل infowindow سيؤدي إلى حدوث ذلك.


Answer #14

كنت أواجه نفس المشكلة ، ولا سيما عندما لوحظ العنصر <h2> في السطر الثاني.

لقد قمت بتطبيق فئة على <div> في infoWindow ، وقمت بتغيير الخطوط إلى خط نظام عام (في حالتي ، Helvetica) مقابل خط ويب خط @ وجه كان يستخدمه. قضية حلها.


Answer #15

كنت أواجه نفس المشكلة مع IE وحاولت العديد من الإصلاحات المفصلة في هذه الردود ، ولكن لم أتمكن من إزالة أشرطة التمرير الرأسية في IE بشكل موثوق.

ما كان أفضل بالنسبة لي هو التحول إلى أحجام الخطوط الثابتة داخل infowindow - 'px' ... كنت أستخدم نظام الإدارة البيئية. عن طريق تحديد حجم الخط لم أعد بحاجة إلى الإعلان بوضوح عن عرض أو طول infowindow وذهبت أشرطة التمرير للأبد.


Answer #16

لقد جربت كل هذه الحلول ولم يعمل أي منها. بعد بعض التجربة والخطأ أحسبتها.

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

ضبط خط الطول: طبيعي لقماش خريطة div.


Answer #17

لم أستطع الحصول عليها للعمل بأي شكل من الأشكال أو الشكل ، كنت أضم 3 أقسام في المربع. أنا ملفوفة في div الخارجي ، مع العرض والارتفاعات كل مجموعة بشكل صحيح ، ولم ينجح شيء.

في النهاية قمت بإصلاحه عن طريق تعيين div كأعلى يسار مطلق ، ثم قبل div ، قمت بوضع صورتين ، واحدة بعرض 300px و 1px عالية ، وواحد 120px high و 1px wide ، من gif شفاف.

انها مقياسها بشكل صحيح ثم!

قبيح لكنه يعمل.

يمكنك أيضًا عمل صورة واحدة وتعيين zindex أتوقع ، أو حتى صورة واحدة فقط إذا لم يكن لديك نافذة تفاعل ، ولكن هذا كان يحتوي على نموذج ، لذلك ، لم يكن هذا خيارًا ...


Answer #18

لم يكن من المقبول بالنسبة لي أن أكون رمزًا شاقًا لعرض وعرض نافذة المعلومات ، أو لتعيين white-space: nowrap maxWidth ، فإن حل maxWidth لم يساعدني وكل شيء آخر لم maxWidth لم يكن maxWidth حالة الاستخدام.

كان الحل الخاص بي هو تعيين المحتوى وفتح الإطار ثم عند domready الحدث domready ، قم بتعيين خاصية height CSS على المحتوى إلى أي ارتفاع ، ومن ثم فرض خرائط Google لتغيير حجم InfoWindow وفقًا لذلك.

infoWindow is the InfoWindow object, $infoWindowContents is a Jquery object of the contents I want to put in there, map is my Map object. marker is a marker which was clicked.

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);

(I posted the same solution over on a similar question How do I get a google-maps InfoWindow to resize to fit the content that is placed inside of it? )


Answer #19

من المهم أيضًا ارتفاع حاوية الخريطة. إذا كانت المعلومات صغيرة ، فستكون دائمًا على ارتفاع 80 بكسل. خلاف ذلك maxWidth و #innerDiv إصلاح مثل سحر.


Answer #20

هذا حل مشكلتي تماما:

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

Answer #21

هذا يعمل بالنسبة لي. ضع 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 ؛ انقر على الروابط الموجودة أسفل صور المنزل لعرض خريطة جوجل.


Answer #22

يبدو أن المشكلة متعلقة بنمط الويب Roboto.

يتم تقديم infowindow مع خصائص العرض والارتفاع المضمنة على أساس المحتوى المقدم. ومع ذلك ، لا يتم حسابه مع webfont تم تقديمه / تحميله بالفعل. بمجرد أن يتم تقديم الخط بعد أن تتم طباعة الخريطة بأكملها على الشاشة ، فإنه يؤدي إلى ظهور أشرطة التمرير بسبب خصائص "تجاوز: تلقائي" المضمنة داخل DIVs للنافذة.

الحل الذي وجدته هو عمل التفاف المحتوى في DIV ثم تطبيق CSS لتجاوز webfont:

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

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

Answer #23

يجب أن تعطي المحتوى لـ InfoWindow من كائن jQuery.

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

Answer #24

EDITED (to standout): ثق بي ، من بين مائة إجابات أخرى على هذا السؤال ، هذا هو السؤال الصحيح الوحيد الذي يشرح أيضًا سبب حدوثه

حسنًا ، أعرف أن هذا الخيط قديم ، ولديه ألف إجابات ، ولكن أيا منها ليس صحيحًا ، وأشعر بالحاجة إلى نشر الإجابة الصحيحة.

أولاً ، لا تحتاج في أي وقت إلى تحديد width's أو height's على أي شيء حتى يتم عرض معلوماتك دون أشرطة التمرير ، على الرغم من أنك أحيانًا قد تحصل عليها عن طريق الخطأ عن طريق القيام بذلك (ولكنها ستفشل في النهاية).

ثانيًا ، لا تحتوي واجهة برمجة تطبيقات خرائط Google على خطأ في التمرير ، فمن الصعب جدًا العثور على المعلومات الصحيحة حول كيفية عملها. حسنا ، هنا هو:

عندما تخبر واجهة برمجة تطبيقات خرائط Google أن تفتح في 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 (مما يعني أنه في هذا المثال ، يتم تطبيق أي قواعد CSS في المستند على علامات h1 و p سيتم تطبيقها عليه) للحصول على width height . ثم تأخذ Google ذلك القسم ، وتعيِّن القياسات التي حصلت عليها عند إلحاقها بصفحتك ، ووضعها على الخريطة في الموقع الذي حددته.

هنا حيث تحدث المشكلة لكثير من الناس - قد يكون لديهم 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 div" المؤقت يتم إلحاقه بالجسم) ، ولكن عندما يكون API بالفعل يضع infoWindow على الخريطة ، سيكون محدد #map-canvas h1 الأسبقية مما يتسبب في اختلاف حجم الخط عن ما كان عليه عند قياس API لحجم infoWindow وفي هذه الحالة ستحصل دائمًا على أشرطة التمرير.

قد يكون هناك فروق طفيفة مختلفة قليلاً عن السبب المحدد infoWindow أشرطة التمرير في infoWindow الخاص بك ، ولكن السبب وراء ذلك هو بسبب هذا:

يجب تطبيق قواعد CSS نفسها على المحتوى الموجود داخل infoWindow بغض النظر عن مكان ظهور عنصر HTML الفعلي في الترميز. إذا لم يفعلوا ذلك ، فسيتم ضمان الحصول على أشرطة التمرير في 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...

لذلك ، بغض النظر عن مكان إلحاق واجهة برمجة التطبيقات بقياس div - قبل النص النهائي أو داخل لوحة #map-canvas ، ستظل قواعد CSS المطبقة عليه هي نفسها دائمًا.

تحرير RE: عائلات الخط

يبدو أن Google تعمل على حل مشكلة تحميل الخطوط (الموضحة أدناه) وقد تغيرت الوظيفة مؤخرًا جدًا ، لذا قد ترى أو لا ترى تحميل خط Roboto عند فتح infoWindow للمرة الأولى ، وفقًا لإصدار واجهة برمجة التطبيقات التي تستخدمها . هناك تقرير علة مفتوح (على الرغم من أنه في changelog تم وضع علامة على هذا الخطأ بالفعل) ، يوضح أن جوجل لا تزال تواجه صعوبة مع هذه المشكلة.

شيء واحد أكثر من ذلك: مشاهدة عائلاتك FONT!

في أحدث تجسيد لواجهة برمجة التطبيقات ، حاولت google أن تكون ذكية وتلف محتوى infoWindow في شيء يمكن استهدافه باستخدام محدد CSS - .gm-style-iw . بالنسبة للأشخاص الذين لم يفهموا القواعد التي شرحتها أعلاه ، فإن هذا لم يساعد بالفعل ، وفي بعض الحالات زاد الأمر سوءًا. تظهر أشرطة التمرير دائمًا في أول مرة يتم infoWindow فتح infoWindow ، ولكن إذا فتحت أي infoWindow مرة أخرى ، حتى مع نفس المحتوى بالضبط infoWindow أشرطة التمرير. على محمل الجد ، إذا لم تكن مرتبكة قبل هذا من شأنه أن يجعلك تفقد عقلك. إليك ما كان يحدث:

إذا نظرت إلى الأنماط التي تحملها google على الصفحة عند تحميل واجهة برمجة التطبيقات ، فستتمكن من رؤية ذلك:

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

حسنًا ، أرادت Google جعل الخرائط أكثر اتساقًا من خلال جعلها تستخدم دائمًا عائلة الخط Roboto . المشكلة هي أنه بالنسبة لغالبية الأشخاص ، قبل فتح infoWindow ، لم يكن المتصفح قد قام بتنزيل خط Roboto حتى الآن (لأن أي شيء آخر على صفحتك استخدمه بحيث يكون المتصفح ذكيًا بما يكفي ليعلم أنه لا يحتاج لتنزيل هذا الخط). تنزيل هذا الخط ليس فوريًا ، على الرغم من أنه سريع جدًا. في المرة الأولى التي تقوم فيها بفتح infoWindow و API بإلحاق div بمحتوى infoWindow الخاص بك إلى الجسم لإجراء قياساته ، يبدأ تنزيل خط Roboto ، ولكن يتم أخذ قياسات infoWindow's النافذة على الخريطة قبل انتهاء تنزيل Roboto . كانت النتيجة ، في كثير من الأحيان ، عبارة عن نظام infoWindow تم أخذ قياساته عندما تم عرض محتواه باستخدام Arial أو خط sans-serif ، ولكن عندما تم عرضه على الخريطة (وكان Roboto قد انتهى من التنزيل) كان يتم عرض المحتوى في خط كان infoWindow فويلا - تظهر أشرطة التمرير في المرة الأولى التي تفتح فيها infoWindow . افتح نفس المعلومات بالضبط مرة أخرى للمرة الثانية - وعند هذه النقطة تم تنزيل Roboto وسيتم استخدامه عندما تأخذ API قياسات لمحتوى المعلومات ، ولن ترى أي أشرطة تمرير.


Answer #25

مضحك بما فيه الكفاية ، في حين أن التعليمة البرمجية التالية ستقوم بتصحيح شريط التمرير WIDTH:

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

}

استغرق هذا لتصحيح شريط التمرير HEIGHT:

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

تحرير: إضافة المسافة البيضاء: nowrap؛ إلى أي نمط قد تصحيح مشكلة المسافات التي يبدو أنها قائمة عند إزالة أشرطة التمرير. نقطة عظيمة ناثان.


Answer #26

After losing time and reading for a while, I just wanted something simple, this css worked for my requirements.

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

Also is not an instant solution but starring/commenting on the issue might make them fix it, as they believe it is fixed: http://code.google.com/p/gmaps-api-issues/issues/detail?id=5713


Answer #27

Well this is the one that did the trick for me:

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

Only setting overflow: visible on .gm-style-iw actually made the problem worse! I noticed in the Chrome developer tools inspector that there are two divs inside the .gm-style-iw element, both which have overflow: auto set by default.

I'm displaying quite a lot of HTML-formatted text in my InfoWindows, that might be why the other solutions didn't work at all for me.


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

يعمل بالنسبة لي


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




google-maps