KML डेटा दिखाएं

खास जानकारी

इस ट्यूटोरियल में, Google Maps और साइडबार में 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. KML लेयर दिखाना
  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 प्रॉपर्टी के तौर पर ऐक्सेस किया जा सकता है.

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 ऑब्जेक्ट के लिए ऐसी प्रॉपर्टी भी तय करता है जो ये काम करती हैं:
  • लेयर को यह बताता है कि क्लिक करने पर, जानकारी वाली विंडो न दिखाएं.
  • मैप को लेयर के कॉन्टेंट के बाउंडिंग बॉक्स पर ज़ूम करके, उसे बीच में ले जाने के लिए कहता है.
  • मैप को पहले से बनाए गए मैप ऑब्जेक्ट पर सेट करता है.
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 फ़ाइलों के इस्तेमाल के बारे में ज़्यादा पढ़ें.