Google Maps JavaScript API Version 3

Kartentypen

  1. Kartentypen
  2. Basiskartentypen
  3. 45°-Bilder
    1. 45°-Bilder aktivieren und deaktivieren
    2. 45°-Bilder drehen
  4. Kartentypregistrierung ändern
  5. Karten mit benutzerdefinierten Stilen
  6. Benutzerdefinierte Kartentypen
    1. Kartenkoordinaten
      1. Weltkoordinaten
      2. Pixelkoordinaten
      3. Kachelkoordinaten
    2. Die Schnittstelle MapType
      1. Basiskartentypen
      2. Overlay-Kartentypen
      3. Bildkartentypen
  7. Benutzerdefinierte Projektionen
    1. Projektionsoberfläche implementieren
    2. Koordinatenumwandlung in Projektionen
    3. Kachelauswahl in Projektionen

Kartentypen

In diesem Dokument werden die Kartentypen erläutert, die Sie mithilfe des Google Maps JavaScript APIs darstellen können. Das API verwendet ein MapType-Objekt zum Speichern von Daten zu diesen Karten. Ein MapType ist eine Schnittstelle, die die Anzeige und Nutzung der Kartenkacheln und die Übersetzung von Koordinatensystemen von Bildschirmkoordinaten in Weltkoordinaten auf der Karte definiert. Jeder MapType muss ein paar Methoden enthalten, um den Abruf und die Freigabe von Kacheln zu verarbeiten, und Eigenschaften, die dessen visuelles Verhalten definieren.

Die Interna von Kartentypen innerhalb des Google Maps APIs sind ein anspruchsvolles Thema. Die meisten Entwickler können einfach die unten aufgeführten Basiskartentypen verwenden. Sie können aber auch eigene Kartenkacheln definieren, indem Sie benutzerdefinierte Kartentypen verwenden oder die Darstellung vorhandener Kartentypen mithilfe von Karten mit benutzerdefinierten Stilen ändern. Bei der Bereitstellung benutzerdefinierter Kartentypen muss klar sein, wie die Kartentypregistrierung geändert wird.

Basiskartentypen

Es gibt zahlreiche Typen von Karten, die im Google Maps API zur Verfügung stehen. Neben den bekannten "gezeichneten" Straßenkartenkacheln unterstützt das Google Maps API auch andere Kartentypen.

Die folgenden Kartentypen sind im Google Maps API verfügbar:

  • MapTypeId.ROADMAP zeigt die Standard-Straßenkartenansicht.
  • MapTypeId.SATELLITE zeigt Google Earth-Satellitenbilder.
  • MapTypeId.HYBRID zeigt eine Mischung aus der normalen und der Satellitenansicht.
  • MapTypeId.TERRAIN zeigt physische Kartenkacheln, die auf Geländeinformationen basieren.

Sie ändern den durch die Map verwendeten Kartentyp, indem Sie deren Eigenschaft mapTypeId festlegen, und zwar entweder im Konstruktor durch Festlegen des zugehörigen Map options-Objekts oder durch Aufrufen der Methode setMapTypeId() der Karte.

mapTypeId beim Aufbau festlegen:

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
  zoom: 8,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);

mapTypeId dynamisch ändern:

map.setMapTypeId(google.maps.MapTypeId.TERRAIN);

Beachten Sie, dass Sie den Kartentyp der Karte nicht direkt festlegen, sondern stattdessen ihre mapTypeId festlegen, sodass diese über eine ID auf einen MapType verweist. Das Google Maps JavaScript API Version 3 verwendet eine (unten erläuterte) Kartentypregistrierung, um diese Verweise zu verwalten.

45°-Bilder

Das Google Maps API unterstützt spezielles 45°-Bildmaterial für bestimmte Standorte. Dieses hochauflösende Bildmaterial bietet perspektivische Ansichten in jeder Himmelsrichtung (Norden, Süden, Osten und Westen). Diese Bilder sind bei höheren Zoomstufen für unterstützte Kartentypen verfügbar.

Die folgende Abbildung zeigt eine 45°-Perspektive des Boardwalk in Santa Cruz, CA (USA):


Die vorhandenen Kartentypen google.maps.MapTypeId.SATELLITE und google.maps.MapTypeId.HYBRID unterstützten Bildmaterial mit 45°-Perspektiven bei höheren Zoomstufen, sofern verfügbar. Wenn Sie einen Standort zoomen, für den solches Bildmaterial vorhanden ist, ändern diese Kartentypen ihre Ansichten wie folgt:

  • Ein vorhandenes Schwenksteuerelement auf einer Karte ändert sich, wobei ein Kompassrad um die vorhandenen Navigationsbedienelemente herum hinzugefügt wird. Dieser Kompass ermöglicht Ihnen, die Richtung von 45°-Bildern durch Ziehen des Rades zu ändern, wobei die Richtung an der nächsten unterstützten Richtung einrastet, die Bildmaterial enthält.
  • Ein Drehsteuerelement wird zwischen den vorhandenen Schwenk- und Zoomsteuerelementen angezeigt, mit dem Sie Bilder in die unterstützten Richtungen drehen können. Das Drehsteuerelement erlaubt nur das Drehen im Uhrzeigersinn.
  • Das Satelliten- oder Hybridbild wird durch ein perspektivisches 45°-Bild ersetzt, das am aktuellen Standort zentriert ist. Standardmäßig sind solche Ansichten nach Norden ausgerichtet. Beim Auszoomen kehren Sie zum Standardsatelliten- oder -hybridbild zurück.
  • Das Steuerelement MapType aktiviert ein Untermenü-Steuerelement zum Umschalten der Anzeige des 45°-Bildmaterials.

Beim Auszoomen eines Kartentyps, auf dem 45°-Bildmaterial angezeigt wird, werden alle diese Änderungen rückgängig gemacht und die ursprünglichen Kartentypen wiederhergestellt.

Google fügt kontinuierlich 45°-Bildmaterial für neue Städte hinzu. Aktuelle Informationen finden Sie in der Liste des 45°-Bildmaterials in Google Maps.

45°-Bilder aktivieren und deaktivieren

Durch Aufrufen von setTilt(0) beim Map-Objekt können Sie 45°-Bildmaterial deaktivieren. Rufen Sie setTilt(45) auf, um perspektivisches 45°-Bildmaterial für unterstützte Kartentypen zu aktivieren.

Die Methode getTilt() der Map entspricht stets der aktuellen auf der Karte dargestellten Neigung. Wenn Sie eine Neigung für eine Karte festlegen und diese Neigung später entfernen, z. B. durch Auszoomen der Karte, gibt die Methode getTilt() der Karte 0 zurück.

Das folgende Beispiel zeigt eine 45°-Ansicht der Innenstadt von Portland, OR (USA):

var mapOptions = {
  center: new google.maps.LatLng(37.339085, -121.8914807),
  zoom: 18,
  mapTypeId: 'satellite'
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);

Beispiel ansehen (aerial-simple.html)

45°-Bilder drehen

Das 45°-Bildmaterial besteht aus einer Sammlung von Bildern für jede Himmelsrichtung (Norden, Süden, Osten und Westen). Sobald auf Ihrer Karte 45°-Bildmaterial angezeigt wird, können Sie dieses in einer der Himmelsrichtungen ausrichten. Hierzu rufen Sie setHeading() für das Map-Objekt auf und übergeben einen als Grad von Norden ausgedrückten Zahlenwert.

Das folgende Beispiel zeigt ein Luftbild und dreht die Karte alle 3 Sekunden, wenn auf die Schaltfläche geklickt wird:

var map;
function initialize() {

  var mapOptions = {
    center: new google.maps.LatLng(45.518970, -122.672899),
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  map.setTilt(45);
  map.setHeading(90);
}

function autoRotate() {
  // Determine if we're showing aerial imagery
  if (map.getTilt() != 0) {
    map.setHeading(180);
    setTimeout('map.setHeading(270)',3000);
    setTimeout('map.setHeading(0)',6000);
    setTimeout('map.setHeading(90)',9000);
  }
}

Beispiel ansehen (aerial-rotation.html)

Kartentypregistrierung ändern

Die mapTypeId einer Karte ist eine Zeichenfolgen-ID, die dazu dient, einem MapType einen eindeutigen Wert zuzuweisen. Jedes Map-Objekt hat ein MapTypeRegistry, das die Sammlung verfügbarer MapType-Elemente für die betreffende Karte enthält. Diese Registrierung dient beispielsweise zum Auswählen der Kartentypen, die im Steuerelement MapType der Karte verfügbar sind.

Lesen Sie die Kartentypregistrierung nicht direkt aus. Ändern Sie stattdessen die Registrierung, indem Sie benutzerdefinierte Kartentypen hinzufügen und ihnen eine beliebige Zeichenfolgen-ID zuweisen. Basiskartentypen können nicht geändert werden. Es ist allerdings möglich, sie aus der Karte zu entfernen, indem Sie die Darstellung der der Karte zugeordneten mapTypeControlOptions ändern.

Der folgende Code legt fest, dass die Karte nur zwei Kartentypen in den Karten-mapTypeControlOptions anzeigt und er ändert die Registrierung, sodass dieser Kennzeichner der eigentlichen Implementierung der Schnittstelle MapType zugeordnet ist. Hinweis: Die Erstellung des benutzerdefinierten Kartentyps selbst im vorherigen Code haben wir bewusst nicht dokumentiert. Informationen zum Aufbau eines Kartentyps finden Sie unten unter Karten mit benutzerdefinierten Stilen oder Benutzerdefinierte Kartentypen.

// Modify the control to only display two maptypes, the
// default ROADMAP and the custom 'mymap'.
// Note that because this is simply an association, we
// don't need to modify the MapTypeRegistry beforehand.

var MY_MAPTYPE_ID = 'mymaps';

var mapOptions = {
  zoom: 12,
  center: brooklyn,
  mapTypeControlOptions: {
     mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
  },
  mapTypeId: MY_MAPTYPE_ID
};

// Create our map. This creation will implicitly create a
// map type registry.
map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);

// Create your custom map type using your own code.
// (See below.)
var myMapType = new MyMapType();

// Set the registry to associate 'mymap' with the
// custom map type we created, and set the map to
// show that map type.
map.mapTypes.set(MY_MAPTYPE_ID, myMapType);

Karten mit benutzerdefinierten Stilen

Mithilfe von StyledMapType können Sie die Darstellung der Standardbasiskarten von Google anpassen, indem Sie zum Beispiel Straßen, Parks und bebaute Flächen in einem anderen visuellen Stil angeben als beim Standardkartentyp.

Informationen zum StyledMapType finden Sie im Abschnitt zu Karten mit benutzerdefinierten Stilen im vorliegenden Entwicklerhandbuch.

Benutzerdefinierte Kartentypen

Das Google Maps JavaScript API Version 3, unterstützt die Anzeige und Verwaltung benutzerdefinierter Kartentypen, sodass Sie eigene Kartenbilder oder Kachel-Overlays implementieren können.

Im Version 3-API sind mehrere mögliche Kartentypimplementierungen vorhanden:

  • Standardkachelsätze, die aus Bildern bestehen, die zusammen vollständige kartografische Karten bilden. Diese Kachelsätze werden auch als Basiskartentypen bezeichnet. Diese Kartentypen verhalten sich wie die vorhandenen Kartentypen: ROADMAP, SATELLITE, HYBRID und TERRAIN. Sie können einen benutzerdefinierten Kartentyp zum Array mapTypes einer Karte hinzufügen, damit die Benutzeroberfläche innerhalb des Google Maps APIs Ihren benutzerdefinierten Kartentyp als Standardkartentyp behandelt und ihn beispielsweise in das Steuerelement MapType einfügt.
  • Bildkachel-Overlays, die auf vorhandenen Basiskartentypen eingeblendet werden. Im Allgemeinen werden diese Kartentypen verwendet, um einen vorhandenen Kartentyp zu erweitern und zusätzliche Informationen anzuzeigen. Sie sind häufig auf bestimmte Standorte und/oder Zoomstufen beschränkt. Beachten Sie, dass diese Kacheln transparent sein können, sodass Sie Funktionen zu vorhandenen Karten hinzufügen können.
  • Kartentypen, die nicht aus Bildmaterial bestehen, die Ihnen die Änderung der dargestellten Kartendaten auf unterster Ebene ermöglichen.

Jede dieser Optionen erfordert die Erstellung einer Klasse, die die Schnittstelle MapType implementiert. Zusätzlich bietet die Klasse ImageMapType integrierte Verhaltensweisen, um die Erstellung von MapTypeen mit Bildmaterial zu vereinfachen.

Bevor wir Klassen erklären, die MapType implementieren, muss klar sein, wie Google Maps Koordinaten ermittelt und entscheidet, welche Teile der Karte angezeigt werden. Eine ähnliche Logik muss für alle Basis- oder Overlay-MapType-Elemente implementiert werden.

Kartenkoordinaten

Es gibt mehrere Koordinatensysteme, die das Google Maps API verwendet:

  • Längen- und Breitengradwerte, die eine Position auf der Welt eindeutig definieren. Google verwendet den Standard World Geodetic System WGS84.
  • Weltkoordinaten, die eine Position auf der Karte eindeutig definieren
  • Kachelkoordinaten, die eine bestimmte Kachel auf der Karte bei einer bestimmen Zoomstufe definieren

Weltkoordinaten

Wenn das Google Maps API einen Standort auf der Welt in einen Standort auf der Karte (dem Bildschirm) übersetzten muss, müssen zuerst die Breiten- und Längengradwerte in eine "Welt"-Koordinate übersetzt werden. Diese Übersetzung wird mithilfe einer Kartenprojektion vorgenommen. Google Maps verwendet für diesen Zweck die Mercator-Projektion. Sie können auch eine eigene Projektion definieren. Hierfür implementieren Sie die Schnittstelle google.maps.Projection. Beachten Sie, dass Schnittstellen in Version 3-Klassen keine Klassen sind, von denen Sie Klassen ableiten (Unterklassen), sondern lediglich Spezifikationen für Klassen, die Sie selbst definieren.

Bei der Berechnung der Pixelkoordinaten (siehe unten) setzen wir aus praktischen Gründen voraus, dass eine Karte mit Zoomstufe 0 eine einzelne Kachel der Basiskachelgröße ist. Anschließend definieren wir Weltkoordinaten relativ zu den Pixelkoordinaten bei Zoomstufe 0 und verwenden die Projektion, um Breiten- und Längengradwerte in Pixelpositionen auf dieser Basiskachel zu konvertieren. Diese Weltkoordinate ist ein Gleitkommawert, der vom Ursprung der Projektion der Karte bis zum betreffenden Standort gemessen wird. Beachten Sie, dass dieser Gleitkommawert viel genauer sein kann als die aktuelle Auflösung des angezeigten Kartenbildes. Eine Weltkoordinate ist, anders ausgedrückt, unabhängig von der aktuellen Zoomstufe.

Weltkoordinaten in Google Maps werden vom Ursprung der Mercator-Projektion (der nordwestlichen Ecke der Karte bei 180 Grad Länge und ungefähr 85 Grad Breite) gemessen und nehmen in der x-Richtung nach Osten (rechts) und in der y-Richtung nach Süden (unten) hin zu. Da die allgemeine Mercator-Google Maps-Kachel 256 x 256 Pixel umfasst, ist der nutzbare Weltkoordinatenraum {0-256}, {0-256} (siehe unten).

Beachten Sie, dass eine Mercator-Projektion eine finite Breite hat, was die Längengrade betrifft, aber eine infinite Höhe, was die Breitengrade betrifft. Wir schneiden Basiskartenbilder mithilfe der Mercator-Projektion bei ungefähr85 Grad ab, um die resultierende Karte quadratisch zu machen, was die Logik für die Kachelauswahl vereinfacht. Beachten Sie, dass eine Projektion Weltkoordinaten außerhalb des nutzbaren Koordinatenraums der Basiskarte erzeugen kann, wenn Sie beispielsweise sehr nahe an den Polen zeichnen.

Pixelkoordinaten

Weltkoordinaten entsprechen absoluten Positionen auf einer gegebenen Projektion, wir müssen diese jedoch in Pixelkoordinaten übersetzen, um den Pixelversatz bei einer gegebenen Zoomstufe zu ermitteln. Diese Pixelkoordinaten werden anhand der folgenden Formel berechnet:

pixelCoordinate = worldCoordinate * 2zoomLevel

Beachten Sie bei der obigen Gleichung, dass jede zunehmende Zoomstufe sowohl in x- als auch y-Richtung doppelt so groß ist. Daher hat jede höhere Zoomstufe eine viermal höhere Auflösung als die vorherige Stufe. Beispiel: Bei Zoomstufe 1 besteht die Karte aus vier 256 x 256-Pixel-Kacheln, was einen Pixelraum von 512 x 512 ergibt. Bei Zoomstufe 19 kann jedes x- und y-Pixel auf der Karte unter Verwendung eines Werts zwischen 0 und 256 * 219 referenziert werden.

Da die Weltkoordinaten auf der Kachelgröße der Karte basieren, gibt der ganzzahlige Teil einer Pixelkoordinate das exakte Pixel an diesem Standort bei der aktuellen Zoomstufe an. Beachten Sie, dass die Pixelkoordinaten für Zoomstufe 0 den Weltkoordinaten entsprechen.

Jetzt haben wir das Mittel, um jeden Standort auf der Karte bei jeder Zoomstufe genau anzugeben. Das Google Maps API baut einen Darstellungsbereich auf Basis des Mittelpunkts der Zoomstufe (als LatLng) und der Größe des Container-DOM-Elements auf und übersetzt diesen Markierungsrahmen in Pixelkoordinaten. Das API ermittelt dann logisch alle Kartenkacheln, die innerhalb der angegebenen Pixelbegrenzungen liegen. Jede dieser Kartenkacheln wird über Kartenkacheln referenziert, die die Darstellung von Kartenbildmaterial stark vereinfachen.

Kachelkoordinaten

Das Google Maps API kann nicht alle nützlichen Kartenbilder bei höheren Zoomstufen laden. Stattdessen teilt das API das Bildmaterial auf jeder Zoomstufe in einen Satz von Kartenkacheln auf, die logisch in einer Reihenfolge angeordnet werden, die die Anwendung versteht. Wenn eine Karte zu einem neuen Standort oder in eine neue Zoomstufe gescrollt wird, ermittelt das Google Maps API anhand der Pixelkoordinaten, welche Kacheln benötigt werden, und übersetzt diesen Wert in einen Satz abzurufender Kacheln. Diese Kachelkoordinaten werden anhand eines Schemas zugeordnet, das es von der Logik her einfach macht, zu ermitteln, welche Kachel das Bildmaterial für einen gegebenen Punkt enthält.

Die Kacheln in Google Maps werden vom selben Ursprung aus nummeriert wie dem der Pixel. Bei der Google-Implementierung der Mercator-Projektion ist die Ursprungskachel immer in der nordwestlichen Ecke der Karte, wobei die x-Werte von Westen nach Osten zunehmen und die y-Werte vom Norden nach Süden abnehmen. Die Kacheln werden mithilfe von x,y-Koordinaten aus diesem Ursprung indexiert. Beispiel: Bei Zoomstufe 2 ist die Erde in 16 Kacheln unterteilt. Jede Kachel kann durch ein eindeutiges x,y-Paar referenziert werden:

Beachten Sie, dass Sie beim Dividieren der Pixelkoordinaten durch die Kachelgröße und Übernehmen des ganzzahligen Teils als Ergebnis als Nebenprodukt die Kachelkoordinate bei der aktuellen Zoomstufe erhalten.

Im folgenden Beispiel werden Koordinaten, LatLng-Werte, Weltkoordinaten, Pixelkoordinaten und Kachelkoordinaten, für Chicago, IL (USA), in verschiedenen Zoomstufen angezeigt:

Beispiel ansehen (map-coordinates.html)

Die Schnittstelle MapType

Benutzerdefinierte Kartentypen müssen die Schnittstelle MapType implementieren. Diese Schnittstelle gibt bestimmte Eigenschaften und Methoden an, die es dem API erlauben, Anfragen an Ihre Kartentypen zu starten, wenn das API ermittelt, dass es Kartenkacheln innerhalb des aktuellen Darstellungsbereichs und der aktuellen Zoomstufe anzeigen muss. Sie verarbeiten diese Anfragen, um zu entscheiden, welche Kachel geladen werden soll.

Hinweis: Sie können eine eigene Klasse erstellen, um diese Schnittstelle zu implementieren, oder bei kompatiblem Bildmaterial die Klasse ImageMapType verwenden, die diese Schnittstelle bereits implementiert.

Klassen, die die Schnittstelle MapType implementieren, setzen voraus, dass Sie die folgenden Eigenschaften definieren und mit Werten füllen:

  • tileSize ist erforderlich und gibt die Größe der Kachel an (Typ google.maps.Size). Die Kacheln müssen rechteckig, aber nicht unbedingt quadratisch sein.
  • maxZoom ist erforderlich und gibt die maximale Zoomstufe an, mit der Kacheln dieses Kartentyps angezeigt werden sollen.
  • minZoom ist erforderlich und gibt die minimale Zoomstufe an, mit der Kacheln dieses Kartentyps angezeigt werden sollen. Standardmäßig ist dieser Wert 0, was bedeutet, dass keine minimale Zoomstufe vorhanden ist.
  • name ist optional und gibt den Namen dieses Kartentyps an. Diese Eigenschaft ist nur erforderlich, wenn dieser Kartentyp innerhalb eines MapType-Steuerelements auswählbar sein soll. Siehe MapType-Steuerelemente hinzufügen unten.
  • alt ist optional und gibt den alternativen Text für diesen Kartentyp an, der als Hover-Text dargestellt wird. Diese Eigenschaft ist nur erforderlich, wenn dieser Kartentyp innerhalb eines MapType-Steuerelements auswählbar sein soll. Siehe MapType-Steuerelemente hinzufügen unten.

Klassen, die die Schnittstelle MapType implementieren, müssen darüber hinaus die folgenden Methoden implementieren:

  • getTile() ist erforderlich und wird aufgerufen, wenn das API ermittelt, dass auf der Karte neue Kacheln für den angegebenen Darstellungsbereich angezeigt werden müssen. Die Methode getTile() muss die folgende Signatur haben:

    getTile(tileCoord:Point,zoom:number,ownerDocument:Document):Node

    Das API ermittelt, ob getTile() aufgerufen werden muss, und zwar auf Basis der Eigenschaften tileSize, minZoom und maxZoom des MapType-Elements und des aktuellen Darstellungsbereichs und der aktuellen Zoomstufe der Karte. Der Handler für diese Methode sollte ein HTML-Element zurückgeben, wenn ihm eine Koordinate, Zoomstufe und ein DOM-Element übergeben wird, an das das Kachelbild angehängt werden soll.

  • releaseTile() ist erforderlich und wird aufgerufen, wenn das API ermittelt, dass auf der Karte eine Kachel entfernt werden muss, die nicht mehr sichtbar ist. Diese Methode muss die folgende Signatur haben:

    releaseTile(tile:Node)

    Sie sollten das Entfernen von Elementen, die Kartenkacheln beim Hinzufügen zur Karte zugeordnet wurden, verarbeiten. Wenn Sie beispielsweise Kartenkachel-Overlays Ereignis-Listener hinzugefügt haben, sollten Sie diese hier entfernen.

Die Methode getTile() dient als zentrale Schaltstelle, um zu ermitteln, welche Kacheln in einem bestimmten Darstellungsbereich geladen werden sollen.

Basiskartentypen

Kartentypen, die Sie auf diese Weise aufbauen, können eigenständig sein oder mit anderen Kartentypen als Overlays kombiniert werden. Eigenständige Kartentypen werden als Basiskartentypen bezeichnet. Sie können das API solche benutzerdefinierten MapTypes wie andere vorhandene Basiskartentypen (ROADMAP oder TERRAIN) behandeln lassen. Fügen Sie dazu Ihren eigenen MapType zur Eigenschaft mapTypes der Map hinzu. Diese Eigenschaft hat den Typ MapTypeRegistry.

Mit dem folgenden Code wird ein Basis-MapType erstellt, um die Kachelkoordinaten einer Karte anzuzeigen, und ein Umriss der Kacheln gezeichnet:

function CoordMapType() {
}

CoordMapType.prototype.tileSize = new google.maps.Size(256,256);
CoordMapType.prototype.maxZoom = 19;

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  div.innerHTML = coord;
  div.style.width = this.tileSize.width + 'px';
  div.style.height = this.tileSize.height + 'px';
  div.style.fontSize = '10';
  div.style.borderStyle = 'solid';
  div.style.borderWidth = '1px';
  div.style.borderColor = '#AAAAAA';
  return div;
};

CoordMapType.prototype.name = "Tile #s";
CoordMapType.prototype.alt = "Tile Coordinate Map Type";

var map;
var chicago = new google.maps.LatLng(41.850033,-87.6500523);
var coordinateMapType = new CoordMapType();

function initialize() {
  var mapOptions = {
    zoom: 10,
    center: chicago,
    mapTypeControlOptions: {
      mapTypeIds: ['coordinate', google.maps.MapTypeId.ROADMAP],
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);

  // Now attach the coordinate map type to the map's registry.
  map.mapTypes.set('coordinate',coordinateMapType);

  // We can now set the map to use the 'coordinate' map type.
  map.setMapTypeId('coordinate');
}

Beispiel ansehen (maptype-base.html)

Overlay-Kartentypen

Manche Kartentypen sind zur Verwendung auf vorhandenen Kartentypen konzipiert. Solche Kartentypen können transparente Ebenen haben, die interessante Orte angeben oder dem Nutzer zusätzliche Daten anzeigen. Die Google-Ebene "Verkehrslage" ist ein Beispiel für einen solchen Kartentyp.

In diesen Fällen soll der Kartentyp nicht als separate Einheit behandelt werden. Stattdessen können Sie den Kartentyp direkt zu einem vorhandenen MapType hinzufügen. Hierfür verwenden Sie die Eigenschaft overlayMapTypes der Map. Diese Eigenschaft enthält ein MVCArray von MapType-Elementen. Alle Kartentypen (Basis und Overlay) werden innerhalb der mapPane-Ebene gerendert. Overlay-Kartentypen werden über allen grundlegenden Karten angezeigt, an die sie angehängt sind, und zwar in der Reihenfolge, in der sie im Array Map.overlayMapTypes vorkommen.

Das folgende Beispiel ist identisch mit dem vorherigen, außer dass wir einen Kachel-Overlay-MapType über dem Kartentyp ROADMAP erstellt haben:

function CoordMapType(tileSize) {
  this.tileSize = tileSize;
}

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  div.innerHTML = coord;
  div.style.width = this.tileSize.width + 'px';
  div.style.height = this.tileSize.height + 'px';
  div.style.fontSize = '10';
  div.style.borderStyle = 'solid';
  div.style.borderWidth = '1px';
  div.style.borderColor = '#AAAAAA';
  return div;
};

var map;
var chicago = new google.maps.LatLng(41.850033,-87.6500523);

function initialize() {
  var mapOptions = {
    zoom: 10,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);

  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  map.overlayMapTypes.insertAt(0, new CoordMapType(new google.maps.Size(256, 256)));
}

Beispiel ansehen (maptype-overlay.html)

Bildkartentypen

Die Implementierung eines MapType als Basiskartentyp kann zeit- und arbeitsaufwändig sein. Das API stellt eine spezielle Klasse zur Verfügung, die die Schnittstelle MapType für die meisten gängigen Kartentypen implementiert: Kartentypen, die aus Kacheln bestehen, welche wiederum aus einzelnen Bilddateien bestehen.

Diese Klasse ImageMapType wird mithilfe einer ImageMapTypeOptions-Objektspezifikation aufgebaut, die die folgenden erforderlichen Eigenschaften definiert:

  • tileSize ist erforderlich und gibt die Größe der Kachel an (Typ google.maps.Size). Die Kacheln müssen rechteckig, aber nicht unbedingt quadratisch sein.
  • getTileUrl ist erforderlich und gibt die Funktion an. Wird üblicherweise als integriertes Funktionsliteral angegeben und verarbeitet die Auswahl der richtigen Bildkachel auf Basis angegebener Weltkoordinaten und Zoomstufe.

Der folgende Code implementiert einen Basis-ImageMapType mithilfe der Mondkacheln von Google. Das Beispiel nutzt eine Normalisierungsfunktion, um sicherzustellen, dass sich die Kacheln auf der x-Achse, aber nicht auf der y-Achse der Karte wiederholen.

var moonTypeOptions = {
  getTileUrl: function(coord, zoom) {
      var normalizedCoord = getNormalizedCoord(coord, zoom);
      if (!normalizedCoord) {
        return null;
      }
      var bound = Math.pow(2, zoom);
      return "http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw" +
          "/" + zoom + "/" + normalizedCoord.x + "/" +
          (bound - normalizedCoord.y - 1) + ".jpg";
  },
  tileSize: new google.maps.Size(256, 256),
  maxZoom: 9,
  minZoom: 0,
  radius: 1738000,
  name: "Moon"
};

var moonMapType = new google.maps.ImageMapType(moonTypeOptions);

function initialize() {
  var myLatlng = new google.maps.LatLng(0, 0);
  var mapOptions = {
    center: myLatlng,
    zoom: 1,
    streetViewControl: false,
    mapTypeControlOptions: {
      mapTypeIds: ["moon"]
    }
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);
  map.mapTypes.set('moon', moonMapType);
  map.setMapTypeId('moon');
}

// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
  var y = coord.y;
  var x = coord.x;

  // tile range in one direction range is dependent on zoom level
  // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
  var tileRange = 1 << zoom;

  // don't repeat across y-axis (vertically)
  if (y < 0 || y >= tileRange) {
    return null;
  }

  // repeat across x-axis
  if (x < 0 || x >= tileRange) {
    x = (x % tileRange + tileRange) % tileRange;
  }

  return {
    x: x,
    y: y
  };
}

Beispiel ansehen (maptype-image.html)

Projektionen

Die Erde ist eine dreidimensionale Kugel (annähernd), während eine Karte eine flache zweidimensionale Oberfläche ist. Die Karte, die Sie innerhalb des Google Maps APIs sehen, ist wie jede flache Karte der Erde eine Projektion dieser Kugel auf eine flache Oberfläche. Eine Projektion ist, einfach ausgedrückt, eine Zuordnung von Breiten-/Längengradwerten zu Koordinaten auf der Karte der Projektion.

Projektionen im Google Maps API müssen die Schnittstelle Projection implementieren. Eine Projection-Implementierung muss nicht nur eine Zuordnung von einem Koordinatensystem zu einem anderen bereitstellen, sondern auch eine bidirektionale Zuordnung. Es muss also definiert werden, wie von Google Earth-Koordinaten (LatLng) in das Weltkoordinatensystem von Projection und umgekehrt übersetzt wird. Google Maps verwendet die Mercator-Projektion zum Erstellen der Karten aus geografischen Daten und Konvertieren von Ereignissen auf der Karte in geografische Koordinaten. Sie erhalten diese Projektion durch Aufrufen von getProjection() auf der Map (oder eines der Standard-Basis-MapType-Elemente.) In den meisten Fällen genügt diese Standard-Projection, Sie können aber auch eigene Projektionen definieren und verwenden.

Projektion implementieren

Bei der Implementierung einer benutzerdefinierten Projektion müssen ein paar Dinge definiert werden:

  • die Formel zur Kartografierung von Breiten- und Längengradkoordinaten in eine kartesische Ebene und umgekehrt. Die Schnittstelle Projection unterstützt nur Transformationen in geradlinige Koordinaten.
  • die Basiskachelgröße. Alle Kacheln müssen rechteckig sein.
  • die "Weltgröße" einer Karte unter Verwendung der Basiskachel mit der Zoomstufe auf 0 gesetzt. Beachten Sie, dass bei Karten, die aus einer Kachel mit Zoomstufe 0 bestehen, die Weltgröße und die Basiskachelgröße identisch sind.

Umwandlung von Koordinaten in Projektionen

Jede Projektion bietet zwei Methoden zum Übersetzen zwischen diesen beiden Koordinatensystemen, damit Sie eine Konvertierung zwischen geografischen und Weltkoordinaten vornehmen können:

  • Die Methode Projection.fromLatLngToPoint() konvertiert einen LatLng-Wert in eine Weltkoordinate. Diese Methode dient zum Positionieren von Overlays auf der Karte und zum Positionieren der Karte selbst.
  • Die Methode Projection.fromPointToLatLng() konvertiert eine Weltkoordinate in einen LatLng-Wert. Diese Methode dient zum Konvertieren von Ereignissen wie Klicks, die auf einer Karte geschehen, in geografische Koordinaten.

Google Maps setzt voraus, dass Projektionen geradlinig sind.

Eine Projektion kann im Allgemeinen in zwei Fällen verwendet werden: um eine Karte der Welt oder eine Karte eines lokalen Gebiets zu erstellen. In erstem Fall sollten Sie sich vergewissern, dass Ihre Projektion ebenfalls geradlinig ist und normal zu allen Breitengraden steht. Einige Projektionen (speziell konische Projektionen) können "lokal normal" sein (d. h. nach Norden zeigen), jedoch vom geografischen Norden abweichen, beispielsweise, wenn der Rest der Karte relativ zu einem Referenzlängengrad positioniert ist. Sie können eine solche Projektion lokal verwenden, beachten Sie jedoch, dass die Projektion nicht genau sein kann und Umwandlungsfehler sich verstärken, je weiter weg Sie sich vom Referenzlängengrad bewegen.

Kachelauswahl in Projektionen

Projektionen sind nicht nur für die Festlegung von Standorten oder Overlays hilfreich, sondern auch für die Positionierung der Kartenkacheln selbst. Das Google Maps API stellt Basiskarten mithilfe einer MapType-Schnittstelle dar, die sowohl eine Eigenschaft projection zur Erkennung der Kartenprojektion als auch eine Methode getTile() zum Abrufen der Kartenkacheln basierend auf Kachelkoordinatenwerten angeben muss. Kachelkoordinaten basieren auf der Basiskachelgröße, die rechteckig sein muss, und der "Weltgröße" Ihrer Karte. Diese ist die Pixelgröße Ihrer Kartenwelt auf Zoomstufe 0. Bei Karten, die aus einer Kachel mit Zoomstufe 0 bestehen, sind die Kachelgröße und die Weltgröße identisch.

Sie definieren die Basiskachelgröße in der Eigenschaft tileSize innerhalb Ihres MapType. Die Weltgröße definieren Sie implizit in den Methoden fromLatLngToPoint() und fromPointToLatLng() Ihrer Projektion.

Da die Bildauswahl auf diesen übergebenen Werten beruht, ist es empfehlenswert, auf übergebenen Werten basierende Bilder zu benennen, die programmatisch ausgewählt werden, wie zum Beispiel map_zoom_tileX_tileY.png.

Im folgenden Beispiel wird ein ImageMapType festgelegt, der eine Gall-Peters-Projektion verwendet:

// Note: this value is exact as the map projects a full
// 360 degrees of longitude.
var GALL_PETERS_RANGE_X = 800;

// Note: this value is inexact as the map is cut off at ~ +/- 83 degrees.
// However, the polar regions produce very little increase in Y range, so
// we will use the tile size.
var GALL_PETERS_RANGE_Y = 510;

function degreesToRadians(deg) {
  return deg * (Math.PI / 180);
}

function radiansToDegrees(rad) {
  return rad / (Math.PI / 180);
}

function GallPetersProjection() {

  // Using the base map tile, denote the lat/lon of the equatorial origin.
  this.worldOrigin_ = new google.maps.Point(GALL_PETERS_RANGE_X * 400 / 800,
      GALL_PETERS_RANGE_Y / 2);

  // This projection has equidistant meridians, so each longitude
  // degree is a linear mapping.
  this.worldCoordinatePerLonDegree_ = GALL_PETERS_RANGE_X / 360;

  // This constant merely reflects that latitudes
  // vary from +90 to -90 degrees.
  this.worldCoordinateLatRange = GALL_PETERS_RANGE_Y / 2;
};

GallPetersProjection.prototype.fromLatLngToPoint = function(latLng) {

  var origin = this.worldOrigin_;
  var x = origin.x + this.worldCoordinatePerLonDegree_ * latLng.lng();

  // Note that latitude is measured from the world coordinate origin
  // at the top left of the map.
  var latRadians = degreesToRadians(latLng.lat());
  var y = origin.y - this.worldCoordinateLatRange * Math.sin(latRadians);

  return new google.maps.Point(x, y);
};

GallPetersProjection.prototype.fromPointToLatLng = function(point, noWrap) {

  var y = point.y;
  var x = point.x;

  if (y < 0) {
    y = 0;
  }
  if (y >= GALL_PETERS_RANGE_Y) {
    y = GALL_PETERS_RANGE_Y;
  }

  var origin = this.worldOrigin_;
  var lng = (x - origin.x) / this.worldCoordinatePerLonDegree_;
  var latRadians = Math.asin((origin.y - y) / this.worldCoordinateLatRange);
  var lat = radiansToDegrees(latRadians);
  return new google.maps.LatLng(lat, lng, noWrap);
};

function initialize() {
  var gallPetersMap;

  var gallPetersMapType = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
      var numTiles = 1 << zoom;

      // Don't wrap tiles vertically.
      if (coord.y < 0 || coord.y >= numTiles) {
        return null;
      }

      // Wrap tiles horizontally.
      var x = ((coord.x % numTiles) + numTiles) % numTiles;

      // For simplicity, we use a tileset consisting of 1 tile at zoom level 0
      // and 4 tiles at zoom level 1.
      var baseURL = 'images/';
      baseURL += 'gall-peters_' + zoom + '_' + x + '_' + coord.y + '.png';
      return baseURL;
    },
    tileSize: new google.maps.Size(800, 512),
    minZoom: 0,
    maxZoom: 1,
    name: 'Gall-Peters'
  });

  gallPetersMapType.projection = new GallPetersProjection();

  var mapOptions = {
    zoom: 0,
    center: new google.maps.LatLng(0,0)
  };
  gallPetersMap = new google.maps.Map(document.getElementById("gallPetersMap"),
      mapOptions);

  gallPetersMap.mapTypes.set('gallPetersMap', gallPetersMapType);
  gallPetersMap.setMapTypeId('gallPetersMap');
  gallPetersMap.overlayMapTypes.insertAt(0, gallPetersMapType);
}

Beispiel ansehen (map-projection-simple.html)

Authentifizierung erforderlich

Dazu müssen Sie in Google+ angemeldet sein.

Anmeldung...

Google Developers braucht hierfür Ihre Erlaubnis.