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

Konzepte

Entwicklungen für mobile Geräte

Bei der Entwicklung von Google Maps JavaScript API wurde darauf geachtet, dass die API schnell geladen werden kann und problemlos auf mobilen Geräten funktioniert. Insbesondere wurden bei der Entwicklung anspruchsvolle mobile Geräte, z. B. Android- und iOS-Smartphones berücksichtigt. Die Bildschirmgröße von mobilen Geräten ist kleiner als typische Browser auf dem Desktop. Außerdem ist für diese Geräte häufig ein spezielles Verhalten (z. B. das Zusammenführen von zwei Fingern zum Zoomen) typisch. Damit Ihre Anwendung problemlos auf mobilen Geräten funktioniert, empfehlen wir Folgendes:

  • Legen Sie für den Bereich <div>, der Ihre Karte enthält, Breiten- und Höhenattribute von 100% fest. Beachten Sie jedoch, dass bei einigen älteren Browserversionen mit diesen Werten keine gute Darstellung erreicht wird.
  • Zur Erkennung von iPhone- und Android-Geräten überprüfen Sie die Eigenschaft navigator.userAgent im DOM:
    function detectBrowser() {
      var useragent = navigator.userAgent;
      var mapdiv = document.getElementById("map");
    
      if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
        mapdiv.style.width = '100%';
        mapdiv.style.height = '100%';
      } else {
        mapdiv.style.width = '600px';
        mapdiv.style.height = '800px';
      }
    }
    

    Auf diese Weise können Sie das Layout für bestimmte Geräte anpassen, wie hier zum Ändern des Bildschirmplatzes für die einzelnen Geräte vorgenommen.

  • Android- und iOS-Geräte berücksichtigen den folgenden <meta>-Tag:

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    

    Diese Einstellung gibt vor, dass die Karte im Vollbildmodus angezeigt wird und eine Größenänderung durch den Benutzer nicht möglich ist. Beachten Sie, dass für den Safari-Browser auf iPhones dieser <meta>-Tag in das Element <head> der Seite eingefügt werden muss.

Weitere Informationen zur Entwicklung für iPhones finden Sie in der Apple-Entwicklerdokumentation. Weitere Informationen zur Entwicklung für Android-Geräte finden Sie in der Android-Entwicklerdokumentation.

Lokalisierung

Sie können Ihre Google Maps JavaScript API-Anwendung lokalisieren, indem Sie die Standardspracheinstellungen ändern und einen Regionscode angeben, durch den sich das Kartenverhalten entsprechend dem jeweiligen Land oder Gebiet ändert. Informieren Sie sich über die Lokalisierung der Karte.

Versionsverwaltung

Das Google Maps JavaScript API-Team aktualisiert die API regelmäßig mit neuen Funktionen, Fehlerkorrekturen und Leistungsverbesserungen. Sie können angeben, welche Version der API in Ihre Anwendung importiert werden soll, indem Sie dies im Parameter v der Google Maps JavaScript API-Bootstrapanforderung angeben. Weitere Informationen zur Versionsverwaltung.

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API