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