การแสดงภาพ: แผนที่

  1. ภาพรวม
  2. สถานที่ที่มีชื่อ
  3. สถานที่ตั้งที่มีการเข้ารหัส
  4. การปรับแต่งตัวทําเครื่องหมาย
  5. การเพิ่มชุดเครื่องหมายหลายรายการ
  6. การจัดรูปแบบแผนที่
  7. กำลังโหลด
  8. รูปแบบข้อมูล
  9. ตัวเลือกการกําหนดค่า
  10. เมธอด
  11. เหตุการณ์
  12. นโยบายข้อมูล

ภาพรวม

แผนภูมิของ Google Maps แสดงแผนที่โดยใช้ Google Maps API ค่าข้อมูลจะแสดงเป็นเครื่องหมายบนแผนที่ ค่าข้อมูลอาจเป็นพิกัด (แบบยาว) หรือที่อยู่ ระบบจะปรับขนาดแผนที่ให้มีจุดที่ระบุทั้งหมด

หากต้องการให้แผนที่เป็นภาพวาดเส้น ไม่ใช่ภาพจากดาวเทียม ให้ใช้geoแผนภูมิแทน

สถานที่ที่มีชื่อ

คุณสามารถระบุสถานที่ต่างๆ สําหรับวางเครื่องหมายตามชื่อ ดังที่แสดงด้านล่างในแผนที่ของประเทศ 10 อันดับแรกของประชากร

เมื่อผู้ใช้เลือกเครื่องหมายรายการหนึ่ง ระบบจะแสดงเคล็ดลับเครื่องมือพร้อมชื่อและประชากรของประเทศ เนื่องจากเราใช้ตัวเลือก 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>

สถานที่ตั้งทางภูมิศาสตร์

นอกจากนี้คุณยังระบุตําแหน่งตามละติจูดและลองจิจูดซึ่งโหลดเร็วกว่าสถานที่ตั้งที่มีชื่อได้อีกด้วย ดังนี้

แผนภูมิด้านบนจะระบุสถานที่ตั้ง 4 แห่งตามละติจูดและลองจิจูด

ข้อมูล
  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 เพื่อใช้เครื่องหมายเริ่มต้นก็ได้)

ตัวเลือก
      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) ใต้ตัวเลือกแผนที่ เช่น 

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

คุณสามารถดูประเภทแผนที่ที่กําหนดเองนี้ในภายหลังโดยรหัสรูปแบบแผนที่ที่คุณกําหนด

ออบเจ็กต์รูปแบบแผนที่ของคุณมี name ซึ่งเป็นชื่อที่แสดงในการควบคุมประเภทแผนที่ (ไม่จําเป็นต้องตรงกับ mapTypeId) และอาร์เรย์ styles ซึ่งจะมีออบเจ็กต์รูปแบบสําหรับแต่ละองค์ประกอบที่คุณต้องการจัดรูปแบบ ข้อมูลอ้างอิง Google Maps API มีรายการองค์ประกอบ ฟีเจอร์ และสไตล์ต่างๆ ที่คุณสร้างประเภทแผนที่ที่กําหนดเองได้

หมายเหตุ: คุณต้องวาง mapTypeId ที่กําหนดเองใต้ตัวเลือก maps

ตัวเลือก
      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 การดําเนินการนี้จะทําให้แผนที่นั้นแสดงเฉพาะเมื่อโหลดครั้งแรก 

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

รูปแบบข้อมูล

ระบบรองรับข้อมูล 2 รูปแบบ ดังนี้

  1. คู่คีย์-แบบยาว - 2 คอลัมน์แรกควรเป็นตัวเลขที่ระบุละติจูดและลองจิจูดตามลําดับ คอลัมน์ที่ 3 ที่ไม่บังคับจะมีสตริงที่อธิบายสถานที่ที่ระบุใน 2 คอลัมน์แรก
  2. ที่อยู่สตริง - คอลัมน์แรกควรเป็นสตริงที่มีที่อยู่ ที่อยู่นี้ควรสมบูรณ์ที่สุดเท่าที่คุณจะทําได้ คอลัมน์ที่ 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'
    }
  }
};
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
สีของเส้น

หาก ShowLine เป็น "จริง" ให้กําหนดสีของเส้น เช่น "#800000"

ประเภท: สตริง
ค่าเริ่มต้น: สีเริ่มต้น
ความกว้างของเส้น

หาก ShowLine เป็น "จริง" ให้กําหนดความกว้างของเส้น (เป็นพิกเซล)

ประเภท: ตัวเลข
ค่าเริ่มต้น: 10
maps.<mapTypeId>

ออบเจ็กต์ที่มีพร็อพเพอร์ตี้จากประเภทแผนที่ที่กําหนดเอง mapTypeId ที่คุณระบุสําหรับประเภทแผนที่ที่กําหนดเองจะเข้าถึงแผนที่ประเภทนี้ได้ ต้องระบุ mapTypeId ใหม่บนแผนที่ที่กําหนดเองแต่ละประเภทที่สร้างขึ้น แผนที่ที่กําหนดเองแต่ละประเภทควรมีพร็อพเพอร์ตี้ 2 รายการดังนี้

  • ชื่อ: ชื่อที่แสดงของประเภทแผนที่ที่จัดรูปแบบ
  • รูปแบบ: อาร์เรย์ที่มีออบเจ็กต์รูปแบบสําหรับประเภทแผนที่ที่มีการจัดรูปแบบ
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: 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 Maps บวกประเภทแผนที่ที่กําหนดเองที่อาจมีให้ใช้งาน

ประเภท: อาร์เรย์
ค่าเริ่มต้น: Null
แสดงหน้าต่างข้อมูล

หากตั้งค่าเป็น "จริง" จะแสดงคําอธิบายตําแหน่งในหน้าต่างแยกต่างหากเมื่อผู้ใช้เลือกเครื่องหมายจุด ตัวเลือกนี้เรียกว่าshowTip จนถึงเวอร์ชัน 45 ดูเพิ่มเติมที่ showTooltip

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
แสดงบรรทัด

หากตั้งค่าเป็น "จริง" จะแสดงเส้นประกอบของ Google Maps ผ่านจุดทั้งหมด

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
แสดงเคล็ดลับเครื่องมือ

หากตั้งค่าเป็น "จริง" จะแสดงคําอธิบายตําแหน่งเป็นเคล็ดลับเครื่องมือเมื่อวางเมาส์เหนือเครื่องหมายจุด ตัวเลือกนี้เรียกว่าshowTip จนถึงเวอร์ชัน 45 โปรดทราบว่าในขณะนี้เรายังไม่รองรับ HTML ดังนั้นเคล็ดลับเครื่องมือจะแสดงแท็ก HTML ดิบ

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
ใช้ MapTypeControl

แสดงตัวเลือกประเภทแผนที่ที่ช่วยให้ผู้ชมสลับระหว่าง [แผนที่ ดาวเทียม แบบผสม ภูมิประเทศ] เมื่อ ใช้ MapTypeControl เป็นเท็จ (ค่าเริ่มต้น) ระบบจะไม่แสดงตัวเลือกและประเภทจะกําหนดโดยตัวเลือก MapType

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
ระดับการซูม

จํานวนเต็มที่ระบุระดับการซูมเริ่มต้นของแผนที่ โดยที่ 0 จะซูมออกโดยสมบูรณ์ (ทั้งโลก) และ 19 คือระดับการซูมสูงสุด (ดู "ระดับการซูม" ใน Google Maps API)

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ

เมธอด

วิธีการ
draw(data, options)

วาดแผนที่

ประเภทการคืนสินค้า: ไม่มี
getSelection()

การใช้งาน getSelection() มาตรฐาน องค์ประกอบการเลือกคือองค์ประกอบแถวทั้งหมด สามารถแสดงแถวที่เลือกได้มากกว่า 1 แถว

ประเภทการแสดงผล: อาร์เรย์ขององค์ประกอบการเลือก
setSelection(selection)

การใช้งาน setSelection() มาตรฐาน ถือว่ารายการที่เลือกทั้งหมดเป็นแถวที่เลือก รองรับการเลือกหลายแถว

ประเภทการคืนสินค้า: ไม่มี

เหตุการณ์

ชื่อ
error

เริ่มทํางานเมื่อเกิดข้อผิดพลาดเมื่อพยายามแสดงผลแผนภูมิ

พร็อพเพอร์ตี้: รหัส ข้อความ
select

เหตุการณ์การเลือกมาตรฐาน

พร็อพเพอร์ตี้: ไม่มี

นโยบายข้อมูล

แผนที่แสดงโดย Google Maps โปรดอ่านข้อกําหนดในการให้บริการของ Google Maps เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับนโยบายข้อมูล