Visualisierung: Karte

  1. Übersicht
  2. Benannte Standorte
  3. Geocodierte Standorte
  4. Markierungen anpassen
  5. Mehrere Markierungssätze hinzufügen
  6. Karten für Stile
  7. Loading
  8. Datenformat
  9. Konfigurationsoptionen
  10. Methoden
  11. Ereignisse
  12. Datenrichtlinie

Ü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.

Daten
  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']
  ]);
Vollständiges 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>

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.

Daten
  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'
      }
    }
  };
Vollständiges 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>

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.

Optionen
      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'
          }
        }
      };
Vollständiges 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>

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.

Optionen
      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}]
              }
        ]}}
      };
Vollständiges 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>

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:

  1. 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.
  2. 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 normal- und ein selected-Markierungsbild angegeben werden. Sie können einen Standardsatz festlegen, indem Sie die Option default festlegen, oder benutzerdefinierte Markierungssätze festlegen, indem Sie eine eindeutige Markierungs-ID festlegen. 

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 mapTypeId zugegriffen, die Sie für den benutzerdefinierten Kartentyp angegeben haben. Für jeden erstellten benutzerdefinierten Kartentyp muss ein neuer mapTypeId angegeben werden. Jeder benutzerdefinierte Kartentyp sollte zwei Eigenschaften enthalten:

  • name: Der Anzeigename für den Kartentyp mit benutzerdefinierten Stilen
  • Stile: ein Array, das die Stilobjekte für den Kartentyp mit benutzerdefinierten Stilen enthält
Type: Objekt
Standard: null
maps.<mapTypeId>.name

Der Name der Karte, der im Kartensteuerelement angezeigt wird, wenn useMapTypeControl auf true gesetzt ist.

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, elementType und stylers. Wenn featureType und elementType weggelassen werden, werden die Stile auf alle Kartenmerkmale/-elemente angewendet. 

{
  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 (useMapTypeControl: true) verwenden, sind die in diesem Array angegebenen IDs die einzigen Kartentypen, die im Kartentyp-Steuerelement angezeigt werden. Wenn diese Option nicht festgelegt ist, werden standardmäßig die standardmäßigen Kartentyp-Steuerelemente und alle verfügbaren benutzerdefinierten Kartentypen verwendet.

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 showTip. Siehe auch: showTooltip

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 showTip. Derzeit wird HTML nicht unterstützt. In der Kurzinfo werden also unformatierte HTML-Tags angezeigt.

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 getSelection()-Implementierung Auswahlelemente sind alle Zeilenelemente. Kann mehrere ausgewählte Zeilen zurückgeben.

Rückgabetyp:Array von Auswahlelementen
setSelection(selection)

Standardmäßige setSelection()-Implementierung Behandelt jeden Auswahleintrag als Zeilenauswahl. Unterstützt die Auswahl mehrerer Zeilen.

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.