סקירה כללית
תרשים המפה של 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>
<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, מתנגש עם הסיווג Map
של JavaScript, ה-ChartWrapper לא יטען את החבילה הזו באופן אוטומטי אם יצוין
chartType: 'Map'. אפשר גם לציין chartType: 'google.visualization.Map'.
var visualization = new google.visualization.Map(container);
פורמט נתונים
יש שני פורמטים חלופיים של נתונים שאפשר להשתמש בהם:
- צמדים של קווי אורך ורוחב – בשתי העמודות הראשונות צריכים להופיע מספרים שמייצגים את קווי הרוחב והאורך, בהתאמה. עמודה שלישית אופציונלית כוללת מחרוזת שמתארת את המיקום שצוין בשתי העמודות הראשונות.
- מחרוזת כתובת – העמודה הראשונה צריכה להיות מחרוזת שמכילה כתובת. הכתובת הזו צריכה להיות מלאה ככל האפשר. בעמודה השנייה האופציונלית יש מחרוזת שמתארת את המיקום בעמודה הראשונה. כתובות מחרוזת נטענות לאט יותר, במיוחד כשיש לך יותר מ-10 כתובות.
הערה: האפשרות 'קואורדינטות של קווי אורך ורוחב' טוענת מפות במהירות רבה יותר, במיוחד בנתונים גדולים. מומלץ להשתמש באפשרות הזו לקבוצות גדולות של נתונים. אפשר להיכנס אל Google Maps API כדי ללמוד איך להמיר את הכתובות שלך לנקודות ארוכות. במפה ניתן להציג עד 400 ערכים. אם הנתונים שלך מכילים יותר מ-400 שורות, יוצגו רק 400 השורות הראשונות.
אפשרויות הגדרה
| שם | |
|---|---|
| enableScrollWheel |
אם המדיניות מוגדרת כ-True, מאפשרת להתקרב ולהתרחק באמצעות גלגל הגלילה של העכבר. סוג: בוליאני
ברירת מחדל: False
|
| סמלים |
מכיל קבוצות של סמנים מותאמים אישית. כל קבוצת סמנים יכולה לציין תמונת סמן 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> |
אובייקט שמכיל מאפיינים של סוג מפה מותאם אישית. הגישה לסוג המפה המותאם אישית הזה תתבצע על ידי
Type: אובייקט
ברירת מחדל: null
|
| maps.<mapTypeId>.name |
שם המפה שיוצג בפקד המפה אם
סוג: מחרוזת
ברירת מחדל: null
|
| maps.<mapTypeId>.styles |
מכיל את אובייקטי הסגנון של הרכיבים השונים בסוג מפה מותאם אישית.
כל אובייקט סגנון יכול להכיל 1 עד 3 מאפיינים: {
featureType: 'roadway.highway',
elementType: 'labels.text.fill',
stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]
}
במסמכי התיעוד של מפות Google אפשר לקבל מידע נוסף על התכונות, הרכיבים והעיצובים השונים. Type: מערך
ברירת מחדל: null
|
| mapType |
סוג המפה להצגה. ערכים אפשריים למצבים 'רגיל', 'פני השטח', 'לוויין', 'היברידי' או המזהה של סוג מפה מותאם אישית, אם נוצרו כאלה. סוג: מחרוזת
ברירת מחדל: 'היברידי'
|
| maptypeIds |
אם משתמשים בפקד סוג המפה ( Type: מערך
ברירת מחדל: null
|
| ShowInfoWindow |
אם היא מוגדרת כ-True, תיאור המיקום מוצג בחלון נפרד כשנבחר סמן נקודה על ידי המשתמש. אפשרות זו נקראה בעבר סוג: בוליאני
ברירת מחדל: False
|
| ShowLine |
אם היא מוגדרת כ-True, הצגת קו מרובה של מפות Google בכל הנקודות. סוג: בוליאני
ברירת מחדל: False
|
| הצגToolTip |
אם היא מוגדרת כ-True, תיאור המיקום יוצג כהסבר קצר כשהעכבר ימוקם מעל סמן נקודה. אפשרות זו נקראה בעבר סוג: בוליאני
ברירת מחדל: False
|
| שימוש ב-TypeTypeTypeControl |
הצגה של בורר סוג המפה שמאפשר לצופה לעבור בין [מפה, לוויין, היברידי, פני שטח]. כאשר השימוש ב-MapsTypeControl הוא False (ברירת מחדל), לא מוצג בורר והסוג נקבע לפי אפשרות mapType. סוג: בוליאני
ברירת מחדל: False
|
| שינוי מרחק התצוגה |
מספר שלם שמציין את המרחק מהתצוגה הראשוני של המפה, כאשר 0 מבוטל לחלוטין (בעולם כולו) ו-19 הוא המרחק המקסימלי מהתצוגה. (ניתן לעיין ב"רמות מרחק מהתצוגה" ב-API של מפות Google). סוג: מספר
ברירת מחדל: אוטומטי
|
שיטות
| שיטה | |
|---|---|
draw(data, options) |
משרטט את המפה. סוג החזרה: אין
|
getSelection() |
הטמעה רגילה של
סוג החזרה: מערך של רכיבי בחירה
|
setSelection(selection) |
הטמעה רגילה של
סוג החזרה: אין
|
אירועים
| שם | |
|---|---|
error |
מופעל כשמתרחשת שגיאה במהלך הניסיון לעבד את התרשים. מאפיינים: מזהה, הודעה
|
select |
אירוע בחירה רגיל נכסים: ללא
|
מדיניות נתונים
המפה מוצגת במפות Google. למידע נוסף על המדיניות בנושא נתונים, אפשר לעיין בתנאים ובהגבלות של מפות Google.