تجسم: نقشه

  1. بررسی اجمالی
  2. مکان های نامگذاری شده
  3. مکان های جغرافیایی کد شده
  4. سفارشی کردن نشانگرها
  5. افزودن مجموعه های نشانگر چندگانه
  6. طراحی نقشه ها
  7. بارگذاری
  8. فرمت داده
  9. گزینه های پیکربندی
  10. مواد و روش ها
  11. مناسبت ها
  12. سیاست داده

بررسی اجمالی

نمودار نقشه گوگل یک نقشه را با استفاده از 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 کامل
<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 آورده شده است:

اگر پین ها را در نمودار بالا انتخاب کنید، مایل می شوند. 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 کامل
<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 کامل
<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 ) در زیر گزینه maps یک نوع نقشه سفارشی تعریف کنید. مثلا:

  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 کامل
<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 با کلاس JavaScript Map در تضاد است، ChartWrapper به طور خودکار این بسته را بارگیری نمی کند وقتی که chartType: 'Map' تعیین کنید. اما می‌توانید در عوض chartType: 'google.visualization.Map' .

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

فرمت داده

دو فرمت داده جایگزین پشتیبانی می شود:

  1. جفت های Lat-Long - دو ستون اول باید اعدادی باشند که به ترتیب طول و عرض جغرافیایی را مشخص می کنند. یک ستون سوم اختیاری رشته ای را نگه می دارد که مکان مشخص شده در دو ستون اول را توصیف می کند.
  2. آدرس رشته - ستون اول باید رشته ای باشد که حاوی آدرس باشد. این آدرس باید تا جایی که می توانید کامل باشد. یک ستون دوم اختیاری رشته ای را نگه می دارد که مکان را در ستون اول توصیف می کند. آدرس‌های رشته‌ای کندتر بارگیری می‌شوند، به خصوص زمانی که بیش از 10 آدرس دارید.

توجه: گزینه جفت Lat-Long نقشه ها را بسیار سریعتر بارگیری می کند، به خصوص با داده های بزرگ. توصیه می کنیم از این گزینه برای مجموعه داده های بزرگ استفاده کنید. لطفاً از Google Maps API دیدن کنید تا دریابید که چگونه آدرس‌های خود را به نقاط طولانی تبدیل کنید. نقشه می تواند حداکثر 400 ورودی را نمایش دهد. اگر اطلاعات شما بیش از 400 ردیف را در خود جای دهد، تنها 400 ردیف اول نشان داده می شود.

گزینه های پیکربندی

نام
فعال کردن ScrollWheel

اگر روی درست تنظیم شود، بزرگ‌نمایی و کوچک‌نمایی را با استفاده از چرخ پیمایش ماوس فعال می‌کند.

نوع: بولی
پیش فرض: نادرست
نمادها

مجموعه(های) نشانگرهای سفارشی را نگه می دارد. هر مجموعه نشانگر می تواند یک تصویر نشانگر 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'
    }
  }
};
نوع: شی
پیش فرض: null
رنگ خط

اگر showLine درست باشد، رنگ خط را مشخص می کند. به عنوان مثال: '#800000'.

نوع: رشته
پیش فرض: رنگ پیش فرض
عرض خط

اگر showLine درست باشد، عرض خط را (بر حسب پیکسل) تعریف می کند.

نوع: شماره
پیش فرض: 10
نقشه ها.<mapTypeId>

یک شی حاوی ویژگی های یک نوع نقشه سفارشی. این نوع نقشه سفارشی توسط mapTypeId که برای نوع نقشه سفارشی تعیین کرده اید قابل دسترسی خواهد بود. برای هر نوع نقشه سفارشی ایجاد شده باید یک mapTypeId جدید داده شود. هر نوع نقشه سفارشی باید دارای دو ویژگی باشد:

  • name: نام نمایشی برای نوع نقشه سبک
  • styles: آرایه ای حاوی اشیاء سبک برای نوع نقشه استایل شده
نوع: شی
پیش فرض: null
maps.<mapTypeId>.name

اگر useMapTypeControl روی true تنظیم شود، نام نقشه ای که در کنترل نقشه نمایش داده می شود.

نوع: رشته
پیش فرض: null
maps.<mapTypeId>.styles

اشیاء سبک را برای عناصر مختلف یک نوع نقشه سفارشی نگه می دارد.

هر شیء سبک می‌تواند شامل 1 تا 3 ویژگی باشد: featureType ، elementType و stylers . اگر featureType و elementType حذف شوند، سبک ها برای همه ویژگی ها/عناصر نقشه اعمال خواهند شد.

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

برای اطلاعات بیشتر در مورد ویژگی ها، عناصر و استایلرهای مختلف، به مستندات Maps مراجعه کنید.

نوع: آرایه
پیش فرض: null
نوع نقشه

نوع نقشه برای نشان دادن مقادیر ممکن عبارتند از: «نرمال»، «زمین»، «ماهواره»، «هیبرید»، یا شناسه یک نوع نقشه سفارشی، در صورتی که وجود داشته باشد.

نوع: رشته
پیش فرض: "هیبرید"
mapTypeIds

در صورت استفاده از کنترل نوع نقشه ( useMapTypeControl: true )، شناسه های مشخص شده در این آرایه تنها انواع نقشه نمایش داده شده در کنترل نوع نقشه خواهند بود. اگر این گزینه تنظیم نشود، کنترل نوع نقشه به طور پیش‌فرض روی گزینه‌های استاندارد کنترل نوع نقشه نقشه‌های Google به اضافه انواع نقشه‌های سفارشی موجود خواهد بود.

نوع: آرایه
پیش فرض: null
showInfoWindow

اگر روی درست تنظیم شود، وقتی یک نشانگر نقطه توسط کاربر انتخاب می شود، توضیحات مکان را در یک پنجره جداگانه نشان می دهد. این گزینه تا نسخه 45 showTip up نامیده می شد. همچنین به showTooltip مراجعه کنید

نوع: بولی
پیش فرض: نادرست
showLine

اگر روی درست تنظیم شود، یک چندخط Google Maps را در تمام نقاط نشان می دهد.

نوع: بولی
پیش فرض: نادرست
showTooltip

اگر روی درست تنظیم شود، وقتی ماوس در بالای یک نشانگر نقطه قرار می گیرد، توضیحات مکان را به عنوان یک راهنمای ابزار نشان می دهد. این گزینه تا نسخه 45 showTip up نامیده می شد. توجه داشته باشید که در حال حاضر HTML پشتیبانی نمی شود، بنابراین راهنمای ابزار تگ های خام HTML را نشان می دهد.

نوع: بولی
پیش فرض: نادرست
استفاده از MapTypeControl

یک انتخابگر نوع نقشه را نشان دهید که بیننده را قادر می سازد بین [نقشه، ماهواره، ترکیبی، زمین] جابجا شود. زمانی که useMapTypeControl false باشد (پیش‌فرض) هیچ انتخابگری ارائه نمی‌شود و نوع آن توسط گزینه mapType تعیین می‌شود.

نوع: بولی
پیش فرض: نادرست
zoomLevel

یک عدد صحیح که سطح بزرگنمایی اولیه نقشه را نشان می دهد، جایی که 0 به طور کامل کوچک نمایی شده است (کل جهان) و 19 حداکثر سطح بزرگنمایی است. (به «سطوح بزرگنمایی» در Google Maps API مراجعه کنید.)

نوع: شماره
پیش فرض: خودکار

مواد و روش ها

روش
draw(data, options)

نقشه را ترسیم می کند.

نوع بازگشت: ندارد
getSelection()

پیاده سازی استاندارد getSelection() . عناصر انتخاب همه عناصر ردیف هستند. می تواند بیش از یک ردیف انتخاب شده را برگرداند.

نوع بازگشت: آرایه ای از عناصر انتخابی
setSelection(selection)

اجرای استاندارد setSelection() . هر ورودی انتخابی را به عنوان یک انتخاب ردیف در نظر می گیرد. از انتخاب چندین ردیف پشتیبانی می کند.

نوع بازگشت: ندارد

مناسبت ها

نام
error

هنگامی که هنگام تلاش برای ارائه نمودار، خطایی رخ می دهد، فعال می شود.

ویژگی ها: شناسه، پیام
select

رویداد انتخاب استاندارد

خواص: ندارد

سیاست داده

نقشه توسط Google Maps نمایش داده می شود. لطفاً برای اطلاعات بیشتر در مورد خط مشی داده، به شرایط خدمات Google Maps مراجعه کنید.