KML ডেটা প্রদর্শন করুন

ওভারভিউ

এই টিউটোরিয়ালটি আপনাকে দেখায় কিভাবে একটি Google মানচিত্র এবং সাইডবারে একটি KML ফাইলের তথ্য প্রদর্শন করতে হয়। মানচিত্রে KML ফাইলগুলি ব্যবহার করার বিষয়ে আরও তথ্যের জন্য, KML স্তরগুলির নির্দেশিকা পড়ুন। সাইডবারে ডেটা দেখতে নীচের মানচিত্রে একটি মার্কার ক্লিক করার চেষ্টা করুন৷

নীচের বিভাগটি মানচিত্র এবং সাইডবার তৈরি করতে আপনার প্রয়োজনীয় পুরো কোডটি প্রদর্শন করে। 

var map;
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });

  var kmlLayer = new google.maps.KmlLayer(src, {
    suppressInfoWindows: true,
    preserveViewport: false,
    map: map
  });
  kmlLayer.addListener('click', function(event) {
    var content = event.featureData.infoWindowHtml;
    var testimonial = document.getElementById('capture');
    testimonial.innerHTML = content;
  });
}
<div id="map"></div>
<div id="capture"></div>
html, body {
  height: 370px;
  padding: 0;
  margin: 0;
  }
#map {
 height: 360px;
 width: 300px;
 overflow: hidden;
 float: left;
 border: thin solid #333;
 }
#capture {
 height: 360px;
 width: 480px;
 overflow: hidden;
 float: left;
 background-color: #ECECFB;
 border: thin solid #333;
 border-left: none;
 }
<!-- Replace the value of the key parameter with your own API key. -->
<script async
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

নিজে চেষ্টা করে দেখুন

আপনি কোড উইন্ডোর উপরের ডানদিকের কোণায় <> আইকনে ক্লিক করে JSFiddle-এ এই কোডটি নিয়ে পরীক্ষা করতে পারেন। 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>KML Click Capture Sample</title>
    <style>
      html, body {
        height: 370px;
        padding: 0;
        margin: 0;
        }
      #map {
       height: 360px;
       width: 300px;
       overflow: hidden;
       float: left;
       border: thin solid #333;
       }
      #capture {
       height: 360px;
       width: 480px;
       overflow: hidden;
       float: left;
       background-color: #ECECFB;
       border: thin solid #333;
       border-left: none;
       }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="capture"></div>
    <script>
      var map;
      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-19.257753, 146.823688),
          zoom: 2,
          mapTypeId: 'terrain'
        });

        var kmlLayer = new google.maps.KmlLayer(src, {
          suppressInfoWindows: true,
          preserveViewport: false,
          map: map
        });
        kmlLayer.addListener('click', function(event) {
          var content = event.featureData.infoWindowHtml;
          var testimonial = document.getElementById('capture');
          testimonial.innerHTML = content;
        });
      }
    </script>
    <script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

শুরু করা

এই টিউটোরিয়ালের জন্য মানচিত্র এবং সাইডবার তৈরি করার পর্যায়গুলি হল:

  1. KML ফাইল সেট আপ করা হচ্ছে
  2. KMLlayer প্রদর্শন করা হচ্ছে
  3. সাইডবারে ডেটা প্রদর্শন করা হচ্ছে

আমদানির জন্য KML ফাইল সেট আপ করা হচ্ছে৷

আপনার KML ফাইলটি KML স্ট্যান্ডার্ডের সাথে সঙ্গতিপূর্ণ হওয়া উচিত। এই মান সম্পর্কে বিস্তারিত জানার জন্য, ওপেন জিওস্পেশিয়াল কনসোর্টিয়াম ওয়েবসাইট দেখুন। Google-এর KML ডকুমেন্টেশন ভাষা বর্ণনা করে, এবং একটি রেফারেন্স এবং ধারণাগত বিকাশকারী ডকুমেন্টেশন উভয়ই অফার করে।

আপনি যদি শুধু শিখছেন এবং একটি KML ফাইল না থাকলে, আপনি করতে পারেন:

  • এই টিউটোরিয়ালের জন্য নিম্নলিখিত KML ফাইলটি ব্যবহার করুন:

    https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml

  • ওয়েবে একটি KML ফাইল খুঁজুন। আপনি Google এর filetype সার্চ অপারেটর ব্যবহার করতে পারেন।

    velodromes জন্য যেকোনো অনুসন্ধান শব্দ প্রতিস্থাপন করুন, বা সমস্ত KML ফাইল খুঁজে পেতে শব্দটি সম্পূর্ণ বাদ দিন।

আপনি যদি নিজের ফাইল তৈরি করেন, এই উদাহরণে কোডটি অনুমান করে যে:

  • আপনি ইন্টারনেটে ফাইলটি সর্বজনীনভাবে হোস্ট করেছেন৷ KML-কে KMLLayer এ KML লোড করে এমন সমস্ত অ্যাপ্লিকেশনের জন্য এটি একটি প্রয়োজনীয়তা, যাতে Google-এর সার্ভারগুলি ম্যাপে প্রদর্শন করার জন্য সামগ্রী খুঁজে পেতে এবং পুনরুদ্ধার করতে পারে৷
  • ফাইলটি পাসওয়ার্ড-সুরক্ষিত পৃষ্ঠায় নেই।
  • আপনার বৈশিষ্ট্য তথ্য উইন্ডো বিষয়বস্তু আছে. আপনি এই বিষয়বস্তুটি একটি description উপাদানে ধারণ করতে পারেন, অথবা একটি ExtendedData উপাদান এবং সত্তা প্রতিস্থাপন ব্যবহার করে এটি অন্তর্ভুক্ত করতে পারেন (আরো তথ্যের জন্য নীচে পড়ুন)। উভয় বৈশিষ্ট্যের infoWindowHtml সম্পত্তি হিসাবে অ্যাক্সেসযোগ্য।

এক্সটেন্ডেড ডেটা উপাদান

এই টিউটোরিয়ালের KML ফাইলটিতে একটি ExtendedData উপাদানের বৈশিষ্ট্য তথ্য অন্তর্ভুক্ত রয়েছে। এই তথ্যটি বৈশিষ্ট্যের বর্ণনায় আনতে, সত্তা প্রতিস্থাপন ব্যবহার করুন, যা মূলত BalloonStyle ট্যাগের একটি পরিবর্তনশীল।

নীচের টেবিলটি এই বিভাগের কোড ব্যাখ্যা করে।

কোড এবং বর্ণনা
<Style id="west_campus_style">
  <IconStyle>
    <Icon>
      <href>https://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png
      </href>
    </Icon>
  </IconStyle>
  <BalloonStyle>
    <text>$[video]</text>
  </BalloonStyle>
</Style>

KML ফাইলে একটি একক Style উপাদান রয়েছে যা সমস্ত স্থানচিহ্নে প্রয়োগ করা হয়।
এই Style উপাদানটি BalloonStyle পাঠ্য উপাদানের জন্য #[video] এর একটি মান নির্ধারণ করে।
$[x] বিন্যাসটি KML পার্সারকে video নামের একটি Data উপাদান খুঁজতে এবং এটিকে বেলুন পাঠ্য হিসাবে ব্যবহার করতে বলে।
<Placemark>
    <name>Google West Campus 1</name>
    <styleUrl>#west_campus_style</styleUrl>
    <ExtendedData>
      <Data name="video">
        <value><![CDATA[<iframe width="640" height="360"
          src="https://www.youtube.com/embed/ZE8ODPL2VPI" frameborder="0"
          allowfullscreen></iframe><br><br>]]></value>
      </Data>
    </ExtendedData>
    <Point>
      <coordinates>-122.0914977709329,37.42390182131783,0</coordinates>
    </Point>
</Placemark>

প্রতিটি Placemark একটি ExtendedData উপাদান থাকে, যা Data উপাদান ধারণ করে। লক্ষ্য করুন যে প্রতিটি Placemark video নামের বৈশিষ্ট্য সহ একটি একক Data উপাদান রয়েছে৷
এই টিউটোরিয়ালের ফাইলটি প্রতিটি প্লেসমার্কের বেলুন পাঠ্যের মান হিসাবে এমবেড করা YouTube ভিডিও ব্যবহার করে।

আপনি KML ডকুমেন্টেশনের কাস্টম ডেটা যোগ করা অধ্যায়ে সত্তা প্রতিস্থাপন সম্পর্কে আরও জানতে পারেন।

KMLlayer প্রদর্শন করা হচ্ছে

মানচিত্র শুরু করা হচ্ছে

এই টেবিলটি এই বিভাগের কোড ব্যাখ্যা করে।

কোড এবং বর্ণনা
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });
}

একটি মানচিত্রে KML প্রদর্শন করতে, আপনাকে প্রথমে মানচিত্র তৈরি করতে হবে।
এই কোডটি একটি নতুন Google Map অবজেক্ট তৈরি করে, কোথায় কেন্দ্র এবং জুম করতে হবে তা বলে, এবং মানচিত্রটিকে div এ সংযুক্ত করে।
একটি Google মানচিত্র তৈরির মূল বিষয়গুলি সম্পর্কে আরও জানতে, আপনার ওয়েবসাইট টিউটোরিয়ালটিতে একটি Google মানচিত্র যুক্ত করা পড়ুন৷

KMLlayer তৈরি করা হচ্ছে

এই টেবিলটি কোড ব্যাখ্যা করে যা একটি KMLlayer তৈরি করে।

কোড এবং বর্ণনা
var kmlLayer = new google.maps.KmlLayer();

আপনার KML প্রদর্শনের জন্য একটি নতুন KMLlayer অবজেক্ট তৈরি করে।
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
var kmlLayer = new google.maps.KmlLayer(src, {
  suppressInfoWindows: true,
  preserveViewport: false,
  map: map
});

KMLlayer কনস্ট্রাক্টর আপনার KML ফাইলের URL সেট করে। এটি KMLlayer অবজেক্টের জন্য বৈশিষ্ট্যগুলিও সংজ্ঞায়িত করে যা নিম্নলিখিতগুলি করে:
  • ক্লিক করার সময় একটি তথ্য উইন্ডো প্রদর্শন না করতে স্তরটিকে বলে৷
  • মানচিত্রটিকে কেন্দ্রে এবং স্তরের বিষয়বস্তুর বাউন্ডিং বাক্সে জুম করে।
  • আগে তৈরি করা ম্যাপ অবজেক্টে মানচিত্র সেট করে।
মানচিত্র জাভাস্ক্রিপ্ট API রেফারেন্স গাইড এই স্তরের জন্য উপলব্ধ সমস্ত বিকল্প তালিকাভুক্ত করে৷
ভিত্তি মানচিত্রের উপরে একটি স্তর হিসাবে KML ফাইল সামগ্রী প্রদর্শন করতে আপনার HTML ফাইল লোড করুন৷ যাইহোক, কোনো ফিচারে ক্লিক করলে এখনও কোনো অ্যাকশন হবে না।

সাইডবারে ডেটা প্রদর্শন করা হচ্ছে

এই বিভাগটি সেটিংস ব্যাখ্যা করে যা সাইডবারে তথ্য উইন্ডো সামগ্রী প্রদর্শন করে যখন আপনি মানচিত্রে একটি বৈশিষ্ট্য ক্লিক করেন। এটি দ্বারা করা হয়:

  • KMLlayer-এর যেকোনো বৈশিষ্ট্যে ক্লিক ইভেন্টের জন্য শোনা।
  • ক্লিক করা বৈশিষ্ট্যের ডেটা দখল করা।
  • সাইডবারে সেই ডেটা লেখা।

একটি ইভেন্ট শ্রোতা যোগ করা হচ্ছে

Google Maps ম্যাপে ব্যবহারকারীর ইভেন্টগুলি শুনতে এবং প্রতিক্রিয়া জানাতে একটি ফাংশন প্রদান করে, যেমন ক্লিক বা কীবোর্ড কীপ্রেস৷ এটি এই ধরনের click ইভেন্টের জন্য একটি শ্রোতা যোগ করে।

নীচের টেবিলটি এই বিভাগের কোড ব্যাখ্যা করে।

কোড এবং বর্ণনা
kmlLayer.addListener('click', function(event) {});

kmlLayer.addListener ইভেন্ট লিসেনার নিম্নলিখিতগুলির উপর ফোকাস করে:
  • শোনার জন্য ইভেন্টের ধরন। এই টিউটোরিয়ালে, এটি click ইভেন্ট।
  • ঘটনা ঘটলে কল করার জন্য একটি ফাংশন।
আপনি বিকাশকারীর নির্দেশিকা থেকে ইভেন্টগুলি সম্পর্কে আরও জানতে পারেন৷

সাইডবারে KML বৈশিষ্ট্য ডেটা লেখা

টিউটোরিয়ালের এই পর্যায়ে, আপনি স্তরের বৈশিষ্ট্যগুলিতে ক্লিক ইভেন্টগুলি ক্যাপচার করেছেন। আপনি এখন সাইডবারে বৈশিষ্ট্যের ডেটা এবং তথ্য উইন্ডো বিষয়বস্তু লিখতে অ্যাপ্লিকেশন সেট করতে পারেন।

নীচের টেবিলটি এই বিভাগের কোড ব্যাখ্যা করে।

কোড এবং বর্ণনা
var content = event.featureData.infoWindowHtml;

একটি ভেরিয়েবলে তথ্য উইন্ডো বিষয়বস্তু লেখে।
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;

যে div এ লিখতে হবে তা শনাক্ত করে এবং এতে থাকা HTML-কে বৈশিষ্ট্যের বিষয়বস্তুর সাথে প্রতিস্থাপন করে।
kmlLayer.addListener('click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});

কোডের এই লাইনগুলি addListener কন্সট্রাক্টরের মধ্যে ফাংশন হয়ে ওঠে।

এখন প্রতিবার যখন আপনি মানচিত্রে একটি KML বৈশিষ্ট্য ক্লিক করেন, সাইডবার আপডেট হয় তার তথ্য উইন্ডো বিষয়বস্তু প্রদর্শন করতে।

আরও তথ্য

KML ফাইল ব্যবহার সম্পর্কে আরও পড়ুন।