खास जानकारी
इस ट्यूटोरियल में आपको 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>
शुरुआत करना
इस ट्यूटोरियल के लिए, मैप और साइडबार बनाने के चरण यहां दिए गए हैं:
इंपोर्ट करने के लिए 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
टैग में एक वैरिएबल है.
नीचे दी गई टेबल में, इस सेक्शन के कोड के बारे में बताया गया है.
कोड और जानकारी | |
---|---|
|
KML फ़ाइल में एक Style एलिमेंट होता है, जिसे सभी प्लेसमार्क पर लागू किया जाता है. यह Style एलिमेंट, BalloonStyle के टेक्स्ट एलिमेंट में #[video] की वैल्यू असाइन करता है.$[x] फ़ॉर्मैट, KML पार्सर को video नाम का Data एलिमेंट खोजने और उसे गुब्बारे के टेक्स्ट के तौर पर इस्तेमाल करने के लिए कहता है. |
|
हर Placemark में एक ExtendedData एलिमेंट होता है, जिसमें Data एलिमेंट शामिल होता है.
ध्यान दें कि हर Placemark में video नाम वाला एट्रिब्यूट
का एक Data एलिमेंट होता है.इस ट्यूटोरियल की फ़ाइल में, एम्बेड किए गए YouTube वीडियो का इस्तेमाल, हर प्लेसमार्क के गुब्बारे के टेक्स्ट की वैल्यू के तौर पर किया जाता है. |
KML दस्तावेज़ के कस्टम डेटा जोड़ना चैप्टर में, इकाई को बदलने के बारे में ज़्यादा जानकारी पाई जा सकती है.
KMLlayer दिखाया जा रहा है
मैप शुरू किया जा रहा है
यह टेबल इस सेक्शन के कोड के बारे में बताती है.
कोड और जानकारी | |
---|---|
|
मैप पर KML दिखाने के लिए, आपको पहले मैप बनाना होगा. यह कोड एक नया Google मैप ऑब्जेक्ट बनाता है. साथ ही, यह बताता है कि कहां सेंटर में रहना है और कहां ज़ूम करना है. साथ ही, यह मैप को div से जोड़ता है.Google मैप बनाने की बुनियादी बातों के बारे में ज़्यादा जानने के लिए, अपनी वेबसाइट में Google मैप जोड़ना ट्यूटोरियल पढ़ें. |
KMLlayer बनाना
यह टेबल उस कोड के बारे में बताती है जो KMLlayer बनाता है.
कोड और जानकारी | |
---|---|
|
आपका KML दिखाने के लिए एक नया KMLlayer ऑब्जेक्ट बनाता है. |
|
KMLlayer कंस्ट्रक्टर आपकी KML फ़ाइल का यूआरएल सेट करता है. यह KML फ़ाइल ऑब्जेक्ट के लिए ऐसी प्रॉपर्टी भी तय करता है जो ये काम करती हैं:
|
साइडबार में डेटा प्रदर्शित किया जा रहा है
यह सेक्शन उन सेटिंग के बारे में बताता है जो मैप में किसी सुविधा पर क्लिक करने पर, साइडबार में जानकारी विंडो का कॉन्टेंट दिखाती हैं. ये काम करने वाले लोग:
- KMLlayer की किसी भी सुविधा पर किसी क्लिक इवेंट को सुनना.
- क्लिक की गई सुविधा के डेटा को इकट्ठा किया जा रहा है.
- उस डेटा को साइडबार में लिखना.
इवेंट लिसनर जोड़ना
Google Maps, मैप पर उपयोगकर्ता इवेंट को सुनने और उनका जवाब देने की सुविधा देता है.
जैसे, क्लिक या कीबोर्ड बटन दबाना. यह ऐसे click
इवेंट के लिए, लिसनर जोड़ता है.
नीचे दी गई टेबल में, इस सेक्शन के कोड के बारे में बताया गया है.
कोड और जानकारी | |
---|---|
|
kmlLayer.addListener इवेंट लिसनर इन चीज़ों पर ध्यान देता है:
|
KML सुविधा का डेटा साइडबार में लिखना
ट्यूटोरियल के इस चरण तक, आपने लेयर की सुविधाओं पर क्लिक इवेंट कैप्चर कर लिए हैं. अब ऐप्लिकेशन को साइडबार में सुविधा के डेटा और जानकारी विंडो की सामग्री लिखने के लिए सेट किया जा सकता है.
नीचे दी गई टेबल में, इस सेक्शन के कोड के बारे में बताया गया है.
कोड और जानकारी | |
---|---|
|
यह, जानकारी विंडो के कॉन्टेंट को एक वैरिएबल में लिखता है. |
|
यह नीति div की पहचान करता है और उसमें मौजूद एचटीएमएल को सुविधा के कॉन्टेंट से बदलता है.
|
|
कोड की ये लाइनें, addListener कंस्ट्रक्टर में फ़ंक्शन बन जाती हैं.
|
अब मैप पर किसी KML सुविधा पर क्लिक करने पर, साइडबार अपडेट हो जाता है. इस सुविधा की मदद से, आपकी जानकारी विंडो में मौजूद कॉन्टेंट भी दिखता है.
ज़्यादा जानकारी
KML फ़ाइलों का इस्तेमाल करने के बारे में और पढ़ें.