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

সংক্ষিপ্ত বিবরণ

এই টিউটোরিয়ালটি আপনাকে দেখাবে কিভাবে গুগল ম্যাপ এবং সাইডবারে 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 স্ট্যান্ডার্ডের সাথে সঙ্গতিপূর্ণ হওয়া উচিত। এই স্ট্যান্ডার্ড সম্পর্কে বিস্তারিত জানতে, Open Geospatial Consortium ওয়েবসাইটটি দেখুন। Google এর KML ডকুমেন্টেশন ভাষাটিও বর্ণনা করে এবং একটি রেফারেন্স এবং ধারণাগত ডেভেলপার ডকুমেন্টেশন উভয়ই প্রদান করে।

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

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

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

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

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

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

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

বর্ধিত ডেটা উপাদান

এই টিউটোরিয়ালে KML ফাইলটিতে একটি ExtendedData উপাদানের বৈশিষ্ট্য সম্পর্কিত তথ্য অন্তর্ভুক্ত রয়েছে। বৈশিষ্ট্যের বর্ণনায় এই তথ্য আনতে, entity replacement ব্যবহার করুন, যা মূলত 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 এর name বৈশিষ্ট্য সহ একটি Data উপাদান থাকে।
এই টিউটোরিয়ালের ফাইলটি প্রতিটি প্লেসমার্কের বেলুন টেক্সটের মান হিসেবে এমবেডেড ইউটিউব ভিডিও ব্যবহার করে।

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 প্রদর্শন করতে, আপনাকে প্রথমে মানচিত্রটি তৈরি করতে হবে।
এই কোডটি একটি নতুন গুগল ম্যাপ অবজেক্ট তৈরি করে, কোথায় সেন্টার এবং জুম করতে হবে তা বলে দেয় এবং ম্যাপটিকে div এর সাথে সংযুক্ত করে।
গুগল ম্যাপ তৈরির মূল বিষয়গুলি সম্পর্কে আরও জানতে, আপনার ওয়েবসাইটে গুগল ম্যাপ যোগ করার টিউটোরিয়ালটি পড়ুন।

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 অবজেক্টের বৈশিষ্ট্যগুলিও সংজ্ঞায়িত করে যা নিম্নলিখিত কাজ করে:
  • ক্লিক করার সময় লেয়ারটিকে তথ্য উইন্ডো প্রদর্শন না করতে বলে।
  • মানচিত্রকে স্তরের বিষয়বস্তুর বাউন্ডিং বাক্সকে কেন্দ্র করে জুম করতে বলে।
  • মানচিত্রটিকে পূর্বে তৈরি করা মানচিত্র বস্তুতে সেট করে।
ম্যাপস জাভাস্ক্রিপ্ট এপিআই রেফারেন্স গাইড এই স্তরের জন্য সমস্ত উপলব্ধ বিকল্প তালিকাভুক্ত করে।
বেস ম্যাপের উপরে একটি স্তর হিসেবে KML ফাইলের বিষয়বস্তু প্রদর্শনের জন্য আপনার HTML ফাইলটি লোড করুন। তবে, কোনও বৈশিষ্ট্যে ক্লিক করলে এখনও কোনও পদক্ষেপ নেওয়া হবে না।

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

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

  • KMLLayer এর যেকোনো বৈশিষ্ট্যের উপর ক্লিক ইভেন্টের জন্য শুনছি।
  • ক্লিক করা বৈশিষ্ট্যের ডেটা দখল করা।
  • সেই তথ্য সাইডবারে লেখা হচ্ছে।

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

গুগল ম্যাপস ব্যবহারকারীর ইভেন্টগুলি শুনতে এবং প্রতিক্রিয়া জানাতে একটি ফাংশন প্রদান করে, যেমন ক্লিক বা কীবোর্ড কী প্রেস। এটি এই ধরনের 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 ফাইল ব্যবহার সম্পর্কে আরও পড়ুন।