গুগল ম্যাপস জুম কন্ট্রোল গণ্ডগোল হয়েছে

Question

আমি কয়েকজন চিহ্নিতকারী সহ একটি মানচিত্র দেখানোর জন্য Google মানচিত্র এপিআই (v.3) ব্যবহার করি। আমি সম্প্রতি লক্ষ্য করেছি যে মানচিত্রটি জুম করার জন্য ব্যবহৃত নিয়ন্ত্রণটি বিশৃঙ্খল হয়ে গেছে (এটি সর্বদা এরকম ছিল না)। কারণটি কী তা আমার কোনও ধারণা নেই।

হালনাগাদ

এই পোস্টটির মূলত এমন একটি পৃষ্ঠার লিঙ্ক ছিল যেখানে আপনি সমস্যাটি দেখতে পেতেন, তবে লিঙ্কটি এখন ভেঙে গেছে, তাই আমি এটি সরিয়ে ফেলেছি।

Comments

আপনি সমস্যাটি মানচিত্র ডিভি আইডি হিসাবে মানচিত্র_ক্যানভাসটি ব্যবহার করেন তবে বুটস্ট্র্যাপের সাথে এই সমস্যাটি ঘটবে না।

— বেন

Answer 1

আপনার সিএসএস এটিকে গোলযোগ করেছে। max-width: 100%;814 লাইনে সরান এবং জুম নিয়ন্ত্রণগুলি আবার ঠিক দেখাবে। এই জাতীয় বাগগুলি এড়াতে আপনার সিএসএসে আরও নির্দিষ্ট নির্বাচক ব্যবহার করুন।

Comments

আপনি যদি টুইটারের বুটস্ট্র্যাপ ব্যবহার করেন তবে এটিও সত্য, তাদের একটি img {সর্বাধিক প্রস্থ: 100% mes রয়েছে যা এটিকে বিভ্রান্ত করে। এটি 2.0.2 শাখায় স্থির করা উচিত

— কেন

অনেকগুলি সিএসএস রিসেট ফাইলও img {max-width:100%;}সেট করেছে।

— avesse

অসাধারণ! আমারও এটির সাথে সমস্যা ছিল এবং আমি সম্প্রতি বুটস্ট্র্যাপ সিএসএসে চলে এসেছি। মুচো ++++

— কেভিন ম্যানসেল

Jquery মোবাইল নিয়ে একই সমস্যা ছিল। তারা আছে .ui-mobile img {max-width: 100%;}তাদের CSS যা অপসারণ করতে হয়েছে হবে।

— জেরেমি

বুটস্ট্র্যাপে এটি ঠিক করতে আপনার মানচিত্রগুলি ডিভ ক্লাসে গুগল-ম্যাপ দিন

— স্যামি ম্যাসউদ

Answer 2

#myMap_canvas img {
    max-width: none;
}

এটি আমার জন্য ঠিক করা হয়েছে, তবে আমি @ বেন দ্বারা এই প্রশ্নের মন্তব্যটিও উল্লেখ করতে চেয়েছিলাম, "আপনি যদি মানচিত্র ডিভি আইডি হিসাবে মানচিত্র_ক্যানভাসটি ব্যবহার করেন তবে বুটস্ট্র্যাপের সাথে এই সমস্যাটি ঘটবে না"। সে সঠিক. আমি বুটস্ট্র্যাপ ব্যবহার করছি না, তবে ডিভি আইডি পরিবর্তন করার পরে সমস্যাটি শুরু হয়েছিল।

এটিকে আবার মানচিত্র_ক্যানভাসে সেট করা সর্বাধিক প্রস্থ পরিবর্তন ছাড়াই এটি স্থির করেছে।

<div id="map_canvas"></div>

Answer 3

আপনি যদি বুটস্ট্র্যাপ ব্যবহার করছেন তবে কেবল এটি "গুগল-ম্যাপস" ক্লাস দিন। এটি আমার পক্ষে কাজ করেছে।

বিকল্প হিসাবে আপনি গুগল ম্যাপ ডিভের জন্য সর্বশেষ সমাধানের এক ধরণের সমাধান হিসাবে সবকিছু পুনরায় সেট করতে পারেন:

এইচটিএমএল:

<div class="mappins-map"><div> 

সিএসএস:

.mappins-map img { 
    max-width: none !important; 
    height: auto !important; 
    background: none !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

Answer 4

কেবলমাত্র @ ম্যাক্স-ফ্যাভিলি উত্তর ভাগ করুন:

গুগল ম্যাপস এপিআই এর সর্বশেষ সংস্করণ সহ আপনার এটি দরকার:

<style>
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
</style>

@ ম্যাক্স-ফ্যাভিলিকে ধন্যবাদ

https://stackoverflow.com/a/19339767/3070027

Answer 5

আপনি যদি কোনও টুইটার বুটস্ট্র্যাপ ব্যবহারকারী হন তবে আপনার এই লাইনটি আপনার সিএসএসে যুক্ত করা উচিত:

.gmnoprint img { max-width: none; } 

Answer 6

আমারও সমস্যা এবং ব্যবহার ছিল

.google-maps img {
    max-width: none;
}

কাজ হয়নি। আমি অবশেষে ব্যবহার

.google-maps img {
    max-width: none !important;
}

এবং এটি একটি কবজ মত কাজ।

Comments

গুরুত্বপূর্ণ যদি আপনার নির্বাচক আরও নির্দিষ্ট হয় প্রয়োজন হতে পারে না।

— ভুডোকোড

Answer 7

আপনি যদি ইয়াহুর খাঁটি সিএসএস ব্যবহার করছেন, আপনার ডিভিকে বুটস্ট্র্যাপের মতো "গুগল-ম্যাপস" ক্লাস দিন এবং আপনার সিএসএসে এই নিয়মটি রাখুন:

.google-maps img {
    max-width: none;
    max-height: none;
}

আমি যতদূর বলতে পারি, খালি খালি সিএসএসের নিজের দ্বারা এই সমস্যাটি ঠিক করার কোনও উপায় নেই।

Answer 8

এই বিকল্পগুলি আপনি লোকেরা আমাকে বলেছিলেন আমার ওয়েবসাইটের জন্য কাজ করে না।

আমি বুটস্ট্র্যাপ ভি 3 ব্যবহার করি এবং কার্যকারিতাটিতে ফোকাস করি। মূল কারণ হ'ল আমি আমার মানচিত্রটিকে একটি আলাদা আইডি দিয়েছিলাম তখন সিএসএস ফাইলটি হলুদ রাস্তার লোকটির সাথে জুম বারটি প্রদর্শন করতে ব্যবহৃত হত

আমি ম্যাপোল্ডারটিতে ম্যাপ_ক্যানভাসের নামকরণ করেছি এবং তারপরে এটি আমার পক্ষে কাজ করে! যেভাবেই হোক সিএসএস ফাইলগুলিতে আমার নজর দেওয়া উচিত তার ইঙ্গিতগুলির জন্য যাইহোক ধন্যবাদ!

Answer 9

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

আমি যে সমাধানটি করেছি তা হ'ল একটি নতুন এইচটিএমএল ফাইল তৈরি করা (নোটপ্যাডে সমস্ত কোডটি অনুলিপি করুন এবং এর নাম xyz.html রাখুন, "সমস্ত ফাইল" টাইপ হিসাবে সংরক্ষণ করুন)। তারপরে এটি ওয়েবসাইটে আপলোড / এফটিপি করুন এবং একটি নতুন ওয়ার্ডপ্রেস পৃষ্ঠা সেটআপ করুন এবং একটি এম্বেড ফাংশন ব্যবহার করুন। পৃষ্ঠা সম্পাদনা করার সময় পাঠ্য সম্পাদকের কাছে যান (ভিজ্যুয়াল সম্পাদক নয়) এবং অনুলিপি / টাইপ করুন:

http: // পৃষ্ঠার ইউআরএল প্রস্থ = "900" উচ্চতা = "950">

আপনি যদি মাত্রা পরিবর্তন করেন তবে এটি উপরের উভয় যুক্তিতেই পরিবর্তন করতে ভুলবেন না, বা আপনি অদ্ভুত ফলাফল পান।

আমরা সেখানে যাই - অন্য কিছু উত্তরের মতো চালাক নাও হতে পারে তবে এটি আমার পক্ষে কাজ করেছিল! প্রমাণ এখানে: http://a-bc.co.uk/latitude- দৈর্ঘ্য- ফাইন্ডার /