הצגה חזותית: מפה

סקירה כללית

תרשים המפה של Google מציג מפה באמצעות ממשק ה-API של מפות Google. ערכי הנתונים מוצגים כסמנים במפה. ערכי נתונים יכולים להיות קואורדינטות (זוגות ארוכים) או כתובות. המפה מותאמת לקנה מידה כך שהיא תכלול את כל הנקודות שזוהו.

אם אתם רוצים שהמפות שלכם יהיו תרשימי קו ולא תמונות לוויין, כדאי להשתמש במקום זאת בתרשים גיאוגרפי.

מיקומים בעלי שם

תוכלו לזהות את המקומות שבהם תציבו סמנים לפי שם, כפי שמוצג במפה הזו של עשר המדינות המובילות לפי אוכלוסיה.

כשהמשתמשים בוחרים באחד מהסמנים, יוצג הסבר קצר עם השם והאוכלוסיה של המדינה, כי השתמשנו באפשרות showInfoWindow. כמו כן, כשהמשתמש מעביר את העכבר מעל אחד הסמנים לזמן קצר, מופיע הטיפ 'title' עם אותו מידע, כי אנחנו משתמשים באפשרות 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 כדי להשתמש בסמני ברירת המחדל).

אפשרויות
      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 שיכיל אובייקטים של סגנון עבור כל רכיב שברצונך לעצב. ההפניה ל-API של מפות Google כוללת רשימה של סוגי הרכיבים, התכונות והסגנונות השונים שבאמצעותם אפשר ליצור סוג מפה מותאם אישית.

הערה: יש למקם את ה-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, מתנגש עם הסיווג Map של JavaScript, ה-ChartWrapper לא יטען את החבילה הזו באופן אוטומטי אם יצוין chartType: 'Map'. אפשר גם לציין chartType: 'google.visualization.Map'.

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

פורמט נתונים

יש שני פורמטים חלופיים של נתונים שאפשר להשתמש בהם:

  1. צמדים של קווי אורך ורוחב – בשתי העמודות הראשונות צריכים להופיע מספרים שמייצגים את קווי הרוחב והאורך, בהתאמה. עמודה שלישית אופציונלית כוללת מחרוזת שמתארת את המיקום שצוין בשתי העמודות הראשונות.
  2. מחרוזת כתובת – העמודה הראשונה צריכה להיות מחרוזת שמכילה כתובת. הכתובת הזו צריכה להיות מלאה ככל האפשר. בעמודה השנייה האופציונלית יש מחרוזת שמתארת את המיקום בעמודה הראשונה. כתובות מחרוזת נטענות לאט יותר, במיוחד כשיש לך יותר מ-10 כתובות.

הערה: האפשרות 'קואורדינטות של קווי אורך ורוחב' טוענת מפות במהירות רבה יותר, במיוחד בנתונים גדולים. מומלץ להשתמש באפשרות הזו לקבוצות גדולות של נתונים. אפשר להיכנס אל Google Maps API כדי ללמוד איך להמיר את הכתובות שלך לנקודות ארוכות. במפה ניתן להציג עד 400 ערכים. אם הנתונים שלך מכילים יותר מ-400 שורות, יוצגו רק 400 השורות הראשונות.

אפשרויות הגדרה

שם
enableScrollWheel

אם המדיניות מוגדרת כ-True, מאפשרת להתקרב ולהתרחק באמצעות גלגל הגלילה של העכבר.

סוג: בוליאני
ברירת מחדל: False
סמלים

מכיל קבוצות של סמנים מותאמים אישית. כל קבוצת סמנים יכולה לציין תמונת סמן 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'
    }
  }
};
Type: אובייקט
ברירת מחדל: null
צבעצבע

אם הערך של LineLine הוא True, מגדיר את צבע הקו. לדוגמה: '#800000'.

סוג: מחרוזת
ברירת מחדל: צבע ברירת מחדל
קו רוחב

אם הערך של LineLine נכון, מגדיר את רוחב הקו (בפיקסלים).

סוג: מספר
ברירת מחדל: 10
maps.<mapTypeId>

אובייקט שמכיל מאפיינים של סוג מפה מותאם אישית. הגישה לסוג המפה המותאם אישית הזה תתבצע על ידי mapTypeId שתציין עבור סוג המפה המותאם אישית. יש לציין מזהה mapTypeId חדש לכל סוג מפה בהתאמה אישית שנוצר. כל סוג של מפה מותאמת אישית צריך להכיל שני מאפיינים:

  • name: השם המוצג של סוג המפה המעוצבת
  • סגנונות: מערך שמכיל את האובייקטים של הסגנון עבור סוג המפה המסוגנן
Type: אובייקט
ברירת מחדל: 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}]
}

במסמכי התיעוד של מפות Google אפשר לקבל מידע נוסף על התכונות, הרכיבים והעיצובים השונים.

Type: מערך
ברירת מחדל: null
mapType

סוג המפה להצגה. ערכים אפשריים למצבים 'רגיל', 'פני השטח', 'לוויין', 'היברידי' או המזהה של סוג מפה מותאם אישית, אם נוצרו כאלה.

סוג: מחרוזת
ברירת מחדל: 'היברידי'
maptypeIds

אם משתמשים בפקד סוג המפה (useMapTypeControl: true), המזהים שצוינו במערך הזה יהיו סוגי המפות היחידים שיוצגו בפקד סוג המפה. אם האפשרות הזו לא מוגדרת, בקרת סוג המפה תוגדר כברירת מחדל לאפשרויות הרגילות של סוג המפה במפות Google, וכן לכל סוג מפה מותאם אישית שעשוי להיות זמין.

Type: מערך
ברירת מחדל: null
ShowInfoWindow

אם היא מוגדרת כ-True, תיאור המיקום מוצג בחלון נפרד כשנבחר סמן נקודה על ידי המשתמש. אפשרות זו נקראה בעבר showTip עד גרסה 45. למידע נוסף יש לעיין ב-showTooltip

סוג: בוליאני
ברירת מחדל: False
ShowLine

אם היא מוגדרת כ-True, הצגת קו מרובה של מפות Google בכל הנקודות.

סוג: בוליאני
ברירת מחדל: False
הצגToolTip

אם היא מוגדרת כ-True, תיאור המיקום יוצג כהסבר קצר כשהעכבר ימוקם מעל סמן נקודה. אפשרות זו נקראה בעבר showTip עד גרסה 45. הערה: בשלב זה, אין תמיכה ב-HTML, ולכן ההסבר הקצר יציג תגי HTML גולמיים.

סוג: בוליאני
ברירת מחדל: False
שימוש ב-TypeTypeTypeControl

הצגה של בורר סוג המפה שמאפשר לצופה לעבור בין [מפה, לוויין, היברידי, פני שטח]. כאשר השימוש ב-MapsTypeControl הוא False (ברירת מחדל), לא מוצג בורר והסוג נקבע לפי אפשרות mapType.

סוג: בוליאני
ברירת מחדל: False
שינוי מרחק התצוגה

מספר שלם שמציין את המרחק מהתצוגה הראשוני של המפה, כאשר 0 מבוטל לחלוטין (בעולם כולו) ו-19 הוא המרחק המקסימלי מהתצוגה. (ניתן לעיין ב"רמות מרחק מהתצוגה" ב-API של מפות Google).

סוג: מספר
ברירת מחדל: אוטומטי

שיטות

שיטה
draw(data, options)

משרטט את המפה.

סוג החזרה: אין
getSelection()

הטמעה רגילה של getSelection(). רכיבי הבחירה הם אלמנטים של שורה. אפשר להחזיר יותר משורה אחת שנבחרה.

סוג החזרה: מערך של רכיבי בחירה
setSelection(selection)

הטמעה רגילה של setSelection(). התייחסות לכל פריט שנבחר כבחירת שורה. ניתן לבחור שורות מרובות.

סוג החזרה: אין

אירועים

שם
error

מופעל כשמתרחשת שגיאה במהלך הניסיון לעבד את התרשים.

מאפיינים: מזהה, הודעה
select

אירוע בחירה רגיל

נכסים: ללא

מדיניות נתונים

המפה מוצגת במפות Google. למידע נוסף על המדיניות בנושא נתונים, אפשר לעיין בתנאים ובהגבלות של מפות Google.