इस पेज का अनुवाद Cloud Translation API से किया गया है.

विज़ुअलाइज़ेशन: मैप

खास जानकारी
जगहों के नाम
जियोकोड की गई जगहें
मार्कर को पसंद के मुताबिक बनाना
कई जगहों के मार्कर सेट जोड़ना
मैपिंग को स्टाइल करना
लोड हो रहा है
डेटा फ़ॉर्मैट
कॉन्फ़िगरेशन के विकल्प
तरीके
इवेंट
डेटा नीति

खास जानकारी

Google Maps चार्ट, Google Maps API का इस्तेमाल करके मैप दिखाता है. डेटा की वैल्यू, मैप पर मार्कर के तौर पर दिखती हैं. डेटा की वैल्यू को कोऑर्डिनेट या लैग-लॉन्ग पेयर या पते के तौर पर दिया जा सकता है. मैप को स्केल कर दिया जाएगा, ताकि उसमें सभी पहचाने गए बिंदु शामिल हो जाएं.

अगर आप अपने मैप में उपग्रह से ली गई तस्वीरों के बजाय लाइन ड्रॉइंग बनाना चाहते हैं, तो जियोचार्ट का इस्तेमाल करें.

जगहों के नाम

मार्कर के नाम के हिसाब से उन जगहों की पहचान की जा सकती है, जिन्हें जनसंख्या के हिसाब से टॉप 10 देशों के मैप में दिखाया गया है.

जब उपयोगकर्ता इनमें से किसी मार्कर को चुनता है, तो देश के नाम और जनसंख्या के साथ एक टूलटिप दिखेगी, क्योंकि हमने showInfoWindow विकल्प का इस्तेमाल किया था. साथ ही, जब उपयोगकर्ता कुछ समय के लिए किसी एक मार्कर पर माउस घुमाता है, तो उसे ‘जानकारी’ वाली सलाह दिखेगी. यह जानकारी उसी जानकारी के साथ दिखेगी, क्योंकि हमने showTooltip विकल्प का इस्तेमाल किया है. यहां पूरा एचटीएमएल दिया गया है:

<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load('current', {
    'packages': ['map'],
    // 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', 'Population'],
        ['China', 'China: 1,363,800,000'],
        ['India', 'India: 1,242,620,000'],
        ['US', 'US: 317,842,000'],
        ['Indonesia', 'Indonesia: 247,424,598'],
        ['Brazil', 'Brazil: 201,032,714'],
        ['Pakistan', 'Pakistan: 186,134,000'],
        ['Nigeria', 'Nigeria: 173,615,000'],
        ['Bangladesh', 'Bangladesh: 152,518,015'],
        ['Russia', 'Russia: 146,019,512'],
        ['Japan', 'Japan: 127,120,000']
      ]);

    var options = {
      showTooltip: true,
      showInfoWindow: true
    };

    var map = new google.visualization.Map(document.getElementById('chart_div'));

    map.draw(data, options);
  };
  </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

जियोकोड किए गए स्थान

अक्षांश और देशांतर की मदद से भी जगहों की जानकारी दी जा सकती है, और यह नाम वाले स्थानों की तुलना में ज़्यादा तेज़ी से लोड होता है:

ऊपर दिया गया चार्ट अक्षांश और देशांतर के मुताबिक चार जगहों की जानकारी देता है.

डेटा

  var data = google.visualization.arrayToDataTable([
    ['Lat', 'Long', 'Name'],
    [37.4232, -122.0853, 'Work'],
    [37.4289, -122.1697, 'University'],
    [37.6153, -122.3900, 'Airport'],
    [37.4422, -122.1731, 'Shopping']
  ]);

पूरा एचटीएमएल

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {
        "packages":["map"],
        // 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(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Lat', 'Long', 'Name'],
          [37.4232, -122.0853, 'Work'],
          [37.4289, -122.1697, 'University'],
          [37.6153, -122.3900, 'Airport'],
          [37.4422, -122.1731, 'Shopping']
        ]);

        var map = new google.visualization.Map(document.getElementById('map_div'));
        map.draw(data, {
          showTooltip: true,
          showInfoWindow: true
        });
      }

    </script>
  </head>

  <body>
    <div id="map_div" style="width: 400px; height: 300px"></div>
  </body>
</html>

मार्कर को पसंद के मुताबिक बनाना

आपके पास वेब पर कहीं भी मौजूद मार्कर आकार का इस्तेमाल करने का विकल्प होता है. यहां 'संग्रहित करें' आइकॉन से जुड़े नीले रंग के पिन का इस्तेमाल करने का एक उदाहरण दिया गया है:

अगर ऊपर दिए गए चार्ट में पिन चुने गए हैं, तो वे तिरछे हैं. PNG, GIF, और JPG इस्तेमाल किए जा सकते हैं.

डेटा

  var options = {
    icons: {
      default: {
        normal: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
        selected: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
      }
    }
  };

पूरा एचटीएमएल

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {
        "packages":["map"],
        // 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(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Lat', 'Long', 'Name'],
          [37.4232, -122.0853, 'Work'],
          [37.4289, -122.1697, 'University'],
          [37.6153, -122.3900, 'Airport'],
          [37.4422, -122.1731, 'Shopping']
        ]);

        var options = {
          icons: {
            default: {
              normal: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
              selected: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
            }
          }
        };

        var map = new google.visualization.Map(document.getElementById('map_markers_div'));
        map.draw(data, options);
      }

    </script>
  </head>

  <body>
    <div id="map_markers_div" style="width: 400px; height: 300px"></div>
  </body>
</html>

एक से ज़्यादा मार्कर सेट जोड़ना

मार्कर का डिफ़ॉल्ट सेट बनाने के अलावा, आप मार्कर के एक से ज़्यादा सेट भी बना सकते हैं.

एक और मार्कर सेट बनाने के लिए, icons विकल्प में एक आईडी जोड़ें और अपनी मार्कर इमेज सेट करें. इसके बाद, अपनी डेटा टेबल में कॉलम जोड़ें और डेटा सेट की हर लाइन के लिए जिस मार्कर सेट का इस्तेमाल करना है उसका आईडी सेट करें. डिफ़ॉल्ट मार्कर का इस्तेमाल करने के लिए, 'default' या null का इस्तेमाल भी किया जा सकता है.

google.charts.load('current', {
      'packages': ['map'],
      // 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 = new google.visualization.DataTable();
      data.addColumn('string', 'Address');
      data.addColumn('string', 'Location');
      data.addColumn('string', 'Marker')

data.addRows([
        ['New York City NY, United States', 'New York',   'blue' ],
        ['Scranton PA, United States',      'Scranton',   'green'],
        ['Washington DC, United States',    'Washington', 'pink' ],
        ['Philadelphia PA, United States',  'Philly',     'green'],
        ['Pittsburgh PA, United States',    'Pittsburgh', 'green'],
        ['Buffalo NY, United States',       'Buffalo',    'blue' ],
        ['Baltimore MD, United States',     'Baltimore',  'pink' ],
        ['Albany NY, United States',        'Albany',     'blue' ],
        ['Allentown PA, United States',     'Allentown',  'green']
      ]);
      var url = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';

var options = {
        zoomLevel: 6,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        icons: {
          blue: {
            normal:   url + 'Map-Marker-Ball-Azure-icon.png',
            selected: url + 'Map-Marker-Ball-Right-Azure-icon.png'
          },
          green: {
            normal:   url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png',
            selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'
          },
          pink: {
            normal:   url + 'Map-Marker-Ball-Pink-icon.png',
            selected: url + 'Map-Marker-Ball-Right-Pink-icon.png'
          }
        }
      };
      var map = new google.visualization.Map(document.getElementById('map_div'));

map.draw(data, options);
    }

विकल्प

      var url = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';

      var options = {
        zoomLevel: 6,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        icons: {
          blue: {
            normal:   url + 'Map-Marker-Ball-Azure-icon.png',
            selected: url + 'Map-Marker-Ball-Right-Azure-icon.png'
          },
          green: {
            normal:   url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png',
            selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'
          },
          pink: {
            normal:   url + 'Map-Marker-Ball-Pink-icon.png',
            selected: url + 'Map-Marker-Ball-Right-Pink-icon.png'
          }
        }
      };

पूरा एचटीएमएल

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {
      'packages': ['map'],
      // 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 = new google.visualization.DataTable();
      data.addColumn('string', 'Address');
      data.addColumn('string', 'Location');
      data.addColumn('string', 'Marker')

      data.addRows([
        ['New York City NY, United States', 'New York',   'blue' ],
        ['Scranton PA, United States',      'Scranton',   'green'],
        ['Washington DC, United States',    'Washington', 'pink' ],
        ['Philadelphia PA, United States',  'Philly',     'green'],
        ['Pittsburgh PA, United States',    'Pittsburgh', 'green'],
        ['Buffalo NY, United States',       'Buffalo',    'blue' ],
        ['Baltimore MD, United States',     'Baltimore',  'pink' ],
        ['Albany NY, United States',        'Albany',     'blue' ],
        ['Allentown PA, United States',     'Allentown',  'green']
      ]);
      var url = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';

      var options = {
        zoomLevel: 6,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        icons: {
          blue: {
            normal:   url + 'Map-Marker-Ball-Azure-icon.png',
            selected: url + 'Map-Marker-Ball-Right-Azure-icon.png'
          },
          green: {
            normal:   url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png',
            selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'
          },
          pink: {
            normal:   url + 'Map-Marker-Ball-Pink-icon.png',
            selected: url + 'Map-Marker-Ball-Right-Pink-icon.png'
          }
        }
      };
      var map = new google.visualization.Map(document.getElementById('map_div'));

      map.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="map_div" style="height: 500px; width: 900px"></div>
</body>
</html>

Maps का इस्तेमाल करना

मैप विज़ुअलाइज़ेशन में पसंद के मुताबिक स्टाइल सेट करने की सुविधा दी गई है, जिससे आप पसंद के मुताबिक एक या कई तरह के मैप बना सकते हैं.

आपके पास मैप स्टाइल ऑब्जेक्ट बनाने और इसे मैप के विकल्प में इसके आइडेंटिफ़ायर (mapTypeId) के तहत रखकर, मैप टाइप को तय करने का विकल्प होता है. उदाहरण के लिए :

  var options = {
    maps: {
      <map style ID>: <map style object>
    }
  };

आप बाद में, आपको जो मैप स्टाइल आईडी असाइन किया गया है उसके हिसाब से इस कस्टम मैप को देखा जा सकता है.

आपके मैप स्टाइल ऑब्जेक्ट में एक name होता है, जो मैप टाइप कंट्रोल में डिसप्ले नाम होगा (इसका mapTypeId से मेल खाना ज़रूरी नहीं है), और एक styles कलेक्शन होता है, जिसमें हर उस एलिमेंट के लिए स्टाइल ऑब्जेक्ट होंगे जिसे आप स्टाइल करना चाहते हैं. Google Maps API के रेफ़रंस में, अलग-अलग एलिमेंट, सुविधा, और स्टाइल के टाइप की सूची दी गई होती है. इनकी मदद से, पसंद के मुताबिक मैप का टाइप बनाया जा सकता है.

ध्यान दें: आपका कस्टम mapTypeId, maps विकल्प में होना चाहिए.

function drawMap () {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Address');
      data.addColumn('string', 'Location');

data.addRows([
        ['Lake Buena Vista, FL 32830, United States',                  'Walt Disney World'],
        ['6000 Universal Boulevard, Orlando, FL 32819, United States', 'Universal Studios'],
        ['7007 Sea World Drive, Orlando, FL 32821, United States',     'Seaworld Orlando' ]
      ]);

var options = {
        mapType: 'styledMap',
        zoomLevel: 12,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        maps: {
          // Your custom mapTypeId holding custom map styles.
          styledMap: {
            name: 'Styled Map', // This name will be displayed in the map type control.
            styles: [
              {featureType: 'poi.attraction',
               stylers: [{color: '#fce8b2'}]
              },
              {featureType: 'road.highway',
               stylers: [{hue: '#0277bd'}, {saturation: -50}]
              },
              {featureType: 'road.highway',
               elementType: 'labels.icon',
               stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]
              },
              {featureType: 'landscape',
               stylers: [{hue: '#259b24'}, {saturation: 10}, {lightness: -22}]
              }
        ]}}
      };

var map = new google.visualization.Map(document.getElementById('map_div'));

map.draw(data, options);
    }

विकल्प

      var options = {
        mapType: 'styledMap',
        zoomLevel: 12,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        maps: {
          // Your custom mapTypeId holding custom map styles.
          styledMap: {
            name: 'Styled Map', // This name will be displayed in the map type control.
            styles: [
              {featureType: 'poi.attraction',
               stylers: [{color: '#fce8b2'}]
              },
              {featureType: 'road.highway',
               stylers: [{hue: '#0277bd'}, {saturation: -50}]
              },
              {featureType: 'road.highway',
               elementType: 'labels.icon',
               stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]
              },
              {featureType: 'landscape',
               stylers: [{hue: '#259b24'}, {saturation: 10}, {lightness: -22}]
              }
        ]}}
      };

पूरा एचटीएमएल

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {
      'packages': ['map'],
      // 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 = new google.visualization.DataTable();
      data.addColumn('string', 'Address');
      data.addColumn('string', 'Location');

      data.addRows([
        ['Lake Buena Vista, FL 32830, United States',                  'Walt Disney World'],
        ['6000 Universal Boulevard, Orlando, FL 32819, United States', 'Universal Studios'],
        ['7007 Sea World Drive, Orlando, FL 32821, United States',     'Seaworld Orlando' ]
      ]);

      var options = {
        mapType: 'styledMap',
        zoomLevel: 12,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        maps: {
          // Your custom mapTypeId holding custom map styles.
          styledMap: {
            name: 'Styled Map', // This name will be displayed in the map type control.
            styles: [
              {featureType: 'poi.attraction',
               stylers: [{color: '#fce8b2'}]
              },
              {featureType: 'road.highway',
               stylers: [{hue: '#0277bd'}, {saturation: -50}]
              },
              {featureType: 'road.highway',
               elementType: 'labels.icon',
               stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]
              },
              {featureType: 'landscape',
               stylers: [{hue: '#259b24'}, {saturation: 10}, {lightness: -22}]
              }
        ]}}
      };

      var map = new google.visualization.Map(document.getElementById('map_div'));

      map.draw(data, options);
    }
  </script>
</head>
<body>
<div id="map_div" style="height: 500px; width: 900px"></div>
</body>
</html>

पसंद के मुताबिक मैप के टाइप बनाने के अलावा, mapTypeIds विकल्प के साथ यह भी तय किया जा सकता है कि उपयोगकर्ता कौनसा मैप टाइप देख सकते हैं. डिफ़ॉल्ट रूप से, सभी तरह के मैप, मैप टाइप कंट्रोल में दिखेंगे. इनमें पसंद के मुताबिक बनाए गए मैप के टाइप भी शामिल होंगे. mapTypeIds विकल्प, मैप के उन टाइप की स्ट्रिंग को स्वीकार करता है जिन्हें उपयोगकर्ता को दिखाना है. इन स्ट्रिंग को, डिफ़ॉल्ट मैप स्टाइल (उदाहरण के लिए, सामान्य, उपग्रह, इलाका, हाइब्रिड) या पहले से तय किए गए कस्टम मैप टाइप का मैप स्टाइल आईडी देना चाहिए. mapTypeIds विकल्प सेट करने पर, आपका मैप सिर्फ़ उन मैप टाइप को उपलब्ध कराएगा जिन्हें आपने इस कैटगरी में तय किया है.

मैप स्टाइल को डिफ़ॉल्ट के तौर पर सेट करने के लिए, mapType विकल्प के साथ इसका इस्तेमाल करें. हालांकि, इसे mapTypeIds कैटगरी में शामिल न करें. ऐसा करने से, यह मैप सिर्फ़ शुरुआती लोड पर दिखेगा.

function drawMap () {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Address');
      data.addColumn('string', 'Location');

data.addRows([
        ['Yellowstone National Park, Wyoming, United States', 'YellowStone']
      ]);
      var options = {
        mapType: 'styledMap',
        zoomLevel: 7,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        // User will only be able to view/select custom styled maps.
        mapTypeIds: ['styledMap', 'redEverything', 'imBlue'],
        maps: {
          styledMap: {
            name: 'Styled Map',
            styles: [
              {featureType: 'poi.attraction',
               stylers: [{color: '#fce8b2'}]},
              {featureType: 'road.highway',
               stylers: [{hue: '#0277bd'}, {saturation: -50}]},
              {featureType: 'road.highway', elementType: 'labels.icon',
               stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]},
              {featureType: 'landscape',
               stylers: [{hue: '#259b24'}, {saturation: 10},{lightness: -22}]}
          ]},
          redEverything: {
            name: 'Redden All The Things',
            styles: [
              {featureType: 'landscape',
               stylers: [{color: '#fde0dd'}]},
              {featureType: 'road.highway',
               stylers: [{color: '#67000d'}]},
              {featureType: 'road.highway', elementType: 'labels',
               stylers: [{visibility: 'off'}]},
              {featureType: 'poi',
               stylers: [{hue: '#ff0000'}, {saturation: 50}, {lightness: 0}]},
              {featureType: 'water',
               stylers: [{color: '#67000d'}]},
              {featureType: 'transit.station.airport',
               stylers: [{color: '#ff0000'}, {saturation: 50}, {lightness: -50}]}
          ]},
          imBlue: {
            name: 'All Your Blues are Belong to Us',
            styles: [
              {featureType: 'landscape',
               stylers: [{color: '#c5cae9'}]},
              {featureType: 'road.highway',
               stylers: [{color: '#023858'}]},
              {featureType: 'road.highway', elementType: 'labels',
               stylers: [{visibility: 'off'}]},
              {featureType: 'poi',
               stylers: [{hue: '#0000ff'}, {saturation: 50}, {lightness: 0}]},
              {featureType: 'water',
               stylers: [{color: '#0288d1'}]},
              {featureType: 'transit.station.airport',
               stylers: [{color: '#0000ff'}, {saturation: 50}, {lightness: -50}]}
          ]}
        }
      };
      var map = new google.visualization.Map(document.getElementById('map_div'));

map.draw(data, options);
    }

      var options = {
        mapType: 'styledMap',
        zoomLevel: 7,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        // User will only be able to view/select custom styled maps.
        mapTypeIds: ['styledMap', 'redEverything', 'imBlue'],
        maps: {
          styledMap: {
            name: 'Styled Map',
            styles: [
              {featureType: 'poi.attraction',
               stylers: [{color: '#fce8b2'}]},
              {featureType: 'road.highway',
               stylers: [{hue: '#0277bd'}, {saturation: -50}]},
              {featureType: 'road.highway', elementType: 'labels.icon',
               stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]},
              {featureType: 'landscape',
               stylers: [{hue: '#259b24'}, {saturation: 10},{lightness: -22}]}
          ]},
          redEverything: {
            name: 'Redden All The Things',
            styles: [
              {featureType: 'landscape',
               stylers: [{color: '#fde0dd'}]},
              {featureType: 'road.highway',
               stylers: [{color: '#67000d'}]},
              {featureType: 'road.highway', elementType: 'labels',
               stylers: [{visibility: 'off'}]},
              {featureType: 'poi',
               stylers: [{hue: '#ff0000'}, {saturation: 50}, {lightness: 0}]},
              {featureType: 'water',
               stylers: [{color: '#67000d'}]},
              {featureType: 'transit.station.airport',
               stylers: [{color: '#ff0000'}, {saturation: 50}, {lightness: -50}]}
          ]},
          imBlue: {
            name: 'All Your Blues are Belong to Us',
            styles: [
              {featureType: 'landscape',
               stylers: [{color: '#c5cae9'}]},
              {featureType: 'road.highway',
               stylers: [{color: '#023858'}]},
              {featureType: 'road.highway', elementType: 'labels',
               stylers: [{visibility: 'off'}]},
              {featureType: 'poi',
               stylers: [{hue: '#0000ff'}, {saturation: 50}, {lightness: 0}]},
              {featureType: 'water',
               stylers: [{color: '#0288d1'}]},
              {featureType: 'transit.station.airport',
               stylers: [{color: '#0000ff'}, {saturation: 50}, {lightness: -50}]}
          ]}
        }
      };

लोड हो रहा है

google.charts.load पैकेज का नाम "map" है.

ध्यान दें कि आपको अपने प्रोजेक्ट के लिए खुद का mapsApiKey लेना होगा, न कि सिर्फ़ उदाहरण के तौर पर इस्तेमाल किए गए प्रोजेक्ट की कॉपी बनाना है, ताकि आपके उपयोगकर्ताओं के लिए मैप डेटा सेवा में कोई बदलाव न हो. ज़्यादा जानकारी के लिए, सेटिंग लोड करना देखें.

      google.charts.load("current", {
        "packages":["map"],
        // 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.visualization.Map है. छोटा नाम, Map, JavaScript के टकराव, Map क्लास, जब आप chartType: 'Map' बताते हैं, तो ChartWrapper इस पैकेज को अपने-आप लोड नहीं करता है. हालांकि, इसकी जगह chartType: 'google.visualization.Map' का इस्तेमाल किया जा सकता है.

  var visualization = new google.visualization.Map(container);

डेटा फ़ॉर्मैट

डेटा के दो वैकल्पिक फ़ॉर्मैट काम करते हैं:

लैट-लॉन्ग पेयर - पहले दो कॉलम में अक्षांश और देशांतर की जानकारी देने वाला नंबर होना चाहिए. विकल्प के तौर पर, तीसरे कॉलम में ऐसी स्ट्रिंग होती है जिसमें शुरुआती दो कॉलम में बताई गई जगह की जानकारी दी जाती है.
स्ट्रिंग पता - पहला कॉलम वह स्ट्रिंग होनी चाहिए जिसमें कोई पता हो. यह पता उतना ही पूरा होना चाहिए जितना आप बना सकते हैं. दूसरे कॉलम में एक स्ट्रिंग होती है जो पहले कॉलम में जगह को बताती है. स्ट्रिंग के पते धीरे-धीरे लोड होते हैं. खास तौर पर तब, जब आपके पास 10 से ज़्यादा पते हों.

ध्यान दें: 'लैट-लॉन्ग पेयर' विकल्प ज़्यादा तेज़ी से मैप लोड करता है. ऐसा खास तौर पर बड़े डेटा के साथ होता है. हमारा सुझाव है कि आप बड़े डेटा सेट के लिए इस विकल्प का इस्तेमाल करें. अपने पतों को अक्षांश-देशांतर में बदलने का तरीका जानने के लिए, कृपया Google Maps API पर जाएं. मैप ज़्यादा से ज़्यादा 400 एंट्री दिखा सकता है; अगर आपके डेटा में 400 से ज़्यादा लाइनें हैं, तो सिर्फ़ शुरू की 400 लाइनें दिखाई जाएंगी.

कॉन्फ़िगरेशन के विकल्प

नाम
स्क्रोलव्हील चालू करें	अगर नीति को 'सही है' पर सेट किया जाता है, तो माउस स्क्रोल व्हील का इस्तेमाल करके ज़ूम इन और ज़ूम आउट किया जा सकता है. टाइप: बूलियन डिफ़ॉल्ट: गलत
आइकॉन	कस्टम मार्कर के सेट को होल्ड करता है. हर मार्कर सेट में एक `normal` और `selected` मार्कर इमेज मौजूद हो सकती है. `default` के विकल्प को सेट करके, डिफ़ॉल्ट सेट सेट किया जा सकता है. इसके अलावा, यूनीक मार्कर आईडी को सेट करके, कस्टम मार्कर सेट को सेट किया जा सकता है. var options = { icons: { default: { normal: '/path/to/marker/image', selected: '/path/to/marker/image' }, customMarker: { normal: '/path/to/other/marker/image', selected: '/path/to/other/marker/image' } } }; टाइप: ऑब्जेक्ट डिफ़ॉल्ट: शून्य
Line का रंग	अगर showLine सही है, तो लाइन का रंग बताता है. उदाहरण के लिए: '#800000'. टाइप: स्ट्रिंग डिफ़ॉल्ट: डिफ़ॉल्ट रंग
LineWidth	अगर ShowLine सही है, तो लाइन की चौड़ाई (पिक्सल में) के बारे में बताता है. टाइप: नंबर डिफ़ॉल्ट: 10
मैप<mapTypeId>	ऐसा ऑब्जेक्ट जिसमें कस्टम मैप टाइप की प्रॉपर्टी मौजूद हों. पसंद के मुताबिक बनाए गए मैप के प्रकार के लिए, `mapTypeId` बताए गए तरीके से इस तरह के मैप को ऐक्सेस किया जाएगा. बनाए गए हर कस्टम टाइप के लिए एक नया `mapTypeId` दिया जाना चाहिए. हर तरह के कस्टम मैप में दो प्रॉपर्टी होनी चाहिए: नाम: स्टाइल किए गए मैप के प्रकार के लिए डिसप्ले नाम शैलियां: स्टाइल वाले मैप प्रकार के लिए स्टाइल ऑब्जेक्ट वाली श्रेणी टाइप: ऑब्जेक्ट डिफ़ॉल्ट: शून्य
मैप.<mapTypeId>.name	अगर `useMapTypeControl` को `true` पर सेट किया जाता है, तो मैप के कंट्रोल में दिखने वाले मैप का नाम. टाइप: स्ट्रिंग डिफ़ॉल्ट: शून्य
मैप.<mapTypeId>.styles	इसमें कस्टम मैप टाइप के अलग-अलग एलिमेंट के लिए स्टाइल ऑब्जेक्ट होते हैं. हर स्टाइल ऑब्जेक्ट में एक से तीन प्रॉपर्टी हो सकती हैं: `featureType`, `elementType`, और `stylers`. अगर `featureType` और `elementType` को शामिल नहीं किया जाता है, तो स्टाइल सभी मैप की सुविधाओं/एलिमेंट पर लागू हो जाएंगे. { featureType: 'roadway.highway', elementType: 'labels.text.fill', stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}] } अलग-अलग सुविधाओं, एलिमेंट, और स्टाइलर के बारे में ज़्यादा जानकारी के लिए, Maps का दस्तावेज़ देखें. टाइप: श्रेणी डिफ़ॉल्ट: शून्य
मैप का प्रकार	मैप का टाइप. संभावित वैल्यू 'सामान्य', 'टेरेन', 'सैटेलाइट', 'हाइब्रिड' या कस्टम मैप टाइप का आईडी होता है. टाइप: स्ट्रिंग डिफ़ॉल्ट: 'हाइब्रिड'
मैप टाइप आईडी	अगर मैप टाइप कंट्रोल (`useMapTypeControl: true`) का इस्तेमाल किया जा रहा है, तो इस कैटगरी में बताए गए आईडी ही मैप टाइप कंट्रोल में दिखेंगे. अगर यह विकल्प सेट नहीं है, तो मैप किस तरह का है, यह कंट्रोल डिफ़ॉल्ट तौर पर Google Maps पर मैप टाइप के विकल्प के लिए दिखेगा. साथ ही, यह विकल्प डिफ़ॉल्ट रूप से उपलब्ध होंगे. टाइप: श्रेणी डिफ़ॉल्ट: शून्य
इंफ़ोविंडो दिखाएं	अगर नीति को 'सही है' पर सेट किया जाता है, तो उपयोगकर्ता के चुने गए पॉइंट मार्कर को चुनने पर, जगह की जानकारी एक अलग विंडो में दिखती है. यह विकल्प, पहले से ही 45 वर्शन तक `showTip` कहा जाता था. `showTooltip` भी देखें टाइप: बूलियन डिफ़ॉल्ट: गलत
ShowLine	अगर इस नीति को 'सही है' पर सेट किया जाता है, तो सभी पॉइंट से Google Maps की पॉलीलाइन दिखती है. टाइप: बूलियन डिफ़ॉल्ट: गलत
टूलटिप दिखाएं	अगर इसे सेट किया जाता है, तो माउस को पॉइंट मार्कर के ऊपर रखने पर, जगह की जानकारी को टूलटिप के तौर पर दिखाता है. यह विकल्प, पहले से ही 45 वर्शन तक `showTip` कहा जाता था. ध्यान दें कि फ़िलहाल एचटीएमएल वर्शन काम नहीं करता, इसलिए टूलटिप में रॉ एचटीएमएल टैग दिखेंगे. टाइप: बूलियन डिफ़ॉल्ट: गलत
MapTypeTypeControl का उपयोग करें	मैप किस तरह का है, यह दिखाने वाला टूल चुनें. इससे, दर्शक [मैप, उपग्रह, हाइब्रिड, इलाके] में से किसी एक को चुन सकता है. जब MapMapTypeControl को गलत (डिफ़ॉल्ट) पर सेट किया जाता है, तो कोई सिलेक्टर नहीं दिखता और मैप टाइप के विकल्प से यह पता चलता है कि टाइप चुना गया है या नहीं. टाइप: बूलियन डिफ़ॉल्ट: गलत
ZoomLevel	मैप के शुरुआती ज़ूम लेवल को दिखाने वाला इंटेजर, जहां 0 पूरी तरह से ज़ूम आउट किया गया है (पूरी दुनिया) और 19 ज़ूम का ज़्यादा से ज़्यादा लेवल है. (Google Maps API में "ज़ूम लेवल" देखें.) टाइप: नंबर डिफ़ॉल्ट: अपने-आप

तरीके

तरीका
`draw(data, options)`	मैप बनाता है. सामान लौटाने का टाइप: कोई नहीं
`getSelection()`	स्टैंडर्ड `getSelection()` को लागू करना. चुने गए एलिमेंट, पंक्ति वाले सभी एलिमेंट हैं. चुनी गई एक से ज़्यादा पंक्तियां दिख सकती हैं. लौटाए गए आइटम का टाइप: चुने गए एलिमेंट की कैटगरी
`setSelection(selection)`	स्टैंडर्ड `setSelection()` को लागू करना. हर एंट्री को पंक्ति चुनने के तौर पर देखता है. एक से ज़्यादा पंक्तियां चुनी जा सकती हैं. सामान लौटाने का टाइप: कोई नहीं

इवेंट

नाम
`error`	जब चार्ट को रेंडर करते समय कोई गड़बड़ी होती है, तब सक्रिय किया जाता है. प्रॉपर्टी: आईडी, मैसेज
`select`	स्टैंडर्ड सेलेक्ट इवेंट प्रॉपर्टी: कोई नहीं

डेटा नीति

मैप को Google Maps दिखाता है. डेटा नीति के बारे में ज़्यादा जानने के लिए Google Maps की सेवा की शर्तें देखें.