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 फ़ाइल का इस्तेमाल करें:

    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>
केएमएल फ़ाइल में एक ही 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 Maps ऑब्जेक्ट बनाता है. साथ ही, यह तय करता है कि मैप को कहां सेंटर और ज़ूम करना है. इसके बाद, मैप को div से अटैच करता है.
Google मैप बनाने की बुनियादी बातों के बारे में ज़्यादा जानने के लिए, अपनी वेबसाइट में Google मैप जोड़ना ट्यूटोरियल पढ़ें.

KMLLayer बनाना

इस टेबल में, KMLLayer बनाने वाले कोड के बारे में बताया गया है.

कोड और जानकारी 
var kmlLayer = new google.maps.KmlLayer();
आपके KML को दिखाने के लिए, नया KMLलेयर ऑब्जेक्ट बनाता है.		 
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 फ़ाइल के कॉन्टेंट को बेस मैप के ऊपर लेयर के तौर पर दिखाने के लिए, अपनी एचटीएमएल फ़ाइल लोड करें. हालांकि, किसी भी सुविधा पर क्लिक करने से अभी कोई कार्रवाई नहीं होगी.

साइडबार में डेटा दिखाया जा रहा है

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

  • KMLलेयर की किसी भी सुविधा पर क्लिक इवेंट को सुनना.
  • क्लिक की गई सुविधा का डेटा पाना.
  • उस डेटा को साइडबार में लिखना.

इवेंट लिसनर जोड़ना

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 फ़ाइलों के इस्तेमाल के बारे में ज़्यादा पढ़ें.