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 स्टैंडर्ड के मुताबिक होनी चाहिए. इस स्टैंडर्ड के बारे में ज़्यादा जानने के लिए, Open Geospatial Consortium की वेबसाइट पर जाएं. Google के KML दस्तावेज़ में, भाषा के बारे में भी बताया गया है. साथ ही, इसमें डेवलपर के लिए रेफ़रंस और कॉन्सेप्ट से जुड़े दस्तावेज़ उपलब्ध हैं.

अगर आपको 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 प्रॉपर्टी के तौर पर ऐक्सेस किया जा सकता है.

ExtendedData एलिमेंट

इस ट्यूटोरियल में दी गई 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 में एक Data एलिमेंट होता है. इसका नाम एट्रिब्यूट video होता है.
इस ट्यूटोरियल की फ़ाइल में, एम्बेड किए गए 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 Maps ऑब्जेक्ट बनता है. साथ ही, इससे यह पता चलता है कि मैप को कहां पर सेंटर और ज़ूम करना है. इसके अलावा, यह मैप को 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 फ़ाइल का यूआरएल सेट करता है. यह KMLLayer ऑब्जेक्ट के लिए ऐसी प्रॉपर्टी भी तय करता है जो ये काम करती हैं:
  • इस विकल्प से लेयर को यह निर्देश मिलता है कि क्लिक किए जाने पर जानकारी वाली विंडो न दिखाई जाए.
  • इस विकल्प से, मैप को लेयर के कॉन्टेंट के बाउंडिंग बॉक्स के हिसाब से सेंटर और ज़ूम करने का निर्देश मिलता है.
  • यह मैप को, पहले बनाए गए Map ऑब्जेक्ट पर सेट करता है.
Maps JavaScript API की रेफ़रंस गाइड में, इस लेयर के लिए उपलब्ध सभी विकल्पों की सूची दी गई है.
अपनी एचटीएमएल फ़ाइल लोड करें, ताकि KML फ़ाइल के कॉन्टेंट को बेस मैप के ऊपर एक लेयर के तौर पर दिखाया जा सके. हालांकि, किसी भी सुविधा पर क्लिक करने से अभी कोई कार्रवाई नहीं होगी.

साइडबार में डेटा दिखाना

इस सेक्शन में उन सेटिंग के बारे में बताया गया है जो मैप पर किसी सुविधा पर क्लिक करने पर, साइडबार में जानकारी वाली विंडो का कॉन्टेंट दिखाती हैं. ऐसा करने के लिए:

  • 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 की पहचान करता है जिसमें लिखना है. साथ ही, इसमें मौजूद एचटीएमएल को सुविधा के कॉन्टेंट से बदल देता है. 
kmlLayer.addListener('click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});
कोड की ये लाइनें, addListener कंस्ट्रक्टर में फ़ंक्शन बन जाती हैं.

अब मैप पर किसी KML सुविधा पर क्लिक करने पर, साइडबार अपडेट हो जाता है. इससे आपको उसकी जानकारी वाली विंडो का कॉन्टेंट दिखता है.

ज़्यादा जानकारी

KML फ़ाइलों के इस्तेमाल के बारे में ज़्यादा जानें.