গুগল ম্যাপস এপিআই দিয়ে মাউস স্ক্রোল হুইল স্কেলিং কীভাবে অক্ষম করবেন

560

আমি কোনও পৃষ্ঠায় কয়েকটি মানচিত্র আঁকার জন্য গুগল ম্যাপস এপিআই (v3) ব্যবহার করছি। আমি যে জিনিসটি করতে চাই তা হ'ল আপনি যখন মানচিত্রের উপরে মাউস হুইলটি স্ক্রোল করবেন তখন জুম করা অক্ষম করা যায়, তবে আমি কীভাবে নিশ্চিত তা জানি না।

আমি স্কেলকন্ট্রোলটি অক্ষম করেছি (অর্থাত্ স্কেলিং ইউআই উপাদানটি সরিয়ে নিয়েছে), তবে এটি স্ক্রোল হুইল স্কেলিং প্রতিরোধ করে না।

এখানে আমার ফাংশনটির একটি অংশ রয়েছে (এটি একটি সহজ জিকুয়েরি প্লাগইন):

$.fn.showMap = function(options, addr){
  options = $.extend({
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }, options);
  var map = new google.maps.Map(document.getElementById($(this).attr('id')), options);

  // Code cut from this example as not relevant
};
jquery  google-maps  google-maps-api-3  jquery-plugins 
— aaronrussell
সূত্র
1
হাই আমি আরও উন্নত প্লাগইন তৈরি করেছি যা আপনাকে একটি সুন্দর বোতাম দিয়ে মানচিত্রটিকে লক বা আনলক করতে দেয়। এছাড়াও jQuery প্লাগইন হয়। আপনি এটি github.com/diazemiliano/googlemaps-scrollprevent এ পরীক্ষা করতে পারেন আশা করি আপনি এটি পছন্দ করবেন।
— এমিলিয়ানো দাজ ২
— পিটার মর্টেনসেন

উত্তর:

986

মানচিত্রের এপিআইয়ের 3 সংস্করণে আপনি কেবল ম্যাপপশন বৈশিষ্ট্যের scrollwheelমধ্যে অপশনটিকে মিথ্যাতে সেট করতে পারেন :

options = $.extend({
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}, options);

আপনি যদি মানচিত্রের এপিআইয়ের 2 সংস্করণ ব্যবহার করে থাকেন তবে আপনাকে নিচে অক্ষমস্ক্রোলওয়েলজুম () এপিআই কলটি ব্যবহার করতে হবে :

map.disableScrollWheelZoom();

scrollwheelজুম মানচিত্র API 3 নং সংস্করণ ডিফল্টরূপে সক্রিয় করা হয়, কিন্তু সংস্করণটি 2 এটি অক্ষম যদি না স্পষ্টভাবে সক্রিয় enableScrollWheelZoom()API কল।

— ড্যানিয়েল ভ্যাসালো
সূত্র
40
+1 এফওয়াইআই: disableDefaultUI: trueপ্রতিস্থাপন করতে পারেnavigationControl: false, mapTypeControl: false, scaleControl: false
— জর্ডান আর্সেনো
1
আমার জন্য একটি গ্যাচা হ'ল যদি আপনার কাছে মানচিত্রটি টাইপ না থাকে তবে অন্যান্য পরামিতিগুলি এড়ানো হবে।
— মাইকেল হান্টার 21
এটি আমার পক্ষে কাজ করে তবে পৃষ্ঠায় কোনও মডেলের ভিতরে স্ক্রল হুইলটি অক্ষম করার অদ্ভুত পার্শ্ব প্রতিক্রিয়া রয়েছে। মডেল সামগ্রীতে কোনও মানচিত্র নেই এবং কার্সার মানচিত্রের উপরে নেই।
— নিয়মিতমেক
দুঃখের বিষয়, এটি স্ট্রিটভিউ প্যানোরোমা মানচিত্রের সাথে প্রত্যাশা অনুযায়ী কাজ করে না, যেমন স্ক্রোলওহিলটি রাখে: মিথ্যা, স্ক্রোল জুম অক্ষম করে, তবে পৃষ্ঠাটি স্ক্রোলিং অক্ষম করে কারণ এটি এখনও কোনওভাবে স্ক্রলটি ধরেছে।
— সলোমন ক্লসন
ড্যানিয়েল, আপনি কি দয়া করে এই প্রশ্নের উত্তর দেওয়ার জন্য আমাকে সহায়তা করতে পারেন stackoverflow.com/questions/60544486/…
— জাভিয়ার ইস্যাক
103

ড্যানিয়েলের কোড কাজ করে (ধন্যবাদ একটি গাদা!) তবে আমি জুমিং পুরোপুরি অক্ষম করতে চেয়েছিলাম। আমি দেখতে পেয়েছি যে এটি করার জন্য আমাকে এই চারটি বিকল্প ব্যবহার করতে হয়েছিল:

{
  zoom: 14,                        // Set the zoom level manually
  zoomControl: false,
  scaleControl: false,
  scrollwheel: false,
  disableDoubleClickZoom: true,
  ...
}

দেখুন: মানচিত্রের অবজেক্টের নির্দিষ্টকরণ

— সাইমন ইস্ট
সূত্র
2
এটি কি এখনও আপনার পক্ষে কাজ করে? আমি স্ক্রোল হুইলটি উপেক্ষা করার জন্য v3 এর বর্তমান সংস্করণটি (আমি এটির 3.9 বিশ্বাস করি) পেতে অক্ষম হয়েছি এবং মানচিত্রের অবজেক্টের সমস্ত শিশুদের উপর লুপিং এবং মানচিত্রে বংশ বিস্তার বন্ধ করতে হয়েছিল।
— c.apolzon
হ্যাঁ, আমার জন্য কাজ করে, ধন্যবাদ! এছাড়াও, আপনি যদি সমস্ত ডিফল্ট মানচিত্র নিয়ন্ত্রণ উইজেট সরিয়ে নিতে চান তবে কেবল ডিফল্টইউআই অক্ষম করুন: পৃথকভাবে জুম, ঘোরানো এবং প্যান নিয়ন্ত্রণগুলি বন্ধ করার পরিবর্তে সত্য।
— থোম্যাক্স
33
সাবধানী মূলধন; scrollwheelসমস্ত নিম্নতর কেস হওয়া দরকার (কেবল ডাব্লু কে তুলে ধরে আমাকে ধরে ফেলল)
— কেজ
1
স্ক্রোলওহিল: মিথ্যা আমার যা দরকার ছিল তা হল
— মনুর
30

আপনি যদি ডায়নামিকভাবে এটি করতে চান তবে;

function enableScrollwheel(map) {
    if(map) map.setOptions({ scrollwheel: true });
}

function disableScrollwheel(map) {
    if(map) map.setOptions({ scrollwheel: false });
}

কখনও কখনও আপনাকে মানচিত্রের উপরে কিছু "জটিল" দেখাতে হবে (বা মানচিত্রটি বিন্যাসের একটি ছোট অংশ), এবং এই স্ক্রোলটি জুমিংয়ের মাঝামাঝি হয়ে যায়, তবে একবার আপনার একটি পরিষ্কার মানচিত্র হয়ে গেলে, জুম করার এই উপায়টি দুর্দান্ত।

— ফিলিপ পেরেইরা
সূত্র
3
আপনি এই কোডটি সূচনাতে যুক্ত করতে পারেন: map.addListener ('ক্লিক করুন', ফাংশন () {যদি (মানচিত্র) map.setOptions ({স্ক্রোলওহিল: সত্য});}); map.addListener ('মাউসআউট', ফাংশন () {if (মানচিত্র) map.setOptions ({স্ক্রোলওয়েল: মিথ্যা});});
— স্পেসম্যান 4
এটি আমার পক্ষে কাজ করে যেহেতু আমি গুগল ম্যাপস কোডের বাইরে মানচিত্রের স্ক্রোলওহিল ফাংশনটি জিজ্ঞাসাবাদ করতে চেয়েছিলাম। যেমন আমার নিজের jquery কোড ভিতরে।
— lharby
26

সহজবোধ্য রাখো! আসল গুগল মানচিত্র পরিবর্তনশীল, অতিরিক্ত স্টাফের কিছুই নয়।

 var mapOptions = {
     zoom: 16,
     center: myLatlng,
     scrollwheel: false

}
— Creatif_IV
সূত্র
10

এখন (অক্টোবর 2017) -র মত Google- জুম / স্ক্রলিং বলা হ্যান্ডেল করতে একটি নির্দিষ্ট সম্পত্তি বাস্তবায়ন করেছে gestureHandling। এর উদ্দেশ্য মোবাইল ডিভাইসগুলির পরিচালনা পরিচালনা করা, তবে এটি ডেস্কটপ ব্রাউজারগুলির জন্য আচরণও পরিবর্তন করে। এখানে এটি সরকারী নথি থেকে :

function initMap() {
  var locationRio = {lat: -22.915, lng: -43.197};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: locationRio,
    gestureHandling: 'none'
});

অঙ্গভঙ্গি হ্যান্ডলিংয়ের জন্য উপলব্ধ মানগুলি হ'ল:

  • 'greedy': ব্যবহারকারীর স্ক্রিনটি সোয়াইপ করে (টানলে) মানচিত্রটি সর্বদা প্যানস (উপরে বা নীচে, বাম বা ডান) করে। অন্য কথায়, একটি আঙুলের সোয়াইপ এবং দুই আঙুলের সোয়াইপ উভয়ই মানচিত্রটিকে প্যান করার কারণ করে।
  • 'cooperative': পৃষ্ঠাটি স্ক্রোল করতে ব্যবহারকারীকে একটি আঙুল এবং মানচিত্রটি প্যান করতে দুটি আঙুল দিয়ে সোয়াইপ করতে হবে। ব্যবহারকারী যদি একটি আঙুল দিয়ে মানচিত্রটি সোয়াইপ করে, মানচিত্রে একটি ওভারলে উপস্থিত হবে, প্রম্পট দিয়ে ব্যবহারকারীকে মানচিত্রটি সরানোর জন্য দুটি আঙ্গুল ব্যবহার করতে বলবে। ডেস্কটপ অ্যাপ্লিকেশনগুলিতে, ব্যবহারকারীরা কোনও পরিবর্তনকারী কী (সিটিআরএল বা ⌘ কী) টিপে স্ক্রোলিং করে মানচিত্রটি জুম বা প্যান করতে পারেন।
  • 'none': এই বিকল্পটি মোবাইল ডিভাইসগুলির জন্য মানচিত্রে প্যানিং এবং পিনচিং এবং ডেস্কটপ ডিভাইসে মানচিত্রের টানাকে অক্ষম করে।
  • 'auto'(ডিফল্ট): পৃষ্ঠাটি স্ক্রোলযোগ্য কিনা তার উপর নির্ভর করে গুগল মানচিত্র জাভাস্ক্রিপ্ট এপিআই অঙ্গভঙ্গিটি হ্যান্ডলিং সম্পত্তিটিকে সেট করে 'cooperative'অথবা'greedy'

সংক্ষেপে, আপনি সহজেই সেটিংটি "সর্বদা জুমযোগ্য" ( 'greedy'), "কখনই জুমযোগ্য" ( 'none') বা "ব্যবহারকারীকে জুম সক্ষম করতে সিআরটিএল / press টিপতে হবে " ( ) চাপতে বাধ্য করতে পারেন 'cooperative'।

— Kar.ma
সূত্র
7

আমি একটি আরও উন্নত jQuery প্লাগইন তৈরি করেছি যা আপনাকে একটি সুন্দর বোতাম দিয়ে মানচিত্রটিকে লক বা আনলক করতে দেয়।

এই প্লাগইনটি স্বচ্ছ ওভারলে ডিভ দিয়ে গুগল ম্যাপসকে iframe অক্ষম করে এবং আনলকিটের জন্য একটি বোতাম যুক্ত করে। এটিকে আনলক করতে আপনার অবশ্যই 650 মিলিসেকেন্ড চাপতে হবে।

আপনি আপনার সুবিধার জন্য সমস্ত বিকল্প পরিবর্তন করতে পারেন। এটি https://github.com/diazemiliano/googlemaps-scrollprevent এ দেখুন

এখানে কিছু উদাহরণ।

(function() {
  $(function() {
    $("#btn-start").click(function() {
      $("iframe[src*='google.com/maps']").scrollprevent({
        printLog: true
      }).start();
      return $("#btn-stop").click(function() {
        return $("iframe[src*='google.com/maps']").scrollprevent().stop();
      });
    });
    return $("#btn-start").trigger("click");
  });
}).call(this);
.embed-container {
  position: relative !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
  overflow: hidden !important;
  max-width: 100% !important;
}
.embed-container iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.mapscroll-wrap {
  position: static !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/diazemiliano/googlemaps-scrollprevent/v.0.6.5/dist/googlemaps-scrollprevent.min.js"></script>
<div class="embed-container">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12087.746318586604!2d-71.64614110000001!3d-40.76341959999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9610bf42e48faa93%3A0x205ebc786470b636!2sVilla+la+Angostura%2C+Neuqu%C3%A9n!5e0!3m2!1ses-419!2sar!4v1425058155802"
  width="400" height="300" frameborder="0" style="border:0"></iframe>
</div>
<p><a id="btn-start" href="#">"Start Scroll Prevent"</a>  <a id="btn-stop" href="#">"Stop Scroll Prevent"</a>
</p>
স্নিপেট প্রসারিত করুন

— এমিলিয়ানো দাজ
সূত্র
চমৎকার প্লাগইন, তবে আপনি যখন জেএস এপিআই ব্যবহার করে গুগল ম্যাপ তৈরি করবেন তখন কীভাবে এটি ব্যবহার করবেন?
— ikkez
2
" Edit in JSFiddle Result JavaScript HTML CSS" আসলেই কি কোডের অংশ?
— পিটার মর্টেনসেন
6

আমার ক্ষেত্রে গুরুত্বপূর্ণ বিষয়টি ছিল 'scrollwheel':falseইনডিতে সেট করা । বিজ্ঞপ্তি: আমি ব্যবহার করছি jQuery UI Map। নীচে আমার কফিস্ক্রিপ্ট সূচনা ফাংশন শিরোনাম:

 $("#map_canvas").gmap({'scrollwheel':false}).bind "init", (evt, map) ->
— andilabs
সূত্র
6

কেবলমাত্র, আপনি GMaps.js গ্রন্থাগারটি ব্যবহার করছেন , যা জিওকোডিং এবং কাস্টম পিনের মতো কাজগুলি করা কিছুটা সহজ করে তোলে, এখানে পূর্ববর্তী উত্তরগুলি থেকে শিখে নেওয়া কৌশলগুলি ব্যবহার করে আপনি কীভাবে এই সমস্যাটি সমাধান করবেন।

var Gmap = new GMaps({
  div: '#main-map', // FYI, this setting property used to be 'el'. It didn't need the '#' in older versions
  lat: 51.044308,
  lng: -114.0630914,
  zoom: 15
});

// To access the Native Google Maps object use the .map property
if(Gmap.map) {
  // Disabling mouse wheel scroll zooming
  Gmap.map.setOptions({ scrollwheel: false });
}
— racl101
সূত্র
4

এমন কারও জন্য যা ভাবছেন যে কীভাবে জাভাস্ক্রিপ্ট গুগল ম্যাপ এপিআই অক্ষম করবেন

আপনি যদি একবার মানচিত্রে ক্লিক করেন তবে এটি জুমিং স্ক্রোলটিকে সক্ষম করবে । আর অক্ষম আপনার মাউস পর DIV আছে থেকে প্রস্থান করুন।

এখানে কিছু উদাহরণ 

var map;
var element = document.getElementById('map-canvas');
function initMaps() {
  map = new google.maps.Map(element , {
    zoom: 17,
    scrollwheel: false,
    center: {
      lat: parseFloat(-33.915916),
      lng: parseFloat(151.147159)
    },
  });
}


//START IMPORTANT part
//disable scrolling on a map (smoother UX)
jQuery('.map-container').on("mouseleave", function(){
  map.setOptions({ scrollwheel: false });
});
jQuery('.map-container').on("mousedown", function() {
  map.setOptions({ scrollwheel: true });
});
//END IMPORTANT part
.big-placeholder {
  background-color: #1da261;
  height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
      <div class="big-placeholder">
      </div>
      
      
      <!-- START IMPORTANT part -->
      <div class="map-container">
        <div id="map-canvas" style="min-height: 400px;"></div>  
      </div>
      <!-- END IMPORTANT part-->
      
      
      
      <div class="big-placeholder">
      </div>
      <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAIjN23OujC_NdFfvX4_AuoGBbkx7aHMf0&callback=initMaps">
      </script>
  </body>
</html>
স্নিপেট প্রসারিত করুন

— AlbertSamuel
সূত্র
3

একটি সহজ সমাধান:

// DISABLE MOUSE SCROLL IN MAPS
// enable the pointer events only on click;
$('.gmap-wrapper').on('click', function () {
  $('.gmap-wrapper iframe').removeClass('scrolloff'); // set the pointer events true on click
});
// you want to disable pointer events when the mouse leave the canvas area;
$(".gmap-wrapper").mouseleave(function () {
  $('.gmap-wrapper iframe').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
});
.scrolloff{ pointer-events: none; }
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gmap-wrapper">
<iframe class="scrolloff" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d44754.55736493158!2d9.151166379101554!3d45.486726!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4786bfca7e8fb1cb%3A0xee8d99c9d153be98!2sCorsidia!5e0!3m2!1sit!2sit!4v1496947992608" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</html>
স্নিপেট প্রসারিত করুন

সূত্র: https://github.com/Corsidia/scroloff

— Darme
সূত্র
2

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

আমার ব্লগ পোস্টটি গুগল ম্যাপে টুগল জুমটি CSS সহ কীভাবে এটি কাজ করে তা বোঝার জন্য এবং একটি কার্যক্ষম ডেমো জন্য কলম কোডেপেন.আইও / ডেভিব্রাউন / স্পেন / ওয়াইভাইআর দেখুন ।

দাবি অস্বীকার: এটি মূলত শেখার জন্য এবং সম্ভবত প্রোডাকশন ওয়েবসাইটগুলির জন্য সেরা সমাধান হতে পারে না।

এইচটিএমএল: 

<div class="map-wrap small-11 medium-8 small-centered columns">
    <input id="map-input" type="checkbox" />
    <label class="map-overlay" for="map-input" class="label" onclick=""></label>
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d19867.208601651986!2d-0.17101002911118332!3d51.50585742500925!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1482355389969"></iframe>
</div>

সিএসএস:

.map-wrap {
    position: relative;
    overflow: hidden;
    height: 180px;
    margin-bottom: 10px;
}

#map-input {
    opacity: 0;
}

.map-overlay {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    z-index: 2;    
}

#map-input[type=checkbox]:checked ~ iframe {
    z-index: 3;
}

#map-input[type=checkbox]:checked ~ .map-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}


iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
    border: none;
}
— ডেভি
সূত্র
0

কোডটির টুকরোটি ব্যবহার করুন, এটি আপনাকে Google মানচিত্রের সমস্ত রঙ এবং জুমিং নিয়ন্ত্রণ দেবে। ( স্কেলকন্ট্রোল: মিথ্যা এবং স্ক্রোলওহিল: মিথ্যা মাউসওহেলকে জুম আপ বা ডাউন করতে বাধা দেবে)

function initMap() {
            // Styles a map in night mode.
            var map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 23.684994, lng: 90.356331},
                zoom: 8,
                scaleControl: false,
                scrollwheel: false,
              styles: [
                {elementType: 'geometry', stylers: [{color: 'F1F2EC'}]},
                {elementType: 'labels.text.stroke', stylers: [{color: '877F74'}]},
                {elementType: 'labels.text.fill', stylers: [{color: '877F74'}]},
                {
                  featureType: 'administrative.locality',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#d59563'}]
                },
                {
                  featureType: 'poi',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#d59563'}]
                },
                {
                  featureType: 'poi.park',
                  elementType: 'geometry',
                  stylers: [{color: '#263c3f'}]
                },
                {
                  featureType: 'poi.park',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#f77c2b'}]
                },
                {
                  featureType: 'road',
                  elementType: 'geometry',
                  stylers: [{color: 'F5DAA6'}]
                },
                {
                  featureType: 'road',
                  elementType: 'geometry.stroke',
                  stylers: [{color: '#212a37'}]
                },
                {
                  featureType: 'road',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#f77c2b'}]
                },
                {
                  featureType: 'road.highway',
                  elementType: 'geometry',
                  stylers: [{color: '#746855'}]
                },
                {
                  featureType: 'road.highway',
                  elementType: 'geometry.stroke',
                  stylers: [{color: 'F5DAA6'}]
                },
                {
                  featureType: 'road.highway',
                  elementType: 'labels.text.fill',
                  stylers: [{color: 'F5DAA6'}]
                },
                {
                  featureType: 'transit',
                  elementType: 'geometry',
                  stylers: [{color: '#2f3948'}]
                },
                {
                  featureType: 'transit.station',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#f77c2b3'}]
                },
                {
                  featureType: 'water',
                  elementType: 'geometry',
                  stylers: [{color: '#0676b6'}]
                },
                {
                  featureType: 'water',
                  elementType: 'labels.text.fill',
                  stylers: [{color: '#515c6d'}]
                },
                {
                  featureType: 'water',
                  elementType: 'labels.text.stroke',
                  stylers: [{color: '#17263c'}]
                }
              ]
            });
    
             var marker = new google.maps.Marker({
              position: {lat: 23.684994, lng: 90.356331},
              map: map,
              title: 'BANGLADESH'
            });
          }
স্নিপেট প্রসারিত করুন

— চমন রায়
সূত্র
যদিও এই কোডটি প্রশ্নের উত্তর দিতে পারে, কীভাবে এবং / বা কেন এটি সমস্যার সমাধান করে তা সম্পর্কিত অতিরিক্ত প্রসঙ্গ সরবরাহ করলে উত্তরের দীর্ঘমেয়াদী মান উন্নত হবে। মানের উত্তর সরবরাহ করার জন্য দয়া করে এই কীভাবে উত্তরটি পড়ুন।
— ওয়েওওয়েওয়ের
0

আমি এই সাধারণ নমুনা দিয়ে এটি না

jQuery এর

$('.map').click(function(){
    $(this).find('iframe').addClass('clicked')
    }).mouseleave(function(){
    $(this).find('iframe').removeClass('clicked')
});

সিএসএস

.map {
    width: 100%; 
}
.map iframe {
    width: 100%;
    display: block;
    pointer-events: none;
    position: relative; /* IE needs a position other than static */
}
.map iframe.clicked {
    pointer-events: auto;
}

অথবা gmap অপশন ব্যবহার করুন

function init() { 
    var mapOptions = {  
        scrollwheel: false,
— Dimitar
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.