Übersicht
Im Google Maps-Diagramm wird eine Karte mit der Google Maps API angezeigt. Datenwerte werden auf der Karte als Markierungen angezeigt. Datenwerte können Koordinaten (lat-long-Paare) oder Adressen sein. Die Karte wird so skaliert, dass sie alle identifizierten Punkte enthält.
Wenn es sich bei Ihren Karten um Linienzeichnungen und nicht um Satellitenbilder handeln soll, verwenden Sie stattdessen ein Geochart.
Benannte Standorte
Sie können die Orte identifizieren, an denen Markierungen zu sehen sind, wie unten auf dieser Karte der zehn Länder mit den meisten Einwohnern dargestellt.
Wenn der Nutzer eine der Markierungen auswählt, wird eine Kurzinfo mit dem Namen und der Bevölkerung des Landes angezeigt, da wir die Option showInfoWindow verwendet haben. Wenn der Nutzer für kurze Zeit den Mauszeiger auf eine der Markierungen bewegt, wird ein "Titel"-Tipp mit denselben Informationen angezeigt, da wir die Option showTooltip verwendet haben.
Hier ist der vollständige HTML-Code:
<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>
Geocodierte Standorte
Sie können Standorte auch nach Breiten- und Längengrad angeben. Dadurch werden sie schneller als benannte Standorte geladen:
Im obigen Diagramm werden vier Standorte nach Breiten- und Längengrad definiert.
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>
Markierungen anpassen
Sie können Markierungen an anderen Stellen im Web verwenden. Hier ein Beispiel mit blauen Stecknadeln von iconarchive.com:
Wenn Sie im obigen Diagramm Pins auswählen, werden sie schräg dargestellt. PNGs, GIFs und JPGs werden unterstützt.
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>
Mehrere Markierungen hinzufügen
Sie können nicht nur einen Standardmarkierungssatz erstellen, sondern auch mehrere.
Wenn Sie einen zusätzlichen Markierungssatz erstellen möchten, fügen Sie der Option icons eine ID hinzu und legen Sie die Markierungsbilder fest. Fügen Sie Ihrer Datentabelle dann eine Spalte hinzu und legen Sie die ID des Markierungssatzes fest, den Sie für jede Zeile in der Datentabelle verwenden möchten. Sie können auch 'default' oder null verwenden, um die Standardmarkierungen zu verwenden.
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>
Kartenstil festlegen
Mit der Kartenvisualisierung können Sie benutzerdefinierte Stile festlegen, um einen oder mehrere benutzerdefinierte Kartentypen zu erstellen.
Sie können einen benutzerdefinierten Kartentyp definieren, indem Sie ein Kartenstilobjekt erstellen und es unter seiner Kennung (mapTypeId) unter der Kartenoption platzieren. Beispiel:
var options = {
maps: {
<map style ID>: <map style object>
}
};
Sie können diesen benutzerdefinierten Kartentyp später mit der ihm zugewiesenen Kartenstil-ID verwenden.
Dein Kartenstilobjekt enthält ein name, das der Anzeigename im Steuerelement für den Kartentyp ist (muss nicht mit seinem mapTypeId übereinstimmen) und ein styles-Array, das Stilobjekte für jedes Element enthält, für das du einen Stil festlegen möchtest. Die Google Maps API-Referenz enthält eine Liste der verschiedenen Element-, Element- und Stiltypen, mit denen Sie einen benutzerdefinierten Kartentyp erstellen können.
Hinweis: Ihre benutzerdefinierte mapTypeId muss unter der Option maps platziert werden.
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>
Mit der Option mapTypeIds können Sie nicht nur benutzerdefinierte Kartentypen erstellen, sondern auch festlegen, welche Karten der Nutzer im Kartentyp-Steuerelement ansehen darf. Standardmäßig werden alle Kartentypen, einschließlich Ihrer benutzerdefinierten Kartentypen, im Steuerelement für Kartentypen angezeigt. Die Option mapTypeIds akzeptiert ein Array mit Strings der Kartentypen, die der Nutzer sehen darf. Diese Strings müssen sich entweder auf die vordefinierten Namen für die Standardkartenstile (normal, Satellit, Gelände, Hybrid) oder auf die Kartenstil-ID eines benutzerdefinierten Kartentyps beziehen, den Sie festgelegt haben. Wenn Sie die Option mapTypeIds festlegen, sind für die Karte nur die Kartentypen verfügbar, die Sie in diesem Array angeben.
Du kannst sie auch in Verbindung mit der Option mapType verwenden, um einen Kartenstil als Standard festzulegen, ihn jedoch nicht im Array mapTypeIds anzugeben. Dadurch wird die Karte nur beim ersten Laden angezeigt.
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}]}
]}
}
};
Wird geladen
Der Paketname von google.charts.load lautet "map".
Hinweis: Sie müssen ein eigenes mapsApiKey für Ihr Projekt abrufen, anstatt nur das hier zu kopieren, um eine Verschlechterung der Kartendaten für Ihre Nutzer zu vermeiden. Weitere Informationen finden Sie unter Einstellungen laden.
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"
});
Der Klassenname der Visualisierung lautet google.visualization.Map.
Da der gekürzte Name Map mit der JavaScript-Klasse Map in Konflikt steht, wird das Paket in ChartWrapper nicht automatisch geladen, wenn du chartType: 'Map' angibst. Du kannst aber auch chartType: 'google.visualization.Map' angeben.
var visualization = new google.visualization.Map(container);
Datenformat
Es werden zwei alternative Datenformate unterstützt:
- Breite-/Längengrad-Paare: Die ersten beiden Spalten müssen Zahlen für den Längen- und Breitengrad sein. Eine optionale dritte Spalte enthält einen String, der den in den ersten beiden Spalten angegebenen Ort beschreibt.
- Stringadresse: Die erste Spalte sollte ein String mit einer Adresse sein. Diese Adresse sollte so vollständig wie möglich sein. Eine optionale zweite Spalte enthält einen String, der den Standort in der ersten Spalte beschreibt. Stringadressen werden langsamer geladen, insbesondere wenn mehr als zehn Adressen vorhanden sind.
Hinweis:Mit der Option „Breite-/Länge-Paare“ werden Karten insbesondere bei großen Datenmengen viel schneller geladen. Wir empfehlen die Verwendung dieser Option für große Datensätze. In der Google Maps API erfahren Sie, wie Sie Ihre Adressen in Breiten- und Längengrade umwandeln. Auf der Karte können maximal 400 Einträge angezeigt werden. Wenn Ihre Daten mehr als 400 Zeilen enthalten, werden nur die ersten 400 Zeilen angezeigt.
Konfigurationsoptionen
| Name | |
|---|---|
| ScrollWheel aktivieren |
Ist die Option auf „true“ gesetzt, ist das Zoomen mit dem Mausrad möglich. Typ: Boolesch
Standard: false
|
| Symbole |
Enthält benutzerdefinierte Markierungen. Für jeden Markierungssatz können ein 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: Objekt
Standard: null
|
| Linienfarbe |
Wenn „showLine“ auf „true“ gesetzt ist, wird die Linienfarbe definiert. Beispiel: „#800000“. Typ: String
Standard: Standardfarbe
|
| Linienbreite |
Gibt für „showLine“ den Wert für die Linienbreite (in Pixeln) an. Typ:Zahl
Standard: 10
|
| maps.<mapTypeId> |
Ein Objekt, das die Eigenschaften eines benutzerdefinierten Kartentyps enthält. Auf diesen benutzerdefinierten Kartentyp wird über die
Type: Objekt
Standard: null
|
| maps.<mapTypeId>.name |
Der Name der Karte, der im Kartensteuerelement angezeigt wird, wenn Typ: String
Standard: null
|
| maps.<mapTypeId>.styles |
Enthält die Stilobjekte für die verschiedenen Elemente eines benutzerdefinierten Kartentyps
Jedes Stilobjekt kann 1 bis 3 Attribute enthalten: {
featureType: 'roadway.highway',
elementType: 'labels.text.fill',
stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]
}
Weitere Informationen zu den verschiedenen Funktionen, Elementen und Stylern finden Sie in der Google Maps-Dokumentation. Typ:Array
Standard: null
|
| MapType |
Der Typ der anzuzeigenden Karte. Mögliche Werte sind „normal“, „terrain“, „satellite“, „hybrid“ oder die ID eines benutzerdefinierten Kartentyps (falls vorhanden). Typ: String
Standardeinstellung: „Hybrid“
|
| mapTypeIds (Kartentyp-IDs) |
Wenn Sie das Steuerelement für den Kartentyp ( Typ:Array
Standard: null
|
| Infofenster anzeigen |
Wenn diese Option auf „true“ gesetzt ist, wird die Standortbeschreibung in einem separaten Fenster angezeigt, wenn der Nutzer eine Punktmarkierung auswählt. Diese Option hieß vor Version 45 Typ: Boolesch
Standard: false
|
| Zeile anzeigen |
Wenn dieser Wert auf „true“ gesetzt ist, wird eine Google Maps-Polylinie über alle Punkte hinweg angezeigt. Typ: Boolesch
Standard: false
|
| Kurzinfo anzeigen |
Wenn diese Option auf „true“ gesetzt ist, wird die Standortbeschreibung als Kurzinfo angezeigt, wenn sich der Mauszeiger über einer Punktmarkierung befindet. Diese Option hieß vor Version 45 Typ: Boolesch
Standard: false
|
| useMapTypeControl |
Zeige einen Kartentyp-Selektor, der es dem Betrachter ermöglicht, zwischen [Karte, Satellit, Hybrid, Gelände] zu wechseln. Wenn useMapTypeControl auf „false“ gesetzt ist (Standardeinstellung), wird kein Selektor angezeigt und der Typ wird durch die Option „mapType“ bestimmt. Typ: Boolesch
Standard: false
|
| zoomLevel |
Eine Ganzzahl, die die anfängliche Zoomstufe der Karte angibt, wobei 0 vollständig herausgezoomt ist (ganze Welt) und 19 die maximale Zoomstufe ist. Weitere Informationen finden Sie unter Zoomstufen in der Google Maps API. Typ: Zahl
Standard: automatisch
|
Methoden
| Methode | |
|---|---|
draw(data, options) |
Zeichnet die Karte. Rückgabetyp: Keine
|
getSelection() |
Standardmäßige Rückgabetyp:Array von Auswahlelementen
|
setSelection(selection) |
Standardmäßige Rückgabetyp: Keine
|
Ereignisse
| Name | |
|---|---|
error |
Wird ausgelöst, wenn beim Rendern des Diagramms ein Fehler auftritt Eigenschaften: ID, Nachricht
|
select |
Standardauswahlereignis Eigenschaften:Keine
|
Datenrichtlinie
Die Karte wird von Google Maps angezeigt. Weitere Informationen zu den Datenrichtlinien finden Sie in den Google Maps-Nutzungsbedingungen.