खास जानकारी
जियोमैप किसी देश, महाद्वीप या इलाके का मैप होता है, जिसमें रंग और वैल्यू खास इलाकों को असाइन की जाती हैं. वैल्यू को कलर स्केल के तौर पर दिखाया जाता है. साथ ही, क्षेत्रों के लिए वैकल्पिक होवर टेक्स्ट भी तय किया जा सकता है. मैप को ब्राउज़र में, एम्बेड किए गए फ़्लैश प्लेयर का इस्तेमाल करके रेंडर किया जाता है. ध्यान दें कि मैप को न तो स्क्रोल किया जा सकता है और न ही उसे खींचकर छोड़ा जा सकता है. हालांकि, इसे ज़ूम करने की अनुमति देने के लिए कॉन्फ़िगर किया जा सकता है.
उदाहरण
यहां दो उदाहरण दिए गए हैं: एक, जिसमें क्षेत्र की डिसप्ले स्टाइल का इस्तेमाल किया गया है और दूसरा, जिसमें मार्कर की डिसप्ले स्टाइल का इस्तेमाल किया गया है.
क्षेत्र के उदाहरण
क्षेत्र की स्टाइल, सभी इलाकों (आम तौर पर, देशों में) को आपकी असाइन की गई वैल्यू से जुड़े रंगों से भर देती है. अपने कोड में options['dataMode']
= 'regions' असाइन करके, इलाकों की स्टाइल बताएं.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages':['geomap'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {};
options['dataMode'] = 'regions';
var container = document.getElementById('regions_div');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);
};
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
मार्कर के उदाहरण
"मार्कर" स्टाइल में, आपके तय किए गए क्षेत्रों के ऊपर एक सर्कल दिखाया जाता है. इसका साइज़ और रंग होता है, ताकि वैल्यू की जानकारी दी जा सके.
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {'packages': ['geomap']});
google.charts.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Popularity'],
['New York', 200],
['Boston', 300],
['Miami', 400],
['Chicago', 500],
['Los Angeles', 600],
['Houston', 700]
]);
var options = {};
options['region'] = 'US';
options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
options['dataMode'] = 'markers';
var container = document.getElementById('map_canvas');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);
};
</script>
</head>
<body>
<div id='map_canvas'></div>
</body>
</html>
लोड हो रहा है
google.charts.load के पैकेज का नाम "geomap" है
google.charts.load('current', {'packages': ['geomap']});
जियोमैप विज़ुअलाइज़ेशन क्लास का नाम google.visualization.GeoMap है
var visualization = new google.visualization.GeoMap(container);
डेटा फ़ॉर्मैट
पते के दो फ़ॉर्मैट इस्तेमाल किए जा सकते हैं. इनमें से हर फ़ॉर्मैट, अलग-अलग संख्या के कॉलम और हर कॉलम के लिए अलग-अलग तरह के डेटा के साथ काम करता है. टेबल में मौजूद सभी पतों में, इनमें से किसी एक का इस्तेमाल किया जाना चाहिए. अलग-अलग टाइप के पतों को आपस में नहीं जोड़ा जा सकता.
- फ़ॉर्मैट 1: अक्षांश/देशांतर की जगहें. यह फ़ॉर्मैट सिर्फ़ तब काम करता है, जब
dataModeविकल्प 'मार्कर' हो. अगर इस फ़ॉर्मैट का इस्तेमाल किया जाता है, तो आपको Google Maps की JavaScript को शामिल करने की ज़रूरत नहीं है. जगह की जानकारी को दो कॉलम में डाला जाता है. साथ ही, दो वैकल्पिक कॉलम में जानकारी दी जाती है:- [संख्या, ज़रूरी है] अक्षांश. धनात्मक संख्याएं उत्तर और ऋणात्मक संख्याएं दक्षिण होती हैं.
- [संख्या, ज़रूरी है] देशांतर. धनात्मक संख्याएं पूर्व और ऋणात्मक संख्याएं पश्चिम होती हैं.
- [संख्या, ज़रूरी नहीं] उपयोगकर्ता के इस क्षेत्र पर कर्सर घुमाने पर, संख्या वाली वैल्यू दिखती है. अगर कॉलम 4 का इस्तेमाल किया गया है, तो यह कॉलम ज़रूरी है.
- [स्ट्रिंग, ज़रूरी नहीं] जब उपयोगकर्ता इस इलाके पर कर्सर घुमाता है, तो अतिरिक्त स्ट्रिंग टेक्स्ट दिखता है.
- फ़ॉर्मैट 2: पता, देश का नाम, इलाके का नाम या अमेरिका के महानगरीय
इलाके के कोड. यह फ़ॉर्मैट,
dataModeविकल्प के साथ काम करता है जिसे 'मार्कर' या 'क्षेत्र' पर सेट किया गया है. जगह की जानकारी को एक कॉलम में डाला जाता है. साथ ही, दो वैकल्पिक कॉलम में भी जानकारी डाली जाती है:- [स्ट्रिंग, ज़रूरी है] मैप की जगह. ये फ़ॉर्मैट स्वीकार किए जाते हैं:
- कोई खास पता (उदाहरण के लिए, "1600 सवालों को{/1}
- स्ट्रिंग के रूप में देश का नाम (उदाहरण के लिए, "इंग्लैंड") या अपरकेस वाला ISO-3166 कोड या अंग्रेज़ी टेक्स्ट से मिलता-जुलता (उदाहरण के लिए, "GB" या "यूनाइटेड किंगडम").
- बड़े अक्षरों का ISO-3166-2 क्षेत्र का कोड नाम या अंग्रेज़ी टेक्स्ट से मिलता-जुलता कोड (उदाहरण के लिए, "US-NJ" या "New जर्सी". ध्यान दें: क्षेत्रों की जानकारी सिर्फ़ तब दी जा सकती है, जब dataMode विकल्प 'क्षेत्र' पर सेट हो.
- महानगरीय एरिया कोड. ये तीन अंकों वाले महानगरीय कोड हैं जिनका इस्तेमाल अलग-अलग इलाकों के बारे में बताने के लिए किया जाता है. अमेरिका के कोड सिर्फ़ इन इलाकों के लिए इस्तेमाल किए जा सकते हैं. ध्यान दें कि ये टेलीफ़ोन एरिया कोड जैसे नहीं होते हैं.
- [संख्या, ज़रूरी नहीं] उपयोगकर्ता के इस क्षेत्र पर कर्सर घुमाने पर, संख्या वाली वैल्यू दिखती है. अगर कॉलम 3 का इस्तेमाल किया गया है, तो यह कॉलम ज़रूरी है.
- [स्ट्रिंग, ज़रूरी नहीं] जब उपयोगकर्ता इस इलाके पर कर्सर घुमाता है, तो अतिरिक्त स्ट्रिंग टेक्स्ट दिखता है.
- [स्ट्रिंग, ज़रूरी है] मैप की जगह. ये फ़ॉर्मैट स्वीकार किए जाते हैं:
ध्यान दें: किसी मैप में ज़्यादा से ज़्यादा 400 एंट्री दिख सकती हैं;
अगर आपके DataTable या DataView में 400 से ज़्यादा लाइनें हैं, तो सिर्फ़ पहली 400
एंट्री दिखेंगी. सबसे तेज़ मोड dataMode='regions' हैं, जिनमें आईएसओ कोड के हिसाब से जगह की जानकारी दी गई है. साथ ही, dataMode='markers' में अक्षांश/देशांतर की जानकारी दी गई है. स्ट्रिंग पते के साथ सबसे धीमा मोड dataMode='markers' है.
अहम जानकारी: आपके DataTable में उस कॉलम के पहले हर वैकल्पिक
कॉलम को शामिल करना ज़रूरी है जिसे आपको इस्तेमाल करना है. उदाहरण के लिए, अगर आपको
अक्षांश/देशांतर वाली टेबल के बारे में बताना है और सिर्फ़ कॉलम 1, 2, और 4 का इस्तेमाल करना है, तो आपके DataTable को
अब भी कॉलम 3 तय करना होगा. हालांकि, आपको इसमें कोई वैल्यू जोड़ने की ज़रूरत नहीं है:
dataTable = new google.visualization.DataTable();
dataTable.addRows(1);
dataTable.addColumn('number', 'LATITUDE', 'Latitude');
dataTable.addColumn('number', 'LONGITUDE', 'Longitude');
dataTable.addColumn('number', 'VALUE', 'Value'); // Won't use this column, but still must define it.
dataTable.addColumn('string', 'HOVER', 'HoverText');
dataTable.setValue(0,0,47.00);
dataTable.setValue(0,1,-122.00);
dataTable.setValue(0,3,"Hello World!");
कॉन्फ़िगरेशन के विकल्प
| नाम | टाइप | डिफ़ॉल्ट | ब्यौरा |
|---|---|---|---|
region |
स्ट्रिंग | 'दुनिया' | मैप पर दिखने वाला इलाका. (आस-पास के इलाके भी दिखाए जाएंगे.) यह किसी देश का कोड (अंग्रेज़ी के बड़े अक्षरों ISO-3166 फ़ॉर्मैट में) हो सकता है. इसके अलावा, यह इनमें से कोई एक स्ट्रिंग भी हो सकती है:
जियोमैप में स्क्रोल करने या खींचने और छोड़ने की सुविधा नहीं है. यह सिर्फ़ ज़ूम करने की सुविधा को सीमित करता है. |
dataMode |
स्ट्रिंग | 'क्षेत्र' | मैप पर वैल्यू दिखाने का तरीका. इन दो वैल्यू का इस्तेमाल किया जा सकता है:
|
width |
स्ट्रिंग | '556 पिक्सल' | विज़ुअलाइज़ेशन की चौड़ाई. अगर कोई इकाई नहीं दी जाती है, तो डिफ़ॉल्ट इकाई पिक्सल होती है. |
height |
स्ट्रिंग | '347 पिक्सल' | विज़ुअलाइज़ेशन की ऊंचाई. अगर कोई इकाई नहीं दी जाती है, तो डिफ़ॉल्ट इकाई पिक्सल होती है. |
colors |
0xRRGGBB फ़ॉर्मैट में आरजीबी नंबर का कलेक्शन | [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114] | विज़ुअलाइज़ेशन में वैल्यू को असाइन करने के लिए रंग ग्रेडिएंट. आपके पास कम से कम दो वैल्यू होनी चाहिए. ग्रेडिएंट में आपकी सभी वैल्यू और कैलकुलेट की गई इंटरमीडियरी वैल्यू शामिल होंगी. इनमें सबसे कम वैल्यू के लिए सबसे हल्के रंग और सबसे ज़्यादा गहरे रंग को सबसे ज़्यादा वैल्यू के तौर पर शामिल किया जाएगा. |
showLegend |
boolean | सही | अगर सही है, तो मैप के लिए लेजेंड दिखाएं. |
showZoomOut |
boolean | false | अगर सही है, तो zoomOutLabel प्रॉपर्टी से तय किए गए लेबल
वाला बटन दिखाएं. ध्यान दें कि
यह बटन क्लिक करने पर कुछ नहीं करता है, यह सिर्फ़ zoomOut इवेंट को ट्रिगर करने के अलावा और कुछ नहीं करता है.
ज़ूम करना हैंडल करने के लिए, इस इवेंट को कैच करें और region विकल्प बदलें.
showZoomOut तब ही तय किया जा सकता है, जब
region विकल्प
वर्ल्ड व्यू से छोटा हो. ज़ूम इन करने की सुविधा को चालू करने का एक तरीका यह है कि आप regionClick इवेंट सुनें, region प्रॉपर्टी को सही जगह में बदलें, और मैप को फिर से लोड करें. |
zoomOutLabel |
स्ट्रिंग | 'ज़ूम आउट करें' | 'ज़ूम करें' बटन का लेबल. |
तरीके
| तरीका | रिटर्न टाइप | ब्यौरा |
|---|---|---|
draw(data, options) |
कोई नहीं | मैप बनाता है. ड्रॉइंग पूरी होने से पहले वापस आ सकते हैं (drawingDone() इवेंट देखें). |
getSelection() |
चुने गए एलिमेंट की कलेक्शन | स्टैंडर्ड getSelection() लागू करना. चुने गए एलिमेंट
लाइनें हैं. यह तरीका सिर्फ़ तब काम करता है, जब dataMode विकल्प 'क्षेत्र' हो. सिर्फ़ उस क्षेत्र को चुना जा सकता है जिसके लिए वैल्यू असाइन की गई है. |
setSelection(selection) |
कोई नहीं | स्टैंडर्ड setSelection() लागू करना. चुनी गई किसी भी पंक्ति को
पंक्ति चुनी जा सकती है. साथ ही, एक से ज़्यादा पंक्ति चुनी जा सकती है. सिर्फ़ उन इलाकों को चुना जा सकता है
जहां वैल्यू असाइन की गई हैं. |
इवेंट
| नाम | ब्यौरा | प्रॉपर्टी |
|---|---|---|
error |
यह तब ट्रिगर होता है, जब चार्ट को रेंडर करते समय कोई गड़बड़ी होती है. | आईडी, मैसेज |
select |
यह तब ट्रिगर होता है, जब उपयोगकर्ता असाइन की गई वैल्यू वाले क्षेत्र पर क्लिक करता है. चुना गया विकल्प जानने के लिए, ध्यान दें: कुछ सीमाओं की वजह से, अगर ब्राउज़र में पेज को फ़ाइल के तौर पर ऐक्सेस किया जा रहा है, तो |
कोई नहीं |
regionClick |
किसी क्षेत्र पर क्लिक किए जाने पर कॉल किया जाता है. यह 'क्षेत्र' और 'मार्कर' ध्यान दें: कुछ सीमाओं की वजह से, अगर ब्राउज़र में पेज को फ़ाइल के तौर पर ऐक्सेस किया जा रहा है, तो |
एक प्रॉपर्टी वाला ऑब्जेक्ट region, जो ISO-3166 फ़ॉर्मैट में एक स्ट्रिंग होती है.
जो क्लिक किए गए क्षेत्र की जानकारी देती है. |
zoomOut |
ज़ूम आउट बटन क्लिक करने पर कॉल किया जाता है. ज़ूम करने की प्रोसेस को मैनेज करने के लिए, इस इवेंट को देखें और ध्यान दें: कुछ सीमाओं की वजह से, अगर ब्राउज़र में पेज को फ़ाइल के तौर पर ऐक्सेस किया जा रहा है, तो |
कोई नहीं |
drawingDone |
जियोमैप के ड्रॉइंग पूरी होने के बाद कॉल किया जाता है. | कोई नहीं |
डेटा नीति
जगहों को Google Maps से जियोकोड किया जाता है. जिस डेटा के लिए जियोकोडिंग की ज़रूरत नहीं होती उसे किसी भी सर्वर पर नहीं भेजा जाता. इनकी डेटा नीति के बारे में ज़्यादा जानने के लिए, Google Maps की सेवा की शर्तें देखें.
ज़रूरी जानकारी
फ़्लैश सुरक्षा सेटिंग की वजह से, यह (और सभी फ़्लैश-आधारित विज़ुअलाइज़ेशन) किसी वेब सर्वर यूआरएल (जैसे, http://www.myhost.com/myviz.html) के बजाय, ब्राउज़र में किसी फ़ाइल स्थान से (जैसे, file:///c:/webhost/myhost/myviz.html) ऐक्सेस करने पर ठीक से काम नहीं कर सकते हैं. आम तौर पर, यह समस्या सिर्फ़ जांच के दौरान आती है. इस समस्या को हल करने के लिए, Macromedia वेबसाइट पर बताया गया तरीका अपनाएं.