গুগল ম্যাপটি জাভাস্ক্রিপ্টটি লোড হওয়ার পরে কীভাবে আকার পরিবর্তন করব?

Question

আমার 400px x 400px এ একটি 'ম্যাপওয়্যারপ' ডিভ সেট আছে এবং এর ভিতরে আমার কাছে একটি গুগল 'ম্যাপ' রয়েছে যা 100% x 100% এ সেট করা আছে। সুতরাং মানচিত্রটি 400 x 400px এ লোড হয়, তারপরে জাভাস্ক্রিপ্টের সাহায্যে আমি 'মানচিত্রের মোড়কে' 100% x 100% পর্দার আকারে পরিবর্তন করি - গুগল মানচিত্রটি আমার প্রত্যাশা অনুযায়ী পুরো পর্দার আকার বদলে দেয় তবে টাইলগুলি ডান হাতের প্রান্তের আগে অদৃশ্য হয়ে যেতে শুরু করে পাতা।

গুগল ম্যাপকে বড় আকারের 'ম্যাপওয়্যারপ' ডিভের সাথে পুনরায় সামঞ্জস্য করার জন্য আমি কল করতে পারি এমন কোনও সাধারণ ক্রিয়া আছে?

Answer 1

আপনি যদি গুগল ম্যাপস ভি 2 ব্যবহার করছেন তবে ধারকটির checkResize()পুনরায় আকার দেওয়ার পরে আপনার মানচিত্রে কল করুন। লিংক

হালনাগাদ

গুগল ম্যাপস জাভাস্ক্রিপ্ট এপিআই v2 ২০১১ সালে অবচয় করা হয়েছিল It এটি আর উপলভ্য নয়।

Answer 2

গুগল ম্যাপস ভি 3 এর জন্য আপনাকে পুনরায় আকারের ইভেন্টটি অন্যভাবে ট্রিগার করতে হবে:

google.maps.event.trigger(map, "resize");

পুনরায় আকারের ইভেন্টের জন্য ডকুমেন্টেশন দেখুন (আপনাকে 'পুনরায় আকার দিন' শব্দের অনুসন্ধান করতে হবে): http://code.google.com/apis/maps/docamentation/v3/references.html#event

---

হালনাগাদ

এই উত্তরটি এখানে দীর্ঘ দিন রয়েছে, সুতরাং একটি সামান্য ডেমো সার্থক হতে পারে এবং যদিও এটি jQuery ব্যবহার করে তবে এটি করার দরকার নেই।

$(function() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

  // listen for the window resize event & trigger Google Maps to update too
  $(window).resize(function() {
    // (the 'map' here is the result of the created 'var map = ...' above)
    google.maps.event.trigger(map, "resize");
  });
});

html,
body {
  height: 100%;
}
#map-canvas {
  min-width: 200px;
  width: 50%;
  min-height: 200px;
  height: 80%;
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&dummy=.js"></script>
Google Maps resize demo
<div id="map-canvas"></div>

আপডেট 2018-05-22

মানচিত্র জাভাস্ক্রিপ্ট এপিআই এর ৩.৩২ সংস্করণে নতুন রেন্ডারারের রিলিজ সহ পুনরায় আকারের ইভেন্টটি আর Mapশ্রেণীর অংশ নয় ।

ডকুমেন্টেশন সূচিত করে

মানচিত্রটি পুনরায় আকার দেওয়া হলে মানচিত্রের কেন্দ্রটি স্থির হয়

• পূর্ণ-স্ক্রিন নিয়ন্ত্রণ এখন কেন্দ্র সংরক্ষণ করে।

• পুনরায় আকারের ইভেন্টটি ম্যানুয়ালি ট্রিগার করার দরকার নেই।

উত্স: https://developers.google.com/maps/docamentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); সংস্করণ 3.32 থেকে শুরু করে কোনও প্রভাব নেই

Comments

GoMap ব্যবহার করে যে কারও কাছেও মনে রাখবেন যে গুগল ম্যাপ অবজেক্টটি go .goMap.map- এ

— অ্যাডাম রয়েছে

প্রয়োগের

— উপায়ের

আমি এটি সেট টাইমআউট দিয়ে মোড়ানো না হওয়া পর্যন্ত এই কল করার পরে মানচিত্রটির আকার পরিবর্তন হবে না। আমি এখানে সমাধানটি পেয়েছি (মন্তব্য # 46 দেখুন)।

— টাইলার কলিয়ার

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

— শচিয়ান

Answer 3

জনপ্রিয় উত্তরটি google.maps.event.trigger(map, "resize");আমার একার পক্ষে কার্যকর হয়নি।

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

$(document).ready(function() {
    google.maps.event.addListener(map, "idle", function(){
        google.maps.event.trigger(map, 'resize'); 
    });
}); 

এটি আমার উত্তর যা আমার পক্ষে কাজ করেছিল।

Answer 4

ওল্ফগ্যাং পিচলারের মানচিত্রে একটি বাক্সে অফার

একটি ড্রাগযোগ্য এবং পুনরায় আকার পরিবর্তনযোগ্য ডিভ উপাদানটিতে একটি মানচিত্র লোড করুন।

Comments

দেখে মনে হচ্ছে এটি ভি 2 মানচিত্রের জন্য। আসল পোস্টারটি ভি 3 মানচিত্র সম্পর্কে জিজ্ঞাসা করছিল। দুটি এপিআই সুসংগত বলে মনে হয় না।

— জোশুয়াডি

এই লিঙ্কটি একটি হুমকি সনাক্ত করেছে।

— ইন্টোটেকো

Answer 5

এটি সবচেয়ে ভাল এটি কাজটি করবে। এটি আপনার মানচিত্রটিকে পুনরায় আকার দেবে। আপনার মানচিত্রটি পুনরায় আকার দেওয়ার জন্য উপাদানটি আর পরীক্ষা করার দরকার নেই। এটি কী করে তা স্বয়ংক্রিয়ভাবে পুনরায় আকারের ইভেন্টটিকে ট্রিগার করবে।

    google.maps.event.addListener(map, "idle", function()
        {
            google.maps.event.trigger(map, 'resize');
        });

        map_array[Next].setZoom( map.getZoom() - 1 );
    map_array[Next].setZoom( map.getZoom() + 1 );

Answer 6

সবার আগে, আমাকে গাইড করার জন্য এবং এই সমস্যাটি বন্ধ করার জন্য ধন্যবাদ। আপনার আলোচনা থেকে আমি এই সমস্যাটি সমাধান করার একটি উপায় পেয়েছি। হ্যাঁ, আসুন বিষয়টিতে আসা যাক। জিনিসটি হ'ল আমি কেকপিএইচপি 3 তে গুগল্যাপ ম্যাপহেল্পার v3 সহায়ক ব্যবহার করছি। আমি যখন বুটস্ট্র্যাপ মডেল পপআপ খোলার চেষ্টা করেছি তখন আমি মানচিত্রের ধূসর বাক্স ইস্যুটি নিয়ে আঘাত পেয়েছিলাম। এটি 2 দিন বাড়ানো হয়েছে। অবশেষে আমি এই উপর একটি ঠিক আছে।

সমস্যাটি সমাধান করতে আমাদের GoogleMapHelper আপডেট করতে হবে

SetCenterMap ফাংশনে নীচের স্ক্রিপ্টটি যুক্ত করা দরকার

google.maps.event.trigger({$id}, \"resize\");

এবং জাভাস্ক্রিপ্টে নীচে কোড অন্তর্ভুক্ত করা প্রয়োজন

google.maps.event.addListenerOnce({$id}, 'idle', function(){
   setCenterMap(new google.maps.LatLng({$this->defaultLatitude}, 
   {$this->defaultLongitude}));
});