Jetzt starten

In dieser Anleitung zeigen wir Ihnen, wie Sie Ihr erstes JavaScript-Programm mit fotorealistischen 3D-Karten in Maps JavaScript erstellen: ein einfaches Fenster, in dem eine Draufsicht auf die Golden Gate Bridge mit den Marin Headlands im Hintergrund angezeigt wird.

Nach Abschluss des Tutorials sollte in Ihrer Entwicklungsumgebung die folgende Karte angezeigt werden:

Umgebung einrichten

Bevor Sie mit dem Schreiben von Code beginnen, müssen Sie eine Umgebung einrichten, in der JavaScript ausgeführt wird. In dieser Anleitung verwenden Sie einen Webbrowser als Umgebung. Alle modernen Webbrowser unterstützen JavaScript standardmäßig. Sie müssen also keine zusätzliche Software installieren.

  1. Öffnen Sie einen Texteditor Ihrer Wahl.
  2. Erstellen Sie eine neue Datei und speichern Sie sie mit der Erweiterung .html (z. B. hello-p3djs.html).

HTML-Seite schreiben

Zuerst erstellen Sie eine Webseite mit einer einfachen HTML-Struktur:

<!DOCTYPE html>
<html>
<head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
</head>
<body>
    <!-- Your JavaScript code will go here -->
</body>
</html>

JavaScript hinzufügen

Als Nächstes fügen Sie JavaScript-Code hinzu, um die Karte zu laden. Der Code enthält zwei Elemente:

  • gmp-map-3d enthält die Parameter, die zum Initialisieren der Startkameraposition und -ansicht verwendet werden.
  • script enthält den Aufruf zum Laden der Maps JavaScript API. Ersetzen Sie dabei YOUR_KEY durch Ihren eigenen API-Schlüssel.
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>

    <style>
      html,
      body {
        height:100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <gmp-map-3d center="37.841157, -122.551679" range="2000" tilt="75" heading="330"></gmp-map-3d>
    <script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=alpha&libraries=maps3d"></script>
  </body>
</html>

Programm ausführen

So führen Sie das Programm aus und sehen sich die Ausgabe an:

  1. Speichern Sie die erstellte HTML-Datei.
  2. Öffnen Sie die Datei in einem Webbrowser. Sie können dazu doppelt auf die Datei klicken, sie in ein Browserfenster ziehen oder mit der rechten Maustaste darauf klicken und „Mit… öffnen“ auswählen.
  3. Die Karte sollte in Ihrem Browserfenster angezeigt werden.

Glückwunsch! Sie haben gerade ein Programm mit den fotorealistischen 3D-Karten der Google Maps JavaScript API geschrieben.

Nächste Schritte

  • Mit den vorhandenen Beispielen von Google können Sie komplexere 3D-Karten erstellen.
  • In der Referenzdokumentation erfahren Sie, wie Sie das volle Potenzial von 3D-Karten in der Maps JavaScript API nutzen.