গুগল ম্যাপস এপিআই ভি 3: ইনফর্ম উইন্ডো সঠিকভাবে আকার দিচ্ছে না

Question 1

এটি আমার ইনফো উইন্ডোতে উপস্থিত হয়, যখন আপনি আমার গুগল ম্যাপস ভি 3 এর হোম আইকনে ক্লিক করেন, সঠিকভাবে ইনফো উইন্ডোর সামগ্রীটিতে স্বয়ংক্রিয় আকার দেওয়া হয় না।

এটি যখন না করা উচিত তখন স্ক্রোলবার দেয়। ইনফো উইন্ডোটি সঠিকভাবে অটো-সাইজিং করা উচিত।

কেন কোন ধারণা?

অনুরোধ অনুসারে, সম্পর্কিত জাভাস্ক্রিপ্ট যা ইনফর্ম উইন্ডোর জন্য এইচটিএমএলকে ইনজেক্ট করে:

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

হালনাগাদ

গুগল ইস্যুতে এই বাগটি পরিচালনা করেছিল

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

ফ্যাক্সটি মানচিত্র জাভাস্ক্রিপ্ট API এর 3.19 সংস্করণে ফেব্রুয়ারী 2015 তে প্রয়োগ করা হয়েছিল।

Question 2

আপনার infowindow ভিতরে একটি ডিভ যোগ করুন

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

তারপরে সিএসএস ব্যবহার করে আকার নির্ধারণ করুন। আমার জন্য কাজ কর. এই হিসাবে সমস্ত infowindows একই আকার হয়!

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

Question 3

সংক্ষিপ্ত উত্তর: কন্সট্রাক্টরের সর্বাধিক প্রস্থের বিকল্পগুলি সেট করুন । হ্যাঁ, সর্বাধিক প্রস্থ নির্ধারণ করা আপনি যা করতে চেয়েছিলেন তা না হলেও।

দীর্ঘ গল্প: একটি ভি 2 মানচিত্রকে v3 এ স্থানান্তরিত করে, আমি ঠিক দেখতে পেয়েছি সমস্যাটি দেখেছি। উইন্ডোজ প্রস্থ এবং উচ্চতা বিভিন্ন, এবং কিছু উল্লম্ব স্ক্রোলবার ছিল এবং কিছু না। কারও কারও কাছে <br /> ডেটা এম্বেড করা ছিল, তবে কমপক্ষে সেই মাপের ঠিক আছে one

আমি উইন্ডোস অপশনস.ম্যাক্সউথের সম্পত্তি প্রাসঙ্গিক বলে মনে করি নি, যেহেতু আমি প্রস্থকে সীমাবদ্ধ রাখার যত্ন করি নি ... তবে ইনফো উইন্ডো কনস্ট্রাক্টরের সাথে সেট করে আমি যা চেয়েছিলাম তা পেয়েছি, এবং উইন্ডোজগুলি এখন স্বয়ংক্রিয়ভাবে (উল্লম্বভাবে) এবং উল্লম্ব স্ক্রোলবার ছাড়া সম্পূর্ণ সামগ্রী প্রদর্শন করুন। আমার কাছে অনেক কিছু বোঝায় না, তবে এটি কাজ করে!

দেখুন: http://fortboise.org/maps/sailing-spots.html

Question 4

JQuery অবজেক্ট থেকে আপনার তথ্যটি উইন্ডোতে দেওয়া উচিত।

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

সম্পাদনা (স্ট্যান্ডআউট): আমার উপর বিশ্বাস রাখুন, এই প্রশ্নের আরও শতাধিক উত্তরের মধ্যে, এটিই হ'ল কেন এটি হচ্ছে তা ব্যাখ্যা করে এমন একমাত্র সঠিক উত্তর

ঠিক আছে, তাই আমি জানি যে এই থ্রেডটি পুরানো, এবং এর হাজার উত্তর রয়েছে, তবে এর কোনওটিই সঠিক নয় এবং আমি সঠিক উত্তর পোস্ট করার প্রয়োজনীয়তা অনুভব করছি।

প্রথমত, আপনার স্ক্রোলবারগুলি ব্যতীত আপনার ইনফোউন্ডোটি প্রদর্শনের জন্য আপনাকে কখনই নির্দিষ্ট বা কোনও কিছু দেওয়ার প্রয়োজন হবে না , যদিও কখনও কখনও আপনি দুর্ঘটনাক্রমে এটি করে এটি কাজ করতে পারেন (তবে এটি শেষ পর্যন্ত ব্যর্থ হবে)।width'sheight's

দ্বিতীয়ত, Google মানচিত্র API infoWindow's না এটা কিভাবে তারা কাজ সঠিক তথ্য খুঁজে পেতে শুধু খুব কঠিন একটি স্ক্রলিং বাগ আছে। ঠিক আছে, এটি এখানে:

আপনি যখন গুগল ম্যাপস এপিআইকে ইনফো উইন্ডোতে এটি খুলতে বলবেন:

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

সমস্ত উদ্দেশ্য এবং উদ্দেশ্যগুলির জন্য, গুগল মানচিত্রগুলি অস্থায়ীভাবে divআপনার পৃষ্ঠার শেষে একটি স্থান রাখে ( আসলে এটি একটি তৈরি করে detached DOM tree- তবে আমি বুঝতে চাইছি যে আপনি যদি divআপনার পৃষ্ঠার শেষের দিকে কোনও স্থানের কথা কল্পনা করেন ) এইচটিএমএল বিষয়বস্তু সহ নির্দিষ্ট এরপরে এটি পরিমাপ করে যে ডিভ (যার অর্থ এই উদাহরণস্বরূপ, আমার নথিতে সিএসএসের যে কোনও বিধি প্রযোজ্য h1এবং pট্যাগগুলি এতে প্রয়োগ করা হবে) এটি পেতে widthএবং height। গুগল তার পরে এটি গ্রহণ করে div, এটি আপনার পৃষ্ঠায় যুক্ত হওয়ার পরে এটি যে পরিমাপ করেছিল তা নির্ধারণ করে এবং এটি আপনার নির্দিষ্ট করা অবস্থানে মানচিত্রে রাখে।

এখানে অনেক লোকের জন্য সমস্যাটি ঘটে - তাদের এইচটিএমএল থাকতে পারে যা দেখতে এটি দেখতে পারে:

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

এবং, যে কারণেই হোক না কেন, সিএসএস যা দেখতে এই রকম দেখাচ্ছে:

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

সমস্যা দেখতে পাচ্ছ? যখন এপিআই আপনার infoWindow(এটি প্রদর্শন করার আগে অবিলম্বে) জন্য পরিমাপগুলি গ্রহণ করার চেষ্টা করে h1, তখন সামগ্রীর অংশটির একটি আকার থাকবে 18px(কারণ অস্থায়ী "পরিমাপ ডিভ" শরীরে সংযুক্ত করা হয়েছে), কিন্তু যখন এপিআই প্রকৃতপক্ষে এটি স্থাপন infoWindowকরে মানচিত্র, #map-canvas h1নির্বাচক অগ্রাধিকার গ্রহণ করবে যার ফলে ফন্টের আকারটি তার চেয়ে অনেক বেশি আলাদা হবে যখন এপিআই এর আকার মাপত infoWindowএবং এই পরিস্থিতিতে আপনি সর্বদা স্ক্রোলবার পাবেন।

আপনার নিজের মধ্যে স্ক্রোলবার রয়েছে তার নির্দিষ্ট কারণের জন্য আরও কিছুটা পৃথক সূক্ষ্মতা থাকতে পারে infoWindow, তবে এর পিছনে কারণটি কারণ:

infoWindow প্রকৃত এইচটিএমএল উপাদানটি যেখানে মার্কআপে উপস্থিত হয় তা নির্বিশেষে আপনার অভ্যন্তরের সামগ্রীতে একই সিএসএস বিধি প্রয়োগ করতে হবে । যদি তারা তা না করে তবে আপনার ইনফো উইন্ডোতে আপনাকে স্ক্রোলবারগুলি পাওয়ার নিশ্চয়তা দেওয়া হবে

তাই আমি সবসময় যা করি তা হ'ল এইরকম:

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, এটি প্রয়োগ করা সিএসএসের নিয়ম সর্বদা একই থাকবে।

সম্পাদনা করুন: হরফ পরিবার

গুগল হ'ল ফন্ট লোডিং ইস্যুতে সক্রিয়ভাবে কাজ করছে বলে মনে হচ্ছে (নীচে বর্ণিত) এবং কার্যকারিতা খুব সম্প্রতি পরিবর্তিত হয়েছে যাতে আপনি infoWindowপ্রথমবার যখন খুলবেন তখন আপনি রবোটো ফন্ট লোড দেখতে বা দেখতে পাবেন না , আপনি যে এপিআইটি ব্যবহার করছেন তার সংস্করণের উপর নির্ভর করে। একটি ওপেন বাগ রিপোর্ট রয়েছে (যদিও চেঞ্জলগে এই ত্রুটি প্রতিবেদনটি ইতিমধ্যে স্থির হিসাবে চিহ্নিত করা হয়েছিল) যা চিত্রিত করে যে গুগল এখনও এই সমস্যাটির সাথে অসুবিধায় রয়েছে।

আরও একটি বিষয়: আপনার ফন্টের পরিবারগুলি দেখুন!

এপিআইয়ের সর্বশেষতম অবতারে, গুগল চতুর হতে চেষ্টা করেছিল এবং কোনও তথ্য সিএসএস নির্বাচকের সাথে লক্ষ্যবস্তু হতে পারে এমন তথ্যতে উইন্ডো সামগ্রীটি মোড়ানোর চেষ্টা করেছিল - .gm-style-iw। যে সমস্ত লোকেরা আমি উপরে বর্ণিত বিধিগুলি বুঝতে পারি নি তাদের পক্ষে এটি সত্যিই সহায়তা করে না এবং কিছু ক্ষেত্রে এটিকে আরও খারাপ করে তুলেছিল। স্ক্রোলবারগুলি সর্বদা প্রথমবার infoWindowখোলার সময় উপস্থিত হয় , তবে আপনি যদি infoWindowআবার কোনওটি খুলেন , এমনকি ঠিক একই সামগ্রীতে স্ক্রোলবারগুলি চলে যাবে। গম্ভীরভাবে, যদি আপনি এর আগে বিভ্রান্ত না হন তবে আপনাকে আপনার মন হারাতে বাধ্য করবে। যা ঘটছিল তা এখানে:

গুগল যখন এপিআই লোড হয় তখন পৃষ্ঠাগুলিতে যে স্টাইলগুলি লোড হয় আপনি যদি তা দেখে থাকেন তবে আপনি এটি দেখতে সক্ষম হবেন:

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

ঠিক আছে, তাই গুগল সর্বদা Robotoফন্ট-পরিবার ব্যবহার করে এটির মানচিত্রকে আরও কিছুটা সামঞ্জস্য করতে চেয়েছিল । সমস্যাটি হ'ল, বেশিরভাগ লোকের জন্য, আপনি একটি খোলার আগে infoWindowব্রাউজারটি এখনও Robotoফন্টটি ডাউনলোড করেনি (কারণ আপনার পৃষ্ঠায় অন্য কোনও কিছুই এটি ব্যবহার করেনি তাই ব্রাউজারটি এটি জানতে যথেষ্ট পর্যাপ্ত স্মার্ট যে এটি ডাউনলোড করার দরকার নেই) এই ফন্ট)। এই ফন্টটি ডাউনলোড করা তাত্ক্ষণিক নয়, যদিও এটি খুব দ্রুত। আপনি যখন প্রথম কোনও খুলেন infoWindowএবং এপিআই divআপনার infoWindowসামগ্রীগুলি শরীরে পরিমাপ করার জন্য এটি শরীরে সংযুক্ত করে, এটি Robotoফন্টটি ডাউনলোড শুরু করে তবে আপনার infoWindow'sপরিমাপ নেওয়া হয় এবং Robotoডাউনলোড শেষ হওয়ার আগে উইন্ডোটি মানচিত্রে স্থাপন করা হয় । বেশিরভাগ ক্ষেত্রে ফলাফলটি ছিল একটিinfoWindowএটির বিষয়বস্তু যখন Arialকোনও sans-serifফন্ট ব্যবহার করে রেন্ডার করা হয়েছিল তখন তা পরিমাপ করা হয়েছিল , তবে যখন এটি মানচিত্রে প্রদর্শিত হয়েছিল (এবং Robotoডাউনলোড শেষ হয়েছে) তখন এটির সামগ্রীটি একটি ফন্টে প্রদর্শিত হচ্ছিল যা ভিন্ন আকারের ছিল - এবং ভয়েলা - স্ক্রোলবারগুলি প্রথমবার উপস্থিত হয়েছিল আপনি খুলুন infoWindow। infoWindowদ্বিতীয়বারের মতো ঠিক একইটি খুলুন - Robotoএআইপি এটির infoWindowসামগ্রীর পরিমাপ করার সময় ব্যবহার করা হবে এবং আপনি কোনও স্ক্রোলবার দেখতে পাবেন না।

Question 7

আমি তালিকাভুক্ত উত্তরগুলির প্রত্যেকটির চেষ্টা করেছি। কেউই আমার পক্ষে কাজ করেনি। শেষ পর্যন্ত এটি স্থায়ীভাবে স্থির করে। আমার উত্তরাধিকার সূত্রে প্রাপ্ত DIVকোডটিতে সমস্ত প্রবেশ <h#>এবং <p>প্রবেশের চারপাশে একটি মোড়ক ছিল । আমি কেবল একই ডিআইভিতে কিছু "স্টাইল" চাপিয়ে দিয়েছিলাম, একটি পছন্দসই সর্বাধিক প্রস্থের বিষয়টি বিবেচনা করে, লাইন উচ্চতার পরিবর্তনের ক্ষেত্রে কেবল (অন্য কারও ফিক্স) এবং আমার নিজের ক্ষেত্রে নিক্ষেপ করলাম white-space: nowrap, যার ফলে অটো ওভারফ্লো সঠিক সংশোধন করেছিল। কোনও স্ক্রোল বার নেই, কোন কাটছাঁট হবে না এবং কোনও সমস্যা নেই!

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

Question 8

আমি জানি এটি একটি পুরানো থ্রেড, তবে আমি ঠিক একই সমস্যার মুখোমুখি হয়েছি। আমি <h2>এবং <p>ইনফুইন্ডোতে উপাদান ছিল এবং এই উভয়ের নীচে মার্জিন ছিল। আমি মার্জিনগুলি সরিয়ে দিয়েছি এবং ইনফো উইন্ডো সঠিকভাবে আকার পেয়েছি। অন্যান্য প্রস্তাবিত ফিক্সগুলির কোনওটিই কাজ করে না। আমি সন্দেহ করি যে ইনফো উইন্ডো আকারের গণনা মার্জিনগুলিকে বিবেচনায় নেয় না।

Question 9

এর মধ্যে আমার উত্তর যুক্ত করতে যাচ্ছি, যেহেতু এর মধ্যে কোনওটিই আমার সমস্যা সমাধান করেছে। আমি আমার কন্টেন্টটি ডিভিতে গুটিয়ে রেখেছিলাম, সেই ডিভিডকে একটি শ্রেণি দিয়েছি এবং ডিভের উপর ডিভাইসটি min-widthনির্দিষ্ট maxWidthকরে দিচ্ছি, এবং তথ্য উইন্ডোতে নির্দিষ্ট করে রেখেছি এবং তাদের উভয়ই একই আকারের হওয়া দরকার, অন্যথায় প্রস্থ বা উচ্চতা উপচে পড়া হবে ঠিক ভুল পরিমাণে সামগ্রী সহ বক্সগুলিতে।

জাভাস্ক্রিপ্ট:

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

লাইন-উচ্চতা সেট করুন: মানচিত্রের ক্যানভাস ডিভের জন্য সাধারণ।

Question 11

দেখা যাচ্ছে সমস্যাটি রোবোটো ওয়েবফন্টের সাথে।

ইনফাউন্ডো সরবরাহ করা সামগ্রীর উপর ভিত্তি করে ইনলাইন প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলির সাথে রেন্ডার করা হয়। তবে এটি ইতিমধ্যে রেন্ডার / লোড হওয়া ওয়েবফন্টের সাথে গণনা করা হয় না। পুরো মানচিত্রটি স্ক্রিনে মুদ্রিত হওয়ার পরে ফন্টটি রেন্ডার হয়ে গেলে, তারপরে উইন্ডোটির ডিআইভিগুলির অভ্যন্তরে "ওভারফ্লো: অটো" বৈশিষ্ট্যগুলি ইনলাইন হওয়ার কারণে স্ক্রোলবারগুলি প্রদর্শিত হয়।

আমি যে সমাধানটি কাজ করেছিলাম তা হ'ল সামগ্রীটি একটি ডিআইভিতে আবৃত করা এবং তারপরে ওয়েবফন্টকে ওভাররাইড করার জন্য 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 দেখুন ; গুগল ম্যাপ প্রদর্শন করতে বাড়ির ছবিগুলির নীচে লিঙ্কগুলি ক্লিক করুন।

Question 14

এটি আমার সমস্যার সম্পূর্ণ সমাধান করেছে:

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

Question 15

আইইয়ের সাথে আমার একই সমস্যা ছিল এবং এই প্রতিক্রিয়াগুলিতে বিস্তারিত অনেকগুলি সমাধানের চেষ্টা করেছি, তবে IE এর উল্লম্ব স্ক্রোলবারগুলি নির্ভরযোগ্যভাবে মুছে ফেলতে পারিনি।

আমার জন্য যা সবচেয়ে ভাল কাজ করেছে তা হল ইনফাইন্ডোর ভিতরে স্থির ফন্টের আকারগুলিতে স্যুইচ করা - 'পিএক্স' ... আমি ইএমএস ব্যবহার করছিলাম। ফন্টের আকার স্থির করে আমার আর স্পষ্টভাবে ইনফাইন্ডো প্রস্থ বা উচ্চতা ঘোষণা করার দরকার পড়েনি এবং স্ক্রোলবারগুলি ভাল হয়ে গেছে।

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>ইনফো উইন্ডোতে একটিতে একটি ক্লাস প্রয়োগ করেছি এবং ফন্টগুলি একটি জেনেরিক সিস্টেম ফন্টে পরিবর্তন করেছি (আমার ক্ষেত্রে হেলভেটিকা) বনাম একটি @ ফন্ট-ফেস ওয়েব ফন্ট যা এটি ব্যবহার করছে। সমস্যা সমাধান হয়েছে।

Question 20

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

Question 21

একটি যোগ করুন min-heightআপনার infoWindow বর্গ উপাদানে।

যদি আপনার ইনফো উইন্ডোজ সমস্ত একই আকার হয় তবে এটি সমস্যার সমাধান করবে।

যদি তা না হয় তবে jWery এর এই লাইনটি তথ্য উইন্ডোর জন্য আপনার ক্লিক ফাংশনে যুক্ত করুন:

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

Question 22

আমি এটি কোনও উপায়ে বা আকারে কাজ করতে পারি না, আমি বাক্সে 3 ডিভ যোগ করছিলাম। আমি এগুলি প্রস্থ এবং উচ্চতাগুলি যথাযথভাবে সেট করে একটি বাহ্যিক ডিভের মধ্যে আবৃত করেছি, এবং কিছুই কার্যকর হয়নি।

শেষ পর্যন্ত আমি ডিভটিকে নিখুঁত শীর্ষে বাম হিসাবে সেট করে ঠিক করেছি এবং তারপরে ডিভের আগে, আমি দুটি স্বচ্ছ গিফের, একটি 300px প্রশস্ত এবং 1px উচ্চ, একটি 120px উচ্চ এবং 1px প্রশস্ত দুটি চিত্র স্থাপন করেছি।

এটি তখন সঠিকভাবে স্কেল!

এটি কুৎসিত তবে এটি কাজ করে।

আপনি একটি চিত্রও করতে পারেন এবং আমার প্রত্যাশিত একটি জিনডেক্সও সেট করতে পারেন, বা আপনার উইন্ডোর কোনও ইন্টারঅ্যাকশন না থাকলে কেবল একটি চিত্র এমনকি এটি একটি ফর্ম ধারণ করে, সুতরাং, এটি কোনও বিকল্প ছিল না ...

Question 23

আমি মনে করি যে এই আচরণটি বাইরের পাত্রে কিছু সিএসএস স্টাইলিংয়ের কারণে হয়েছে, আমার একই সমস্যা ছিল তবে আমি এটি একটি অভ্যন্তরীণ ডিভ ব্যবহার করে সমাধান করেছি এবং এতে কিছু প্যাডিং যুক্ত করছি, আমি জানি এটি অদ্ভুত তবে এটি সমস্যার সমাধান করেছে

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

এবং আমার স্টাইল। CSS এ

div#fix_height{
    padding: 5px;
}

Question 24

আমি একটি ইনলাইন উপাদান (একটি একটি ট্যাগ) সরাসরি ভেতরে ছিল divসঙ্গে style="overflow:auto"[...আবৃত করে একটি মধ্যে pট্যাগ এবং এটি সংশোধন করা হয়েছে।

দেখে মনে হচ্ছে যে কোনও ইনলাইন উপাদান যা ইনফাউইন্ডোর সরাসরি অভ্যন্তরে কোনও ব্লক উপাদানে বাসা বাঁধে না এটি এর কারণ ঘটবে।

Question 25

আমার উত্তরটি হ'ল শ্রোতা যুক্ত করা (অ্যাডলিসটনারঅনস ব্যবহার করে) ইনডম উইন্ডোটি ডিওমে যুক্ত হয়েছে কিনা তা পরীক্ষা করে আবার ইনফো উইন্ডোটি খোলার (এটি বন্ধ করার দরকার নেই)।

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

সমস্ত ব্রাউজারে আমার জন্য কাজ করা সমস্ত সমাধানের সংক্ষিপ্তসার হিসাবে:

ইনফাইন্ডোর অভ্যন্তরে মার্জিনগুলি ব্যবহার করবেন না, কেবল প্যাডিং করবেন।
ইনফাইন্ডোর জন্য সর্বাধিক প্রস্থ নির্ধারণ করুন:

this.infowindow = new google.maps.InfoWindow({ maxWidth: 200 });
এর সাথে ইনফাউন্ডোর সামগ্রীগুলি মোড়ানো

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

(আপনি ইনফিনিয়ডো ম্যাক্সউইথের উপরে যে মান নির্ধারণ করেছেন তার ন্যূনতম প্রস্থ পরিবর্তন করুন)

আমি এটি পরীক্ষা করেছি এবং এটি প্রতিটি ব্রাউজারে কাজ করেছে এবং আমার 400 টিরও বেশি মার্কার ছিল ...

Question 28

আমি জানি যে প্রচুর অন্যান্য লোকেরা সমাধান খুঁজে পেয়েছেন যা তাদের নির্দিষ্ট ক্ষেত্রে কাজ করেছিল, তবে যেহেতু তাদের কেউই আমার বিশেষ মামলার পক্ষে কাজ করেনি , তাই আমি ভেবেছিলাম এটি অন্য কারও পক্ষে সহায়ক হতে পারে।

কিছু বিশদ:

আমি এমন একটি প্রকল্পে গুগল ম্যাপস এপিআই ভি 3 ব্যবহার করছি যেখানে ইনলাইন সিএসএস এমন কিছু যা আমরা সত্যই সত্যই এড়াতে চাই। আমার infowindows IE11 ব্যতীত সমস্ত কিছুর জন্য কাজ করছিল, যেখানে প্রস্থটি সঠিকভাবে গণনা করা হয়নি। এর ফলে ডিভ ওভারফ্লো হয়েছে, যা স্ক্রোলবারকে ট্রিগার করেছিল।

আমাকে তিনটি জিনিস করতে হয়েছিল:

সমস্ত প্রদর্শন সরিয়ে ফেলুন: ইনফাউন্ডো সামগ্রীর অভ্যন্তরীণ যে কোনও কিছু থেকে ইনলাইন-ব্লক শৈলীর নিয়ম (আমি প্রদর্শনের সাথে প্রতিস্থাপন করেছি: ব্লক) - আমি থ্রেড থেকে এটি চেষ্টা করার ধারণা পেয়েছি (যা আমি আর খুঁজে পাচ্ছি না) যেখানে কারওর মতো ছিল আই 6 নিয়ে সমস্যা।
স্ট্রিংয়ের পরিবর্তে সামগ্রীটি ডিওএম নোড হিসাবে পাস করুন। আমি 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সামগ্রীটিতে সিএসএস সম্পত্তিটি উচ্চতা অনুসারে নির্ধারণ করুন এবং তারপরে গুগল মানচিত্রকে ইনফোউইন্ডোর আকার পরিবর্তন করতে বাধ্য করুন।

infoWindowইনফো উইন্ডো অবজেক্টটি হ'ল, $infoWindowContentsআমি সেখানে যে বিষয়বস্তু রাখতে চাইছি তার একটি জ্যাকুরি অবজেক্ট , 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);

(আমি একই সমাধানটির উপরে একই পোস্টটি পোস্ট করেছি যাতে আমি কীভাবে কোনও গুগল-ম্যাপস ইনফো উইন্ডোকে এর ভিতরে রাখা সামগ্রীতে ফিট করতে পুনরায় আকার দিতে পারি? )

Question 30

সময় হারাতে এবং কিছুক্ষণ পড়ার পরে, আমি কেবল সহজ কিছু চাইছিলাম, এই সিএসএসটি আমার প্রয়োজনীয়তার জন্য কাজ করেছিল।

.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সমস্যা আরও খারাপ আসলে তৈরি! আমি ক্রোম বিকাশকারী সরঞ্জাম পরিদর্শকের মধ্যে লক্ষ্য করেছি যে .gm-style-iwউপাদানটির ভিতরে দুটি ডিভ রয়েছে , যা উভয়ই overflow: autoডিফল্টরূপে সেট করেছে।

আমি আমার ইনফোউইন্ডোগুলিতে বেশিরভাগ এইচটিএমএল-ফর্ম্যাটযুক্ত পাঠ্য প্রদর্শন করছি, এ কারণেই অন্যান্য সমাধানগুলি আমার পক্ষে মোটেও কাজ করে না।