ভিজ্যুয়ালাইজেশন: মানচিত্র

  1. ওভারভিউ
  2. নামকৃত অবস্থানসমূহ
  3. জিওকোডেড অবস্থান
  4. মার্কার কাস্টমাইজ করা
  5. একাধিক মার্কার সেট যোগ করা হচ্ছে
  6. স্টাইলিং মানচিত্র
  7. লোড হচ্ছে
  8. উপাত্ত বিন্যাস
  9. কনফিগারেশন অপশন
  10. পদ্ধতি
  11. ঘটনা
  12. ডেটা নীতি

ওভারভিউ

Google Maps চার্ট Google Maps API ব্যবহার করে একটি মানচিত্র প্রদর্শন করে। ডেটা মান মানচিত্রে চিহ্নিতকারী হিসাবে প্রদর্শিত হয়। ডেটা মানগুলি স্থানাঙ্ক (ল্যাট-লং জোড়া) বা ঠিকানা হতে পারে। মানচিত্রটি স্কেল করা হবে যাতে এটি সমস্ত চিহ্নিত পয়েন্ট অন্তর্ভুক্ত করে।

আপনি যদি স্যাটেলাইট চিত্রের পরিবর্তে আপনার মানচিত্রগুলিকে লাইন অঙ্কন করতে চান তবে পরিবর্তে একটি জিওচার্ট ব্যবহার করুন৷

নামকৃত অবস্থানসমূহ

জনসংখ্যার ভিত্তিতে শীর্ষ দশটি দেশের এই মানচিত্রে নীচে দেখানো হিসাবে আপনি নামের দ্বারা চিহ্নিতকারী রাখার জায়গাগুলি চিহ্নিত করতে পারেন।

ব্যবহারকারী যখন একটি চিহ্নিতকারী নির্বাচন করেন, তখন দেশের নাম এবং জনসংখ্যা সহ একটি টুলটিপ প্রদর্শিত হয়, কারণ আমরা showInfoWindow বিকল্পটি ব্যবহার করেছি। এছাড়াও, ব্যবহারকারী যখন অল্প সময়ের জন্য মার্কারগুলির একটির উপর ঘোরাফেরা করে, তখন একই তথ্যের সাথে একটি 'শিরোনাম' টিপ প্রদর্শিত হবে, কারণ আমরা showTooltip বিকল্পটি ব্যবহার করেছি। এখানে সম্পূর্ণ HTML:

<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>

মার্কার কাস্টমাইজ করা

আপনি ওয়েবে অন্য কোথাও অবস্থিত মার্কার আকার ব্যবহার করতে পারেন। এখানে iconarchive.com থেকে নীল পিন ব্যবহার করে একটি উদাহরণ:

আপনি উপরের চার্টে পিন নির্বাচন করলে, তারা তির্যক। PNGs, GIFs, এবং JPGs সমর্থিত।

ডেটা
  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 ব্যবহার করতে পারেন)।

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="map_div" style="height: 500px; width: 900px"></div> 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 type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="map_div" style="height: 500px; width: 900px"></div> 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>

স্টাইলিং মানচিত্র

মানচিত্র ভিজ্যুয়ালাইজেশন কাস্টম শৈলী সেট করার ক্ষমতা সহ আসে, যা আপনাকে এক বা একাধিক, কাস্টম মানচিত্র প্রকার তৈরি করতে দেয়।

আপনি একটি মানচিত্র শৈলী অবজেক্ট তৈরি করে এবং মানচিত্র বিকল্পের অধীনে এটির শনাক্তকারীর ( mapTypeId ) অধীনে রেখে একটি কাস্টম মানচিত্র প্রকার নির্ধারণ করতে পারেন৷ উদাহরণ স্বরূপ:

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

আপনি পরে এটিতে যে মানচিত্র শৈলী আইডি দিয়েছেন তা দ্বারা আপনি এই কাস্টম মানচিত্র প্রকারটি উল্লেখ করতে পারেন৷

আপনার মানচিত্র শৈলী অবজেক্টে একটি name রয়েছে , যা মানচিত্র প্রকার নিয়ন্ত্রণে প্রদর্শনের নাম হবে (এটি তার mapTypeId এর সাথে মেলে না), এবং একটি styles অ্যারে, যাতে আপনি স্টাইল করতে চান এমন প্রতিটি উপাদানের জন্য স্টাইল অবজেক্ট থাকবে৷ Google Maps API রেফারেন্সে বিভিন্ন উপাদান, বৈশিষ্ট্য এবং শৈলীর একটি তালিকা রয়েছে যা দিয়ে আপনি একটি কাস্টম মানচিত্র প্রকার তৈরি করতে পারেন।

দ্রষ্টব্য: আপনার কাস্টম mapTypeId অবশ্যই maps বিকল্পের অধীনে স্থাপন করতে হবে।

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="map_div" style="height: 500px; width: 900px"></div> 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}] } ]{% verbatim %}}}{% endverbatim %} }; var map = new google.visualization.Map(document.getElementById('map_div')); map.draw(data, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="map_div" style="height: 500px; width: 900px"></div> 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}] } ]{% verbatim %}}}{% endverbatim %} }; 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 অ্যারেতে অন্তর্ভুক্ত করবেন না। এর ফলে সেই মানচিত্রটি শুধুমাত্র প্রাথমিক লোডে প্রদর্শিত হবে।

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="map_div" style="height: 500px; width: 900px"></div> 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([ ['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); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="map_div" style="height: 500px; width: 900px"></div> 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([ ['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 , জাভাস্ক্রিপ্ট Map শ্রেণীর সাথে বিরোধপূর্ণ, আপনি যখন chartType: 'Map' নির্দিষ্ট করবেন তখন ChartWrapper স্বয়ংক্রিয়ভাবে এই প্যাকেজটি লোড করবে না। কিন্তু আপনি এর পরিবর্তে chartType: 'google.visualization.Map' ।

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

উপাত্ত বিন্যাস

দুটি বিকল্প ডেটা ফর্ম্যাট সমর্থিত:

  1. অক্ষাংশ-দীর্ঘ জোড়া - প্রথম দুটি কলাম যথাক্রমে অক্ষাংশ এবং দ্রাঘিমাংশ নির্ধারণকারী সংখ্যা হওয়া উচিত। একটি ঐচ্ছিক তৃতীয় কলামে একটি স্ট্রিং থাকে যা প্রথম দুটি কলামে নির্দিষ্ট অবস্থানের বর্ণনা দেয়।
  2. স্ট্রিং ঠিকানা - প্রথম কলামটি একটি স্ট্রিং হওয়া উচিত যাতে একটি ঠিকানা থাকে। আপনি এটি করতে পারেন এই ঠিকানা হিসাবে সম্পূর্ণ হতে হবে. একটি ঐচ্ছিক দ্বিতীয় কলামে একটি স্ট্রিং থাকে যা প্রথম কলামে অবস্থান বর্ণনা করে। স্ট্রিং ঠিকানাগুলি আরও ধীরে ধীরে লোড হয়, বিশেষ করে যখন আপনার 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'
    }
  }
};
প্রকার: বস্তু
ডিফল্ট: নাল
লাইন কালার

শোলাইন সত্য হলে, লাইনের রঙ নির্ধারণ করে। যেমন: '#800000'।

প্রকার: স্ট্রিং
ডিফল্ট: ডিফল্ট রঙ
লাইন প্রস্থ

শোলাইন সত্য হলে, লাইনের প্রস্থ নির্ধারণ করে (পিক্সেলে)।

প্রকার: সংখ্যা
ডিফল্ট: 10
মানচিত্র।<mapTypeId>

একটি কাস্টম মানচিত্রের প্রকারের বৈশিষ্ট্য ধারণকারী একটি বস্তু। এই কাস্টম মানচিত্র প্রকারটি আপনার কাস্টম মানচিত্র প্রকারের জন্য নির্দিষ্ট করা mapTypeId দ্বারা অ্যাক্সেস করা হবে৷ তৈরি করা প্রতিটি কাস্টম মানচিত্রের জন্য একটি নতুন mapTypeId দিতে হবে। প্রতিটি কাস্টম মানচিত্র প্রকার দুটি বৈশিষ্ট্য থাকা উচিত:

  • নাম: স্টাইল করা মানচিত্রের প্রকারের জন্য প্রদর্শনের নাম
  • শৈলী: স্টাইল করা মানচিত্র প্রকারের জন্য শৈলী বস্তু ধারণকারী একটি অ্যারে
প্রকার: বস্তু
ডিফল্ট: নাল
মানচিত্র।<mapTypeId>.নাম

মানচিত্রটির নাম যা মানচিত্র নিয়ন্ত্রণে প্রদর্শিত হবে যদি useMapTypeControl true সেট করা থাকে।

প্রকার: স্ট্রিং
ডিফল্ট: নাল
মানচিত্র।<mapTypeId>.শৈলী

একটি কাস্টম মানচিত্র প্রকারের বিভিন্ন উপাদানের জন্য শৈলী বস্তু ধারণ করে।

প্রতিটি স্টাইল অবজেক্টে 1 থেকে 3টি বৈশিষ্ট্য থাকতে পারে: featureType , এলিমেন্ট stylers এবং elementType । যদি featureType এবং elementType বাদ দেওয়া হয়, স্টাইলগুলি সমস্ত মানচিত্রের বৈশিষ্ট্য/উপাদানগুলিতে প্রয়োগ করা হবে৷

{
  featureType: 'roadway.highway',
  elementType: 'labels.text.fill',
  stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]
}

বিভিন্ন বৈশিষ্ট্য, উপাদান এবং স্টাইলার সম্পর্কে আরও তথ্যের জন্য মানচিত্র ডকুমেন্টেশন দেখুন।

প্রকার: অ্যারে
ডিফল্ট: নাল
মানচিত্রের ধরণ

দেখানোর জন্য মানচিত্রের ধরন। সম্ভাব্য মানগুলি হল 'স্বাভাবিক', 'ভূখণ্ড', 'স্যাটেলাইট', 'হাইব্রিড', অথবা একটি কাস্টম মানচিত্র প্রকারের আইডি, যদি তৈরি করা হয়।

প্রকার: স্ট্রিং
ডিফল্ট: 'হাইব্রিড'
mapTypeIds

যদি মানচিত্র প্রকার নিয়ন্ত্রণ ব্যবহার করে ( useMapTypeControl: true ), এই অ্যারেতে নির্দিষ্ট করা ID গুলিই মানচিত্রের ধরণ নিয়ন্ত্রণে প্রদর্শিত একমাত্র মানচিত্র প্রকার হবে৷ যদি এই বিকল্পটি সেট করা না থাকে, মানচিত্র টাইপ কন্ট্রোল স্ট্যান্ডার্ড Google ম্যাপ ম্যাপ টাইপ কন্ট্রোল বিকল্পের সাথে সাথে উপলব্ধ যে কোনো কাস্টম মানচিত্র প্রকারের জন্য ডিফল্ট হবে।

প্রকার: অ্যারে
ডিফল্ট: নাল
ShowInfoWindow

সত্য হিসাবে সেট করা হলে, ব্যবহারকারীর দ্বারা একটি পয়েন্ট মার্কার নির্বাচন করা হলে একটি পৃথক উইন্ডোতে অবস্থানের বিবরণ দেখায়। এই বিকল্পটিকে 45 সংস্করণ পর্যন্ত showTip আপ বলা হত। এছাড়াও showTooltip দেখুন

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
শোলাইন

সত্য হিসাবে সেট করা হলে, সমস্ত পয়েন্টের মাধ্যমে একটি Google মানচিত্রের পলিলাইন দেখায়।

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
শো টুলটিপ

সত্য হিসাবে সেট করা হলে, মাউস একটি পয়েন্ট মার্কার উপরে অবস্থান করা হলে একটি টুলটিপ হিসাবে অবস্থানের বিবরণ দেখায়। এই বিকল্পটি 45 সংস্করণ পর্যন্ত showTip আপ নামে পরিচিত ছিল। মনে রাখবেন যে এই সময়ে, HTML সমর্থিত নয়, তাই টুলটিপ কাঁচা HTML ট্যাগ দেখাবে।

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
ম্যাপটাইপ কন্ট্রোল ব্যবহার করুন

একটি মানচিত্র প্রকার নির্বাচক দেখান যা দর্শককে [মানচিত্র, উপগ্রহ, হাইব্রিড, ভূখণ্ড] এর মধ্যে পরিবর্তন করতে সক্ষম করে৷ যখন useMapTypeControl মিথ্যা (ডিফল্ট) হয় তখন কোন নির্বাচক উপস্থাপন করা হয় না এবং প্রকারটি mapType বিকল্প দ্বারা নির্ধারিত হয়।

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
জুম লেভেল

একটি পূর্ণসংখ্যা যা মানচিত্রের প্রাথমিক জুম স্তর নির্দেশ করে, যেখানে 0 সম্পূর্ণরূপে জুম আউট (পুরো বিশ্ব) এবং 19 হল সর্বাধিক জুম স্তর। ( Google Maps API-এ "জুম লেভেল" দেখুন।)

প্রকার: সংখ্যা
ডিফল্ট: স্বয়ংক্রিয়

পদ্ধতি

পদ্ধতি
draw(data, options)

মানচিত্র আঁকে।

রিটার্ন টাইপ: কোনোটিই নয়
getSelection()

স্ট্যান্ডার্ড getSelection() বাস্তবায়ন। নির্বাচন উপাদান সব সারি উপাদান. একাধিক নির্বাচিত সারি ফেরত দিতে পারে।

রিটার্ন টাইপ: নির্বাচন উপাদানের অ্যারে
setSelection(selection)

স্ট্যান্ডার্ড setSelection() বাস্তবায়ন। প্রতিটি নির্বাচন এন্ট্রিকে একটি সারি নির্বাচন হিসাবে বিবেচনা করে। একাধিক সারি নির্বাচন সমর্থন করে।

রিটার্ন টাইপ: কোনোটিই নয়

ঘটনা

নাম
error

চার্ট রেন্ডার করার চেষ্টা করার সময় একটি ত্রুটি ঘটলে বহিস্কার করা হয়।

বৈশিষ্ট্য: আইডি, বার্তা
select

স্ট্যান্ডার্ড নির্বাচন ইভেন্ট

বৈশিষ্ট্য: কোনটিই নয়

ডেটা নীতি

ম্যাপ গুগল ম্যাপ দ্বারা প্রদর্শিত হয়. ডেটা নীতি সম্পর্কে আরও তথ্যের জন্য অনুগ্রহ করে Google মানচিত্র পরিষেবার শর্তাবলী পড়ুন৷