Es kann losgehen!

Bevor Sie mit der Entwicklung beginnen, lesen Sie bitte unsere Entwicklerdokumentation.

Die Google Maps JavaScript API aktivieren

Zum Einstieg führen wir Sie durch die Google Developers Console, wo Sie vorab Folgendes tun müssen:

  1. Ein Projekt erstellen oder auswählen
  2. Die Google Maps JavaScript API und zugehörige Dienste aktivieren
  3. Zugehörige Schlüssel erstellen
Weiter

Fusion Tables-Ebene (Experimental)

  1. Übersicht
  2. Beschränkungen
  3. Fusion Table-Einrichtung
  4. FusionTables-Ebene konstruieren
  5. Fusion Table-Abfragen
  6. Fusion Table-Formate
  7. Fusion Table-Heatmaps

Hinweis: Die Fusion Tables-Ebene ist Teil der Experimental-Version.

Mit der Fusion Tables-Ebene werden Daten wiedergegeben, die in den Google Fusion Tables enthalten sind.

Übersicht

Mit der Google Maps JavaScript API können Sie Daten wiedergeben, die in Google Fusion Tables als Ebenen auf einer Karte enthalten sind, indem Sie das Objekt FusionTablesLayer verwenden. Eine Google Fusion Table ist eine Datenbanktabelle, bei der jede Zeile Daten zu einer bestimmten Funktion enthält; bei geografischen Daten enthält jede Zeile einer Google Fusion Table außerdem Standortdaten mit den Positionsangaben einer Funktion. In FusionTablesLayer wird eine Schnittstelle zu Fusion Tables bereitgestellt, außerdem werden die automatische Wiedergabe dieser Standortdaten unterstützt und klickbare Überlagerungen bereitgestellt, mit denen zusätzliche Daten einer Funktion angezeigt werden.

Ein Beispiel für eine Fusion Table mit geografischen Daten ist nachfolgend dargestellt:

Beschränkungen

Sie können die Google Maps JavaScript API verwenden, um maximal fünf Fusion Tables-Ebenen zu einer Karte hinzuzufügen, von denen eine mit bis zu fünf Formatierungsregeln formatiert werden kann.

Zusätzlich gilt:

  • Nur die ersten 100.000 Datenzeilen einer Tabelle werden zugeordnet oder in Abfrageergebnisse aufgenommen.
  • Von Abfragen mit räumlichen Funktionen werden nur Daten aus den ersten 100.000 Zeilen wiedergegeben. Wenn Sie also einen Filter auf eine sehr große Tabelle anwenden und nach den ersten 100.000 Zeilen Übereinstimmungen mit dem Filter in Zeilen vorhanden sind, werden diese Zeilen nicht angezeigt.
  • Beim Importieren oder Einfügen von Daten ist Folgendes zu beachten:
    • Die Gesamtgröße der in einer API gesendeten Daten darf 1 MB nicht übersteigen.
    • Für einzelne Datenzellen in Fusion Tables werden maximal 1 Million Zeichen unterstützt; daher kann es in einigen Fällen erforderlich sein, die Genauigkeit der Koordinaten zu verringern oder Polygon- oder Linienbeschreibungen zu vereinfachen.
    • Pro Tabelle werden maximal 5 Millionen Eckpunkte unterstützt.
  • Bei Betrachtung der Karte fällt Folgendes auf:
    • Es werden die zehn Komponenten mit dem größten Bereich einer Multigeometrie dargestellt.
    • Wird die Ansicht weiter verkleinert, werden in Tabellen mit mehr als 500 Funktionen Punkte angezeigt (keine Linien oder Polygone).

Fusion Table-Einrichtung

Fusion Tables sind Datentabellen, mit denen die integrierte Unterstützung geografischer Daten gewährleistet wird. Weitere Informationen finden Sie unter About Fusion Tables. Damit Daten in der API durch eine Fusion Tables-Ebene auf einer Google-Karte angezeigt werden, muss die Tabelle folgende Kriterien erfüllen:

  • Die Tabelle muss als Public oder Unlisted geteilt werden.
  • Die Tabelle muss über mindestens eine Spalte verfügen, die als Location definiert ist. Wählen Sie in der Fusion Tables-Weboberfläche die Option Edit > Modify Columns, und wählen Sie die gewünschten Spalten aus.

Die Spalte Location muss den nachfolgend angegebenen Formatierungsvorgaben entsprechen.

  • Breiten-/Längenkoordinaten können als einzelne Spalte durch Kommas getrennt (Breite,Länge) erfasst oder auf zwei Spalten verteilt werden (eine Spalte für die Breite und eine für die Länge). Weitere Informationen erhalten Sie in der Dokumentation zu Fusion Tables.
  • Adressen müssen zunächst geocodiert werden. Wählen Sie in der Fusion Tables-Weboberfläche die Option File > Geocode.
  • Geometrische KML-Daten, z. B. Punkte, Linien und Polygone werden unterstützt.

FusionTables-Ebene konstruieren

Mit dem Konstruktor FusionTablesLayer wird eine Ebene aus einer öffentlichen Fusion-Tabelle mithilfe der verschlüsselten ID der Tabelle erstellt. Sie erhalten diese ID, indem Sie in der Fusion Tables-UI den Menüpfad File > About wählen.

Um eine Fusion Tables-Ebene zu Ihrer Karte hinzuzufügen, erstellen Sie die Ebene, und übergeben Sie ein Objekt query mit folgenden Eigenschaften:

  • Eine Eigenschaft select, deren Wert die Bezeichnung der Spalte mit den Standortinformationen enthält. Spaltenbezeichnungen, die Leerzeichen oder reservierte Wörter enthalten oder die nicht mit einem Buchstaben beginnen, sind in Anführungszeichen zu setzen.
  • Eine Eigenschaft from, deren Wert der verschlüsselten ID entspricht.

Setzen Sie dann die Karte (map) der Ebene auf Ihr Objekt Map, wie bei jeder anderen Überlagerung.

Hinweis: Auf ältere Versionen von der Google Maps JavaScript API wird von einer Fusion Table anhand ihrer numerischen ID verwiesen. Obwohl diese Methode weiterhin funktioniert, ist die verschlüsselte ID zu bevorzugen.

Im nachfolgenden Beispiel wird die Anzahl der Tötungsdelikte in Chicago im Jahr 2009 anhand einer öffentlichen Fusion Table dargestellt:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.850033, lng: -87.6500523},
    zoom: 11
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Geocodable address\'',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
    }
  });
  layer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.850033, lng: -87.6500523},
    zoom: 11
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Geocodable address\'',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
    }
  });
  layer.setMap(map);
}

Beispiel einer Fusion Table anzeigen

Fusion Table-Abfragen

Mit Fusion Tables können Sie außerdem leistungsstarke Abfragen erstellen, deren Ergebnisse auf ein bestimmtes Kriterium beschränkt werden können. Abfragen werden mithilfe eines Parameters query aus den FusionTablesLayerOptions definiert:

query: {
  select: locationColumn,
  from: fusionTableID,
  where: constraintClause
}

wobei locationColumn eine vorhandene geocodierte Spalte vom Typ Location ist. Spaltenbezeichnungen in den Feldern select oder where, die Leerzeichen oder reservierte Wörter enthalten oder die nicht mit einem Buchstaben beginnen, sind in Anführungszeichen zu setzen.

Die unterstützten Suchoperatoren sind in der Dokumentation zu Fusion Tables aufgeführt.

Im nachfolgenden Beispiel sind Standorte an der U-Bahnlinie CTA Red Line mit mehr als 5000 Fahrgästen an den Werktagen angezeigt:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.948766, lng: -87.691497},
    zoom: 12
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'address',
      from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
      where: 'ridership > 5000'
    }
  });
  layer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.948766, lng: -87.691497},
    zoom: 12
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'address',
      from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
      where: 'ridership > 5000'
    }
  });
  layer.setMap(map);
}

Beispiel einer Fusion Table anzeigen

Fusion Table-Formate

Der Konstruktor für die Fusion Tables-Ebene akzeptiert auch einen Parameter styles der FusionTablesLayerOptions, um Farbe, Strichstärke und Deckkraft von Linien und Polygonen zu formatieren. Marker-Icons können ebenfalls über die unterstützten Kartenmarker oder Icon-Namendefiniert werden.

Hinweis: Formate können immer nur für eine einzige Fusion Tables-Ebene pro Karte angewandt werden. Sie können maximal fünf Formate für diese Ebene vorgeben.

Für den Parameter styles wird folgende Syntax angewendet:

styles: [{
  where: 'column_name condition',
  markerOptions: {
    iconName: "supported_icon_name"
  },
  polygonOptions: {
    fillColor: "#rrggbb",
    strokeColor: "#rrggbb",
    strokeWeight: "int"
  },
  polylineOptions: {
    strokeColor: "#rrggbb",
    strokeWeight: "int"  }
}, {
  where: ...
  ...
}]

Formate überschreiben jegliche Formatierungen, die in der Fusion Tables-Weboberfläche festgelegt wurden. Die für den Ebenen-Konstruktor bereitgestellten Formate werden dann in der Reihenfolge ihrer Auflistung angewandt; für alle Funktionen, für die mehrere Regeln zutreffen, wird das letzte übereinstimmende Format verwendet.

Um ein Standardformat zu erstellen, dass für alle Funktionen gelten soll, erstellen Sie ein Format ohne where-Klausel:

styles: [{
  markerOptions: {
    iconName: "large_green"
  }
}]

Im nachfolgenden Beispiel wird Folgendes dargestellt:

  • Ein Standardformat, mit dem alle Polygone grün und mit einer Deckkraft von 0,3 eingefärbt werden.
  • Alle Polygone, deren Spalte „birds“ größer ist als 300, werden blau eingefärbt. Sie behalten die Deckkraft, die durch das Standardformat vorgegeben ist.
  • Für alle Polygone, deren Spalte „population“ den Wert 5 übersteigt, ist die Deckkraft auf 1,0 festgelegt. Sie behalten ihre Werte für „fillColor“.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -25, lng: 133},
    zoom: 4
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
    },
    styles: [{
      polygonOptions: {
        fillColor: '#00FF00',
        fillOpacity: 0.3
      }
    }, {
      where: 'birds > 300',
      polygonOptions: {
        fillColor: '#0000FF'
      }
    }, {
      where: 'population > 5',
      polygonOptions: {
        fillOpacity: 1.0
      }
    }]
  });
  layer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -25, lng: 133},
    zoom: 4
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
    },
    styles: [{
      polygonOptions: {
        fillColor: '#00FF00',
        fillOpacity: 0.3
      }
    }, {
      where: 'birds > 300',
      polygonOptions: {
        fillColor: '#0000FF'
      }
    }, {
      where: 'population > 5',
      polygonOptions: {
        fillOpacity: 1.0
      }
    }]
  });
  layer.setMap(map);
}

Beispiel einer Fusion Table anzeigen

Fusion Table-Heatmaps

Fusion Tables bieten auch begrenzte Unterstützung für Heatmaps, wobei die Dichte der übereinstimmenden Standorte durch eine Farbpalette dargestellt wird. Aktuelle Heatmaps verwenden Rot (große Dichte) bis Grün (geringe Dichte), um die relative Verbreitung zugehöriger Standorte darzustellen. Sie aktivieren eine Heatmap, indem Sie den Parameter heatmap in den FusionTablesLayerOptions der Ebene auf enabled: true setzen.

Hinweis: Fusion Table-Heatmaps werden serverseitig wiedergegeben. Wenn Sie die clientseitige Wiedergabe von Heatmaps bevorzugen, verwenden Sie stattdessen die Heatmap-Ebene.

Im nachfolgenden Beispiel werden historische Erdbebendaten mithilfe einer Heatmap dargestellt:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 10, lng: -140},
    zoom: 3
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'location',
      from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
    },
    heatmap: {
      enabled: true
    }
  });

  layer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 10, lng: -140},
    zoom: 3
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'location',
      from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
    },
    heatmap: {
      enabled: true
    }
  });

  layer.setMap(map);
}

Beispiel einer Fusion Table anzeigen

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API