نظرة عامة
يعرض مخطط خرائط 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>
<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>
<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>
<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>
<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);
تنسيق البيانات
يتوفر تنسيقان بديلان للبيانات:
- أزواج خطوط الطول والعرض - يجب أن يشتمل أول عمودين على أرقام تحدد خط العرض وخط الطول، على التوالي. يحتوي عمود ثالث اختياري على سلسلة تصف الموقع الجغرافي المحدّد في أول عمودين.
- عنوان السلسلة - يجب أن يكون العمود الأول سلسلة تحتوي على عنوان. يجب أن يكون هذا العنوان كاملاً قدر الإمكان. يحتوي عمود ثانٍ اختياري على سلسلة تصف الموقع الجغرافي في العمود الأول. يتم تحميل عناوين السلاسل بشكل أبطأ، خاصةً عندما يكون لديك أكثر من 10 عناوين.
ملاحظة: يعمل الخيار "أزواج خطوط الطول والعرض" على تحميل الخرائط بشكل أسرع بكثير، خاصة مع البيانات الكبيرة. ننصح باستخدام هذا الخيار لمجموعات البيانات الكبيرة. يُرجى الانتقال إلى Google Maps API لمعرفة كيفية تحويل عناوينك إلى نقاط طويلة. يمكن أن تعرض الخريطة 400 إدخال كحد أقصى، وإذا كانت بياناتك تحتوي على أكثر من 400 صف، فسيتم عرض أول 400 فقط.
خيارات الضبط
| الاسم | |
|---|---|
| تفعيل عجلة التمرير |
في حالة التعيين على "true"، يتم تمكين التكبير والتصغير باستخدام بكرة تمرير الماوس. النوع: منطقي
تلقائي: خطأ
|
| رموز |
تحتوي على مجموعة أو مجموعات من العلامات المخصصة. يمكن لكل مجموعة علامات تحديد صورة علامة 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> |
عنصر يحتوي على خصائص نوع خريطة مخصّص. سيتم الوصول إلى نوع الخريطة المخصّصة هذا من خلال
النوع: الكائن
تلقائي: null
|
| خرائط.<mapTypeId>.name |
اسم الخريطة التي سيتم عرضها في عنصر التحكم في الخريطة إذا تم ضبط النوع: سلسلة
تلقائي: null
|
| خرائط.<mapTypeId>.styles |
يحتفظ بكائنات الأنماط للعناصر المختلفة لنوع الخريطة المخصصة.
يمكن أن يحتوي كل كائن نمط على خاصية واحدة إلى 3 خصائص: {
featureType: 'roadway.highway',
elementType: 'labels.text.fill',
stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]
}
اطّلِع على مستندات الخرائط للحصول على مزيد من المعلومات عن الميزات والعناصر والتصميمات المختلفة. المصفوفة Type:
تلقائي: null
|
| نوع الخريطة |
نوع الخريطة المراد عرضها. القيم المحتملة هي 'عادي'، أو 'تضاريس'، أو 'قمر صناعي'، أو 'مختلط'، أو رقم تعريف نوع مخصص للخريطة، إذا تم إنشاء أي منها. النوع: سلسلة
تلقائي: "مختلط"
|
| معرّفات نوع الخريطة |
في حال استخدام عنصر التحكم في نوع الخريطة ( المصفوفة Type:
تلقائي: null
|
| showInfoWindow |
في حال الضبط على "صحيح"، يتم عرض وصف الموقع الجغرافي في نافذة منفصلة عندما
يحدد المستخدم علامة نقطة. كان يُطلق على هذا الخيار اسم النوع: منطقي
تلقائي: خطأ
|
| عرض الخطوط |
في حال ضبطها على "صحيح"، يتم عرض الخط المتعدد في "خرائط Google" من خلال جميع النقاط. النوع: منطقي
تلقائي: خطأ
|
| عرض الأداة |
عند التعيين على "true"، يتم عرض وصف الموقع كتلميح عند وضع الماوس فوق علامة النقطة. كان يُطلق على هذا الخيار اسم النوع: منطقي
تلقائي: خطأ
|
| استخدام MapTypeControl |
عرض محدد الخريطة الذي يُمكِّن المشاهد من التبديل بين [خريطة، قمر صناعي، مختلط، تضاريس]. عند ضبط UseMapTypeControl على "خطأ" (تلقائي)، لا يتم تقديم محدِّد ويتم تحديد النوع من خلال خيار mapType. النوع: منطقي
تلقائي: خطأ
|
| تكبير/تصغير المستوى |
عدد صحيح يشير إلى مستوى التكبير الأولي للخريطة، حيث يتم تصغير 0 تمامًا (في جميع أنحاء العالم) و19 هو الحد الأقصى لمستوى التكبير/التصغير. (اطّلِع على "مستويات التكبير أو التصغير" في واجهة برمجة التطبيقات لخرائط Google.) النوع: الرقم
افتراضي: تلقائي
|
الطرق
| الطريقة | |
|---|---|
draw(data, options) |
لرسم الخريطة. نوع الإرجاع: لا شيء
|
getSelection() |
التنفيذ العادي
نوع العرض: مصفوفة من عناصر التحديد
|
setSelection(selection) |
التنفيذ العادي
نوع الإرجاع: لا شيء
|
الأحداث
| الاسم | |
|---|---|
error |
يتم الإطلاق عند حدوث خطأ عند محاولة عرض الرسم البياني. الخصائص: رقم التعريف، الرسالة
|
select |
حدث اختيار عادي الخصائص: بدون
|
سياسة البيانات
يتم عرض الخريطة من خلال خرائط Google. يرجى الرجوع إلى بنود خدمة خرائط Google للحصول على مزيد من المعلومات حول سياسة البيانات.