التمثيل البصري: الخريطة

  1. نظرة عامة
  2. المواقع الجغرافية التي لها أسماء
  3. المواقع الجغرافية المشفَّرة جغرافيًا
  4. تخصيص العلامات
  5. إضافة مجموعات متعددة العلامات
  6. تصميم الخرائط
  7. جارٍ التحميل
  8. تنسيق البيانات
  9. خيارات الإعداد
  10. الطُرق
  11. الأحداث
  12. سياسة البيانات

نظرة عامة

يعرض مخطط خرائط Google خريطة باستخدام واجهة برمجة التطبيقات لخرائط Google . يتم عرض قيم البيانات كعلامات على الخريطة. يمكن أن تكون قيم البيانات إحداثيات (أزواج خطوط الطول والعرض) أو عناوين. سيتم تغيير حجم الخريطة لتتضمن جميع النقاط المحددة.

إذا كنت تريد أن تكون خرائطك رسومات خطية بدلاً من صور القمر الصناعي، فاستخدم المخطط الجغرافي بدلاً من ذلك.

المواقع الجغرافية التي لها أسماء

يمكنك تحديد الأماكن لوضع العلامات بحسب الاسم، كما هو موضح أدناه في هذه الخريطة لأفضل عشرة بلدان حسب عدد السكان.

عندما يختار المستخدم إحدى العلامات، يتم عرض تلميح باسم البلد وعدد السكان، وذلك لأننا استخدمنا الخيار 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 لاستخدام العلامات التلقائية).

الخيارات
      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، يتعارض مع فئة JavaScript Map ، لن يتم تحميل هذه الحزمة تلقائيًا بواسطة ChartWrapper عند تحديد chartType: 'Map'. ويمكنك بدلاً من ذلك تحديد السمة chartType: 'google.visualization.Map'.

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

تنسيق البيانات

يتوفر تنسيقان بديلان للبيانات:

  1. أزواج خطوط الطول والعرض - يجب أن يشتمل أول عمودين على أرقام تحدد خط العرض وخط الطول، على التوالي. يحتوي عمود ثالث اختياري على سلسلة تصف الموقع الجغرافي المحدّد في أول عمودين.
  2. عنوان السلسلة - يجب أن يكون العمود الأول سلسلة تحتوي على عنوان. يجب أن يكون هذا العنوان كاملاً قدر الإمكان. يحتوي عمود ثانٍ اختياري على سلسلة تصف الموقع الجغرافي في العمود الأول. يتم تحميل عناوين السلاسل بشكل أبطأ، خاصةً عندما يكون لديك أكثر من 10 عناوين.

ملاحظة: يعمل الخيار "أزواج خطوط الطول والعرض" على تحميل الخرائط بشكل أسرع بكثير، خاصة مع البيانات الكبيرة. ننصح باستخدام هذا الخيار لمجموعات البيانات الكبيرة. يُرجى الانتقال إلى Google Maps API لمعرفة كيفية تحويل عناوينك إلى نقاط طويلة. يمكن أن تعرض الخريطة 400 إدخال كحد أقصى، وإذا كانت بياناتك تحتوي على أكثر من 400 صف، فسيتم عرض أول 400 فقط.

خيارات الضبط

الاسم
تفعيل عجلة التمرير

في حالة التعيين على "true"، يتم تمكين التكبير والتصغير باستخدام بكرة تمرير الماوس.

النوع: منطقي
تلقائي: خطأ
رموز

تحتوي على مجموعة أو مجموعات من العلامات المخصصة. يمكن لكل مجموعة علامات تحديد صورة علامة 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 جديد لكل نوع خريطة مخصّص يتم إنشاؤه. يجب أن يحتوي كل نوع من أنواع الخرائط المخصصة على خاصيتين:

  • الاسم: اسم العرض لنوع الخريطة ذات النمط
  • الأنماط: مصفوفة تحتوي على كائنات النمط لنوع الخريطة ذات النمط
النوع: الكائن
تلقائي: null
خرائط.<mapTypeId>.name

اسم الخريطة التي سيتم عرضها في عنصر التحكم في الخريطة إذا تم ضبط useMapTypeControl على true.

النوع: سلسلة
تلقائي: null
خرائط.<mapTypeId>.styles

يحتفظ بكائنات الأنماط للعناصر المختلفة لنوع الخريطة المخصصة.

يمكن أن يحتوي كل كائن نمط على خاصية واحدة إلى 3 خصائص: featureType وelementType وstylers. إذا تم حذف featureType وelementType، سيتم تطبيق الأنماط على جميع عناصر/عناصر الخريطة. 

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

اطّلِع على مستندات الخرائط للحصول على مزيد من المعلومات عن الميزات والعناصر والتصميمات المختلفة.

المصفوفة Type:
تلقائي: null
نوع الخريطة

نوع الخريطة المراد عرضها. القيم المحتملة هي 'عادي'، أو 'تضاريس'، أو 'قمر صناعي'، أو 'مختلط'، أو رقم تعريف نوع مخصص للخريطة، إذا تم إنشاء أي منها.

النوع: سلسلة
تلقائي: "مختلط"
معرّفات نوع الخريطة

في حال استخدام عنصر التحكم في نوع الخريطة (useMapTypeControl: true)، ستكون المعرّفات المحدّدة في هذه المصفوفة هي أنواع الخرائط الوحيدة المعروضة في عنصر التحكّم في نوع الخريطة. في حال عدم ضبط هذا الخيار، سيتم ضبط عنصر التحكّم في نوع الخريطة تلقائيًا على خيارات التحكّم العادية في نوع الخريطة في "خرائط Google"، بالإضافة إلى أي أنواع خرائط مخصّصة قد تكون متاحة.

المصفوفة Type:
تلقائي: null
showInfoWindow

في حال الضبط على "صحيح"، يتم عرض وصف الموقع الجغرافي في نافذة منفصلة عندما يحدد المستخدم علامة نقطة. كان يُطلق على هذا الخيار اسم showTip حتى الإصدار 45. راجع أيضًا showTooltip

النوع: منطقي
تلقائي: خطأ
عرض الخطوط

في حال ضبطها على "صحيح"، يتم عرض الخط المتعدد في "خرائط Google" من خلال جميع النقاط.

النوع: منطقي
تلقائي: خطأ
عرض الأداة

عند التعيين على "true"، يتم عرض وصف الموقع كتلميح عند وضع الماوس فوق علامة النقطة. كان يُطلق على هذا الخيار اسم showTip حتى الإصدار 45. تجدر الإشارة إلى أن HTML غير معتمد في الوقت الحالي، لذلك سيعرض التلميح علامات HTML غير منسقة.

النوع: منطقي
تلقائي: خطأ
استخدام MapTypeControl

عرض محدد الخريطة الذي يُمكِّن المشاهد من التبديل بين [خريطة، قمر صناعي، مختلط، تضاريس]. عند ضبط UseMapTypeControl على "خطأ" (تلقائي)، لا يتم تقديم محدِّد ويتم تحديد النوع من خلال خيار mapType.

النوع: منطقي
تلقائي: خطأ
تكبير/تصغير المستوى

عدد صحيح يشير إلى مستوى التكبير الأولي للخريطة، حيث يتم تصغير 0 تمامًا (في جميع أنحاء العالم) و19 هو الحد الأقصى لمستوى التكبير/التصغير. (اطّلِع على "مستويات التكبير أو التصغير" في واجهة برمجة التطبيقات لخرائط Google.)

النوع: الرقم
افتراضي: تلقائي

الطرق

الطريقة
draw(data, options)

لرسم الخريطة.

نوع الإرجاع: لا شيء
getSelection()

التنفيذ العادي getSelection(). عناصر التحديد هي جميع عناصر الصفوف. يمكن عرض أكثر من صف واحد محدّد.

نوع العرض: مصفوفة من عناصر التحديد
setSelection(selection)

التنفيذ العادي setSelection(). يتعامل مع كل إدخال يتم تحديده على أنه اختيار صف. إتاحة اختيار عدة صفوف

نوع الإرجاع: لا شيء

الأحداث

الاسم
error

يتم الإطلاق عند حدوث خطأ عند محاولة عرض الرسم البياني.

الخصائص: رقم التعريف، الرسالة
select

حدث اختيار عادي

الخصائص: بدون

سياسة البيانات

يتم عرض الخريطة من خلال خرائط Google. يرجى الرجوع إلى بنود خدمة خرائط Google للحصول على مزيد من المعلومات حول سياسة البيانات.