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

Traffic-, Transit- und Bicycling-Ebene

Mit den Traffic-, Transit- und Bicycling-Ebenen wird die Basiskarte modifiziert, um aktuelle Verkehrsbedingungen oder Informationen zu lokalen Transit- und Fahrradrouten anzuzeigen. Diese Ebenen sind in ausgewählten Regionen verfügbar.

  1. Traffic-Ebene
  2. Transit-Ebene
  3. Bicycling-Ebene

Traffic-Ebene

Mit der Google Maps JavaScript API können Sie mithilfe des Objekts TrafficLayer Ihren Karten Echtzeit-Verkehrsinformationen hinzufügen (sofern diese unterstützt werden). Die Verkehrsinformationen werden für den Zeitpunkt bereitgestellt, an dem die Anforderung gestellt wurde.

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

  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.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'), {
    zoom: 13,
    center: {lat: 34.04924594193164, lng: -118.24104309082031}
  });

  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
}

Beispiel anzeigen – Traffic-Ebene

Transit-Ebene

Mit der Google Maps JavaScript API können Sie mithilfe des Objekts TransitLayer das öffentliche Verkehrsnetz einer Stadt auf Ihrer Karte anzeigen. Wenn die Transit-Ebene aktiviert und die Karte um eine Stadt zentriert ist, die Informationen zu öffentlichen Verkehrsmitteln unterstützt, werden auf der Karte die wichtigsten Strecken der öffentlichen Verkehrsmitteln als breite farbige Linien angezeigt. Die Farbe der Linien ist von den Informationen des Betreibers der Verkehrslinien abhängig. Bei Aktivieren der Transit-Ebene wird das Format der Basiskarte so verändert, dass die Routen der öffentlichen Verkehrslinien stärker hervorgehoben werden.

Informationen zu öffentlichen Verkehrsmitteln sind nur für ausgewählte Orte verfügbar. Eine Liste der Orte, für die zurzeit Informationen zu öffentlichen Verkehrsmitteln verfügbar sind, finden Sie hier.

Öffentliche Einrichtungen, die für die Überwachung des öffentlichen Personennahverkehrs eines Ortes zuständig sind, die ihre Daten hinzufügen möchten, erhalten auf der Website Google Transit Partner Program weitere Informationen zu diesem Thema.

Das nachfolgende Beispiel zeigt eine Transit-Ebene, die für eine Karte von London aktiviert ist:

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

  var transitLayer = new google.maps.TransitLayer();
  transitLayer.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'), {
    zoom: 13,
    center: {lat: 51.501904, lng: -0.115871}
  });

  var transitLayer = new google.maps.TransitLayer();
  transitLayer.setMap(map);
}

Beispiel anzeigen – Transit-Ebene

Bicycling-Ebene

Mit der Google Maps JavaScript API können Sie Ihren Karten mithilfe des Objekts BicyclingLayer Informationen für Fahrradfahrer hinzufügen. Mit dem Objekt BicyclingLayer wird eine Ebene mit Fahrradwegen, Tourenvorschlägen für Fahrradfahrer und anderen Überlagerungen für Fahrräder über der jeweiligen Karte wiedergegeben. Außerdem wird durch diese Ebene das Format der Basiskarte so verändert, dass Straßen, die Fahrradtouren unterstützen, hervorgehoben und nicht für Fahrradfahrer geeignete Straßen weniger deutlich dargestellt werden.

Im nachfolgenden Beispiel ist eine Bicycling-Ebene dargestellt, die für eine Karte von Cambridge, Massachusetts, USA, aktiviert ist:

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

  var bikeLayer = new google.maps.BicyclingLayer();
  bikeLayer.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'), {
    zoom: 14,
    center: {lat: 42.3726399, lng: -71.1096528}
  });

  var bikeLayer = new google.maps.BicyclingLayer();
  bikeLayer.setMap(map);
}

Beispiel anzeigen – Bicycling-Ebene

Dunkelgrüne Routen sind für Fahrradfahrer geeignet. Hellgrüne Routen sind Straßen mit ausgewiesenen „Fahrradwegen“. Gestrichelte Routen sind Straßen oder Wege, die ebenfalls für Fahrradfahrer geeignet sind.

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API