গুগল ম্যাপস: কীভাবে কাস্টম ইনফো উইন্ডো তৈরি করবেন?

Question 1

মানচিত্র চিহ্নিতকারীটির জন্য ডিফল্ট গুগল মানচিত্রের ইনফো উইন্ডোটি খুব গোলাকার। বর্গাকার কোণগুলির সাহায্যে আমি কীভাবে একটি পছন্দসই ইনফর্ম উইন্ডো তৈরি করব?

Question 2

প্রায় কিছু শিকারের পরে সম্পাদনা করুন , এটি সেরা বিকল্প বলে মনে হচ্ছে:

https://github.com/googlemaps/js-info-bبل/blob/gh-pages/example/example.html

আপনি অনলাইনের স্কুবা ডাইভ লগিংয়ের জন্য একটি ওয়েবসাইট ডাইভ সেভেনে ব্যবহার করেছিলেন এই ইনফ্লুবালের একটি কাস্টমাইজড সংস্করণ দেখতে পাবেন । দেখে মনে হচ্ছে:

এখানে আরও কিছু উদাহরণ রয়েছে । তবে তারা অবশ্যই আপনার স্ক্রিনশটের উদাহরণের মত সুন্দর দেখাচ্ছে না।

Question 3

আপনি একা jquery ব্যবহার করে পুরো ইনফরমোটি সংশোধন করতে পারেন ...

var popup = new google.maps.InfoWindow({
    content:'<p id="hook">Hello World!</p>'
});

এখানে <p> উপাদানটি আসল ইনফো উইন্ডোতে হুক হিসাবে কাজ করবে। একবার ডমড্রি আগুন লাগলে, উপাদানটি জাভাস্ক্রিপ্ট / জ্যাকুয়েরি, পছন্দ মতো ব্যবহার করে সক্রিয় এবং অ্যাক্সেসযোগ্য হয়ে উঠবে $('#hook').parent().parent().parent().parent()।

নীচের কোডটি কেবল ইনফো উইন্ডোর চারপাশে একটি 2 পিক্সেল সীমানা সেট করে।

google.maps.event.addListener(popup, 'domready', function() {
    var l = $('#hook').parent().parent().parent().siblings();
    for (var i = 0; i < l.length; i++) {
        if($(l[i]).css('z-index') == 'auto') {
            $(l[i]).css('border-radius', '16px 16px 16px 16px');
            $(l[i]).css('border', '2px solid red');
        }
    }
});

আপনি নতুন সিএসএস ক্লাস স্থাপন বা নতুন উপাদান যুক্ত করার মতো কিছু করতে পারেন।

আপনার যা প্রয়োজন তা পেতে উপাদানগুলির সাথে চারপাশে খেলুন ...

Question 4

আমি ইনফোবক্সকে উন্নত স্টাইলিংয়ের জন্য নিখুঁত পেয়েছি।

একটি ইনফোবক্স একটি google.maps.InfoWindow এর মতো আচরণ করে তবে এটি উন্নত স্টাইলিংয়ের জন্য বেশ কয়েকটি অতিরিক্ত বৈশিষ্ট্য সমর্থন করে। একটি ইনফোবক্স মানচিত্রের লেবেল হিসাবেও ব্যবহার করা যেতে পারে। একটি ইনফোবক্সও একই ইভেন্টগুলিকে একটি google.maps.InfoWindow হিসাবে চালিত করে ।

আপনার পৃষ্ঠায় http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobox/src/infobox.js অন্তর্ভুক্ত করুন

Question 5

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

var infowindow = new google.maps.InfoWindow({
  content: '<div id="gm_content">'+contentString+'</div>'
});

google.maps.event.addListener(infowindow,'domready',function(){
  var el = document.getElementById('gm_content').parentNode.parentNode.parentNode;
  el.firstChild.setAttribute('class','closeInfoWindow');
  el.firstChild.setAttribute('title','Close Info Window');
  el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
  el.setAttribute('class','infoWindowContainer');
  for(var i=0; i<11; i++){
    el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
    el.style.display = 'none';
  }
});

কোডটি যথারীতি ইনফাইন্ডো তৈরি করে (প্লাগিন, কাস্টম ওভারলে বা বিশাল কোডের প্রয়োজন নেই), বিষয়বস্তু ধরে রাখতে আইডি দিয়ে ডিভি ব্যবহার করে। এটি সিস্টেমে একটি হুক দেয় যা আমরা সাধারণ বাহ্যিক স্টাইলশীট দিয়ে সঠিকভাবে কৌশলগুলি ব্যবহার করতে পারি।

কয়েকটি অতিরিক্ত টুকরা রয়েছে (যেগুলি কঠোরভাবে প্রয়োজন হয় না) যা এতে ডিভের নিকটস্থ উইন্ডো চিত্রের সাথে একটি হুক দেওয়ার মতো জিনিসগুলি পরিচালনা করে।

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

আপনি যদি এটি jquery এ পরিবর্তন করতে চান (কেন আপনি চান না কেন) তবে এটি মোটামুটি সহজ হওয়া উচিত।

আমি সাধারণত জাভাস্ক্রিপ্ট বিকাশকারী না তাই কোনও চিন্তা, মন্তব্য, সমালোচনা স্বাগত জানায় :)

Question 6

নীচে কোডের কিছু অংশ আপনাকে সাহায্য করতে পারে।

var infowindow = new google.maps.InfoWindow();
 google.maps.event.addListener(marker, 'mouseover', (function(marker) {
            return function() {
                var content = address;
                infowindow.setContent(content);
                infowindow.open(map, marker);
            }
          })(marker));

নিখুঁত জুম সহ Google মানচিত্রে একাধিক ঠিকানাগুলি কীভাবে সন্ধান করতে হবে তার একটি নিবন্ধ এখানে রয়েছে যা আমাকে এটি অর্জনে সহায়তা করেছিল। আপনি এটি জেএস ফিডল লিঙ্ক এবং সম্পূর্ণ উদাহরণের জন্য কাজ করতে পারেন।

Question 7

এফডাব্লুআইএক্স.কম কীভাবে এটি বিশেষভাবে করছে তা আমি নিশ্চিত নই, তবে আমি বাজি দেব যে তারা কাস্টম ওভারলেগুলি ব্যবহার করছে ।

Question 8

স্টাইলের ডিফল্ট ইনফোউইন্ডো অপসারণ করতে আপনি নীচের কোড ব্যবহার করতে পারেন। আপনি ইনফরাইন্ডোর জন্য এইচটিএমএল কোড ব্যবহার করার পরে:

var inforwindow = "<div style="border-radius: 50%"><img src='URL'></div>"; // show inforwindow image circle
marker.addListener('click', function() {
    $('.gm-style-iw').next().css({'height': '0px'}); //remove arrow bottom inforwindow
    $('.gm-style-iw').prev().html(''); //remove style default inforwindows
});

Question 9

এখানে গুগলের বর্তমান ইনফাইন্ডো উদাহরণের ভিত্তিতে একটি খাঁটি সিএসএস সমাধান রয়েছে:

https://developers.google.com/maps/docamentation/javascript/example/infowindow-simple

#map *{
  overflow: visible;
}
#content{
  display: block;
  position: absolute;
  bottom: -8px;
  left: -20px;
  background-color: white;
  z-index: 10001;
}

এটি একটি দ্রুত সমাধান যা ছোট তথ্য উইন্ডোগুলির জন্য ভাল কাজ করবে। ভোট দিলে ভুলতে ভুলবেন না: পি

Question 10

এমনকি পপআপ ধারক / ক্যানভাসে বা আপনার কীভাবে আপনি নিজের সিএসএস ক্লাস যুক্ত করতে পারেন। বর্তমান গুগল ম্যাপস ৩.7 এ ক্যানভাস উপাদান দ্বারা স্টাইলযুক্ত পপআপ রয়েছে যা কোডে পপআপ ডিভ ধারককে প্রিপেন্ড করে। গুগল্যাপস ৩.7 এ আপনি পপআপের ডমপ্রেড ইভেন্টের মাধ্যমে রেন্ডারিং প্রক্রিয়াতে আসতে পারেন:

var popup = new google.maps.InfoWindow();
google.maps.event.addListener(popup, 'domready', function() {
  if (this.content && this.content.parentNode && this.content.parentNode.parentNode) {
    if (this.content.parentNode.parentNode.previousElementSibling) {
      this.content.parentNode.parentNode.previousElementSibling.className = 'my-custom-popup-container-css-classname';
    }
  }
});

এলিমেন্ট.প্রিরিএলমেন্টসিলিং আইই 8 তে উপস্থিত নেই- তাই আপনি যদি এটি এটিকে কাজ করতে চান তবে এটি অনুসরণ করুন ।

ইভেন্ট এবং আরও কিছুর জন্য সর্বশেষ ইনফো উইন্ডো রেফারেন্সটি পরীক্ষা করুন ..

আমি এটি বেশিরভাগ ক্ষেত্রে সবচেয়ে পরিষ্কার পেয়েছি।

Question 11

আমার মনে হয় আমি যে সেরা উত্তরটি নিয়ে এসেছি তা এখানে: https://codepen.io/senrathis96/pen/yJPZGx

আমি এর জন্য ক্রেডিট নিতে পারি না, আমি গুগল ম্যাপের নির্ভরতাটি লোড করার জন্য অন্য কোনও কোডেন ব্যবহারকারীের কাছে এটি চেয়েছিলাম

কলটি নোট করুন:

InfoWindow() // constructor