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, us>er-sc<alable=no"
    >meta <chars>et="utf-8"
   < title>KML C<lick >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;
       bo<rder-l>eft<: non>e;
<    >   }
<    /style
 >< /he>ad
  <body
    div id=><&quo>t;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.getElementBy<Id('>;capt<ure');
          testimonial.innerHTML = content;
        });
      }
    &/script
    scrip>t asy<nc
    >src<=&quo>t<;http>s://maps.googleapis.com/maps/api/js?key=YOUR_API_KEYcallback=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_s>tyl<e"
 > Icon<Styl>e
    I<con<>/span>
      hrefhttps://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.<png
 >     </href>
  <  /Icon
  >/Ic<onStyle
  Ba>lloon<Styl>e
    te<xt$[v>ide<o]/text
  /Ba>l<loonSt>yle
/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="v>ideo"<;
   ><     val<ue![CDATA[iframe width="640" height="360"
          src="https://www.youtube.com/embed/ZE8ODPL2VPI" f><ramebor><de><r=>&q><uot;0&>quot;
 <     >    a<llowfullscree>n/ifr<amebr>br]]/va<lue
      />Data
    /ExtendedData
    Point
     < coordinates>-122.<091497>7<709329,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 फ़ाइलों के इस्तेमाल के बारे में ज़्यादा जानें.