Google मैप्स API v3: InfoWindow सही तरीके से साइज़ नहीं हो रहा है

Question 1

यह मेरा InfoWindow प्रतीत होता है, जब आप मेरे Google मैप्स v3 पर होम आइकन पर क्लिक करते हैं, तो InfoWindow की सामग्री के लिए ऑटो-साइज़िंग ठीक से नहीं है।

यह स्क्रॉलबार्स देता है जब यह नहीं होना चाहिए। InfoWindow को ऑटो-साइज़िंग ठीक से होना चाहिए।

किसी भी विचार क्यों?

अनुरोध के अनुसार, संबंधित JavaScript जो HTML को InfoWindow के लिए इंजेक्ट करती है:

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

अपडेट करें

इस बग को इश्यू में Google ने संभाला था

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

फिक्स को जावास्क्रिप्ट जावास्क्रिप्ट एपीआई के 3.19 संस्करण में फरवरी 2015 में लागू किया गया था।

Question 2

अपने infowindow के अंदर एक div जोड़ें

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

फिर css का उपयोग करके आकार सेट करें। मेरे लिये कार्य करता है। यह मानता है कि सभी infowindows एक ही आकार के हैं!

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

Question 3

संक्षिप्त उत्तर: कंस्ट्रक्टर में maxWidth विकल्प संपत्ति सेट करें । हां, अधिकतम चौड़ाई निर्धारित करने पर भी आप जो करना चाहते थे वह नहीं था।

लम्बी कहानी: v2 को v3 में माइग्रेट करते हुए, मैंने वास्तव में वर्णित समस्या को देखा। विंडोज चौड़ाई और ऊंचाई में भिन्न है, और कुछ में ऊर्ध्वाधर स्क्रॉलबार और कुछ नहीं थे। कुछ के पास <br /> डेटा में एम्बेडेड था, लेकिन कम से कम उस आकार के साथ एक ठीक था।

मुझे नहीं लगता था कि 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

EDITED (टू स्टैंडआउट): इस सवाल के सौ अन्य जवाबों में से मुझ पर भरोसा करें, यह एकमात्र सही है जो यह भी बताता है कि यह क्या हो रहा है

ठीक है, तो मुझे पता है कि यह धागा पुराना है, और एक हजार उत्तर हैं, लेकिन उनमें से कोई भी सही नहीं है और मुझे सही उत्तर पोस्ट करने की आवश्यकता महसूस होती है।

सबसे पहले, आपको अपनी जानकारी प्राप्त करने के लिए कभी भी निर्दिष्ट करने या किसी भी चीज़ पर जाने की आवश्यकता नहीं है। स्क्रॉलबार के बिना प्रदर्शित करने के लिए, हालांकि कभी-कभी आप गलती से ऐसा करने से काम कर सकते हैं (लेकिन यह अंततः विफल हो जाएगा)।width'sheight's

दूसरा, Google मैप्स एपीआई में स्क्रॉलिंग बग infoWindow's नहीं है, यह कैसे काम करता है, इसके बारे में सही जानकारी प्राप्त करना बहुत मुश्किल है। खैर, यहाँ यह है:

जब आप Google मैप्स एपीआई को इस तरह से खोलने की जानकारी देते हैं:

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अपने पृष्ठ के अंत में होने वाले स्थानों की कल्पना करते हैं ) तो एचटीएमएल सामग्री के साथ। निर्दिष्ट। यह उस div को मापता है (जिसका अर्थ है कि, इस उदाहरण में, मेरे दस्तावेज़ में जो भी CSS नियम लागू होते हैं h1और pउसे पाने के लिए और उस पर टैग लागू होंगे) widthऔर height। Google फिर divउसको मापता है , उसको माप देता है जो उसे तब मिलता है जब उसे आपके पृष्ठ पर जोड़ा गया था, और इसे आपके द्वारा निर्दिष्ट स्थान पर मानचित्र पर रखता है।

यहाँ समस्या बहुत से लोगों के लिए होती है - उनके पास ऐसा दिखने वाला HTML हो सकता है:

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

और, किसी भी कारण से, सीएसएस जो इस तरह दिखता है:

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

क्या आप समस्या देख सकते हैं? जब एपीआई आपके लिए माप लेने की कोशिश करता है infoWindow(तुरंत इसे प्रदर्शित करने से पहले), h1सामग्री के हिस्से का आकार होगा 18px(क्योंकि अस्थायी "मापने वाला div" शरीर से जुड़ा हुआ है), लेकिन जब एपीआई वास्तव में जगह infoWindowपर होता है मानचित्र, #map-canvas h1चयनकर्ता पूर्वता लेगा , जिससे फ़ॉन्ट आकार उस समय की तुलना में बहुत भिन्न होगा जब एपीआई ने आकार को मापा था infoWindowऔर इस परिस्थिति में आपको हमेशा स्क्रॉलबार मिलेगा।

आपके द्वारा स्क्रॉलबार होने के विशिष्ट कारण के लिए कुछ और अलग-अलग बारीकियां हो सकती हैं infoWindow, लेकिन इसके पीछे का कारण यह है:

समान सीएसएस नियम आपके अंदर की सामग्री पर लागू होने चाहिए, infoWindow भले ही वास्तविक HTML तत्व मार्कअप में दिखाई देता हो। यदि वे नहीं करते हैं, तो आपको अपने जानकारी में स्क्रॉलबार प्राप्त करने की गारंटी दी जाएगी

तो जो मैं हमेशा करता हूं, वह कुछ इस तरह है:

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

और मेरे सीएसएस में:

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

तो कोई फर्क नहीं पड़ता कि एपीआई कहां मापता है div- बंद होने से पहले bodyया उसके अंदर #map-canvas, इस पर लागू सीएसएस नियम हमेशा एक जैसे रहेंगे।

संपादित करें: फ़ॉन्ट परिवार

लगता है कि Google फॉन्ट लोडिंग मुद्दे पर सक्रिय रूप से काम कर रहा है (नीचे वर्णित है) और कार्यक्षमता बहुत हाल ही में बदल गई है इसलिए जब आप infoWindowपहली बार खुल रहे हैं, तो आपके द्वारा उपयोग किए जा रहे एपीआई के संस्करण के आधार पर रोबोटो फ़ॉन्ट लोड नहीं देखा जा सकता है या नहीं । एक खुली बग रिपोर्ट है (भले ही चैंज में यह बग रिपोर्ट पहले से ही तय हो गई थी) जो बताती है कि इस समस्या से Google को अभी भी कठिनाई हो रही है।

एक और बात: अपने परिवार के सदस्यों को देखो !!!

एपीआई के नवीनतम अवतार में, Google ने चतुर होने की कोशिश की और यह जानकारी लपेटी है जिसमें कुछ ऐसी सामग्री है जिसे सीएसएस चयनकर्ता के साथ लक्षित किया जा सकता है - .gm-style-iw। उन लोगों के लिए जो ऊपर बताए गए नियमों को नहीं समझते थे, यह वास्तव में मदद नहीं करता था, और कुछ मामलों में इसे और भी बदतर बना दिया। स्क्रॉलबार्स लगभग हमेशा दिखाई देंगे पहली बार एक infoWindowखोला गया था, लेकिन अगर आपने infoWindowफिर से खोला , तो ठीक उसी सामग्री के साथ भी स्क्रॉलबार चले जाएंगे। गंभीरता से, यदि आप इससे पहले भ्रमित नहीं थे, तो इससे आपका दिमाग खराब हो जाएगा। यहाँ क्या हो रहा था:

यदि आप API लोड होने पर पृष्ठ पर Google लोड होने वाली शैलियों को देखते हैं, तो आप इसे देख पाएंगे:

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

ठीक है, इसलिए Google इसे मैप्स Roboto-परिवार का उपयोग करके हमेशा नक्शे को थोड़ा अधिक सुसंगत बनाना चाहता था । समस्या यह है कि अधिकांश लोगों के लिए, इससे पहले कि आप एक को खोलते infoWindow, ब्राउज़र ने अभी तक Robotoफ़ॉन्ट डाउनलोड नहीं किया था (क्योंकि आपके पृष्ठ पर और कुछ भी इसका उपयोग नहीं करता है, इसलिए ब्राउज़र यह जानने के लिए पर्याप्त स्मार्ट है कि इसे डाउनलोड करने की आवश्यकता नहीं है यह फ़ॉन्ट)। इस फ़ॉन्ट को डाउनलोड करना तात्कालिक नहीं है, भले ही यह बहुत तेज़ हो। पहली बार जब आप खोलते हैं infoWindowऔर एपीआई divआपकी infoWindowसामग्री के साथ शरीर को मापता है, तो यह माप लेना शुरू करता है, यह Robotoफ़ॉन्ट डाउनलोड करना शुरू कर देता है , लेकिन आपकी infoWindow'sमाप ली जाती है और विंडो को Robotoडाउनलोड करने से पहले मानचित्र पर रखा जाता है । परिणाम, अक्सर, एक थाinfoWindowजिसकी माप तब ली गई थी जब वह सामग्री का उपयोग कर Arialया एक sans-serifफ़ॉन्ट के साथ प्रदान की गई थी , लेकिन जब इसे मानचित्र पर प्रदर्शित किया गया था (और Robotoडाउनलोड करना समाप्त कर दिया था) तो यह सामग्री एक ऐसे फ़ॉन्ट में प्रदर्शित की जा रही थी जो एक अलग आकार था - और वॉइला - स्क्रॉलबार्स पहली बार दिखाई देते हैं तुम खोलो infoWindow। ठीक infoWindowदूसरी बार खोलें - जिस बिंदु पर Robotoडाउनलोड किया गया है और इसका उपयोग तब किया जाएगा जब एपीआई इसे 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 में तत्व थे, और इन दोनों में नीचे मार्जिन था। मैंने हाशिये को हटा दिया, और InfoWindow ने सही आकार दिया। अन्य सुझाए गए सुधारों में से किसी ने भी काम नहीं किया। मुझे संदेह है कि InfoWindow आकार की गणना हाशिये को ध्यान में नहीं रखती है।

Question 9

सूची में अपना उत्तर जोड़ने जा रहे हैं, क्योंकि इनमें से किसी ने भी मेरी समस्या तय नहीं की है। मैंने अपनी सामग्री को एक div में लपेटकर समाप्त कर दिया, जिससे उस div को एक वर्ग दिया, और min-widthdiv पर निर्दिष्ट किया , और निर्दिष्ट किया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
});

सीएसएस:

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

Question 10

मैंने इन सभी समाधानों की कोशिश की है और कोई भी काम नहीं किया है। कुछ परीक्षण और त्रुटि के बाद मैंने इसका पता लगाया।

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

सेट लाइन-ऊंचाई: नक्शा कैनवास div के लिए सामान्य।

Question 11

ऐसा प्रतीत होता है कि यह मुद्दा रोबोटो वेबफोंट के साथ है।

Infowindow प्रदान की गई सामग्री के आधार पर इनलाइन चौड़ाई और ऊंचाई गुणों के साथ प्रदान की जाती है। हालाँकि, यह पहले से ही प्रदान / लोड किए गए वेबफॉन्ट के साथ गणना नहीं की जाती है। एक बार जब फ़ॉन्ट प्रदान किया जाता है, तो पूरे मानचित्र को स्क्रीन पर प्रिंट किया जाता है, फिर यह विंडो के DIV के अंदर "अतिप्रवाह: ऑटो" गुणों के कारण स्क्रॉलबार दिखाई देता है।

मुझे जो काम करने का हल मिला वह है DIV में सामग्री को लपेटना और फिर webfont को ओवरराइड करने के लिए CSS लागू करना:

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

}

यह ऊँचाई स्क्रॉल पट्टी को सही करने के लिए लिया गया:

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

संपादित करें: श्वेत-स्थान जोड़ना: अब्रैप; या तो शैली स्क्रॉलिंग को हटाए जाने पर लैंगिंग के लिए लगने वाले रिक्ति समस्या को ठीक कर सकती है। महान बिंदु नाथन।

Question 13

यह मेरे लिए काम करता है। एक रखो divमेंsetContent

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

फिर इस सीएसएस को अपने पेज में जोड़ें:

<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 में ऊर्ध्वाधर स्क्रॉलबार को विश्वसनीय रूप से हटाने में असमर्थ था।

मेरे लिए जो सबसे अच्छा काम किया गया था, वह infowindow के अंदर निश्चित फ़ॉन्ट आकारों पर स्विच करना था - 'px' ... मैं ems का उपयोग कर रहा था। फ़ॉन्ट आकार को ठीक करने से मुझे अब उल्लंघनकारी चौड़ाई या ऊंचाई को स्पष्ट रूप से घोषित करने की आवश्यकता नहीं थी और स्क्रॉलबार अच्छे के लिए चले गए थे।

Question 16

इसके अलावा महत्वपूर्ण नक्शा कंटेनर की ऊंचाई है। यदि छोटी जानकारी के लिए हमेशा 80px ऊंचाई पर होगा। अन्यथा maxWidthऔर #innerDivफिक्स एक आकर्षण की तरह काम करता है।

Question 17

यदि और कुछ नहीं है, तो विंडो खोलने के बाद सामग्री को जोड़ने का प्रयास करें। इसे इसे आकार बदलने के लिए मजबूर करना चाहिए।

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

Question 18

पहले से ही ईवेंट का उपयोग करें और जानकारी विंडो को फिर से खोलें और डोम सामग्री को दो बार लोड करने के बाद छिपी हुई सामग्री को दिखाने के लिए सुनिश्चित करें कि सभी डोम तत्वों को लोड किया गया है।

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

मैंने केवल एक सेटटाइमआउट (/ * शो इनोविन कॉलबैक * / /, 100) करने की कोशिश की, लेकिन कभी-कभी यह तब भी काम नहीं करता था यदि सामग्री (यानी: चित्र) को लोड करने में बहुत लंबा समय लगता था।

उम्मीद है इससे आपका काम बनेगा।

Question 19

मैं एक ही मुद्दा रहा था, विशेष रूप से ध्यान देने योग्य जब मेरा <h2>तत्व एक दूसरी पंक्ति में लिपटे।

मैंने एक वर्ग को <div>infoWindow में लागू किया , और एक सामान्य प्रणाली फ़ॉन्ट (मेरे मामले में, हेल्वेटिका) बनाम एक @ फ़ॉन्ट-फेस वेब फ़ॉन्ट का उपयोग किया जो इसे उपयोग कर रहा था। समस्या का समाधान हो गया।

Question 20

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

Question 21

min-heightअपने infoWindow वर्ग तत्व में एक जोड़ें ।

यदि आपकी infoWindows सभी समान आकार की है तो समस्या का समाधान हो जाएगा।

यदि नहीं, तो जानकारी के लिए अपने क्लिक फ़ंक्शन में jQuery की इस लाइन को जोड़ें:

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

Question 22

मैं इसे किसी भी तरह से आकार या रूप में काम करने के लिए प्राप्त नहीं कर सका, मैं बॉक्स में 3 divs शामिल था। मैंने उन्हें एक बाहरी div में लपेटा, जिसमें चौड़ाई और ऊँचाई सभी सही ढंग से सेट थी, और कुछ भी काम नहीं किया।

अंत में मैंने इसे div को पूर्ण शीर्ष बाएँ के रूप में सेट करके ठीक किया, और फिर div से पहले, मैंने दो चित्र, एक 300px चौड़ा और 1px ऊँचा, एक 120px ऊँचा और 1px चौड़ा, एक पारदर्शी gif का सेट किया।

यह तो ठीक से बढ़ाया!

इसके बदसूरत लेकिन यह काम करता है।

आप एक छवि भी कर सकते हैं और एक zindex सेट कर सकते हैं जिसकी मुझे उम्मीद है, या यहां तक कि सिर्फ एक छवि है अगर आपकी विंडो में कोई इंटरैक्शन नहीं है, लेकिन यह एक फॉर्म से युक्त था, इसलिए, यह एक विकल्प नहीं था ...

Question 23

मुझे लगता है कि बाहरी कंटेनर में कुछ सीएसएस स्टाइल के कारण यह व्यवहार होता है, मुझे भी यही समस्या थी, लेकिन मैंने इसे एक आंतरिक डिव का उपयोग करके हल किया, इसमें कुछ पैडिंग को जोड़ा गया, मुझे पता है कि यह अजीब है, लेकिन इसने समस्या को हल कर दिया है

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

और मेरी शैली में

div#fix_height{
    padding: 5px;
}

Question 24

मैं एक इनलाइन तत्व (एक एक टैग) सीधे के अंदर था divके साथ style="overflow:auto"[...लिपटे है कि एक में pटैग और यह तय हो गई।

किसी भी इनलाइन तत्व की तरह दिखता है जो सीधे एक तत्व में निहित नहीं होता है, जो कि इन्फिनिंडो के अंदर सीधे होता है।

Question 25

मेरा उत्तर श्रोता को जोड़ने के लिए है (addListenerOnce का उपयोग करके) यह जाँचने के लिए कि क्या infoWindow को DOM में जोड़ा गया है, तो फिर से जानकारी खोलकर (इसे बंद करने की आवश्यकता नहीं है)।

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

मेरे सीएसएस में निम्नलिखित जोड़ना मेरे लिए चाल है:

white-space: nowrap;

Question 27

सभी ब्राउज़रों में मेरे लिए काम करने वाले सभी समाधानों को संक्षेप में बताने के लिए:

काफिर के अंदर मार्जिन का उपयोग न करें, केवल पैडिंग।
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 से अधिक मार्कर थे ...

Question 28

मुझे पता है कि बहुत से अन्य लोगों ने ऐसे समाधान पाए हैं जो उनके विशेष मामले के लिए काम करते हैं, लेकिन चूंकि उनमें से किसी ने भी मेरे विशेष मामले के लिए काम नहीं किया , इसलिए मुझे लगा कि यह किसी और के लिए उपयोगी हो सकता है।

कुछ विवरण:

मैं एक परियोजना पर गूगल मैप्स एपीआई v3 का उपयोग कर रहा हूं जहां इनलाइन सीएसएस हम वास्तव में कुछ है, वास्तव में बचना चाहते हैं। IE11 को छोड़कर मेरा इन्फॉवुएंट सब कुछ के लिए काम कर रहा था, जहां चौड़ाई की सही गणना नहीं की गई थी। इसके परिणामस्वरूप div overflows हुआ, जिससे स्क्रॉलबार शुरू हो गया।

मुझे तीन काम करने थे:

सभी प्रदर्शन निकालें: इनवॉइंड कंटेंट के अंदर कुछ भी से इनलाइन-ब्लॉक स्टाइल रूल्स (मैं डिस्प्ले: ब्लॉक के साथ बदल दिया गया) - मुझे एक थ्रेड (जो मुझे अब नहीं मिल सकता है) से यह कोशिश करने का विचार मिला, जहां कोई एक ही था IE6 के साथ समस्या।
एक स्ट्रिंग के बजाय एक डोम नोड के रूप में सामग्री को पास करें। मैं 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सीएसएस संपत्ति को उस सामग्री पर सेट करें जो ऊंचाई है, और फिर Google मैप्स को तदनुसार इन्फोवेन्डो के आकार के लिए मजबूर करें।

infoWindowInfoWindow ऑब्जेक्ट है, मेरे द्वारा $infoWindowContentsवहां डाली जाने वाली सामग्री का एक Jquery ऑब्जेक्ट है, 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);

(मैं एक ऐसी ही सवाल पर पर एक ही समाधान तैनात मैं कैसे मिलता है एक गूगल-नक्शे InfoWindow सामग्री है कि इसके बारे में अंदर रखा जाता है फिट करने के लिए आकार बदलने के लिए? )

Question 30

समय गंवाने और थोड़ी देर पढ़ने के बाद, मुझे बस कुछ सरल चाहिए था, इस सीएसएस ने मेरी आवश्यकताओं के लिए काम किया।

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

यह भी एक त्वरित समाधान नहीं है, लेकिन इस मुद्दे पर अभिनीत / टिप्पणी करना उन्हें ठीक कर सकता है, जैसा कि वे मानते हैं कि यह तय है: http://code.google.com/p/gmaps-ap-issues/issues/detail?id= 5713

Question 31

खैर यह वह है जिसने मेरे लिए चाल चली:

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

केवल सेटिंग overflow: visibleने .gm-style-iwवास्तव में समस्या को बदतर बना दिया! मैंने क्रोम डेवलपर टूल इंस्पेक्टर में देखा कि .gm-style-iwतत्व के अंदर दो div हैं , दोनों overflow: autoको डिफ़ॉल्ट रूप से सेट किया है।

मैं अपने InfoWindows में काफी HTML-स्वरूपित पाठ प्रदर्शित कर रहा हूं, यही कारण है कि अन्य समाधान मेरे लिए बिल्कुल भी काम नहीं कर सकते हैं।