Los gehts

In dieser Anleitung erfahren Sie, wie Sie Ihre erste JavaScript-Anwendung mit fotorealistischen 3D-Karten in Maps JavaScript erstellen. Dabei handelt es sich um ein einfaches Fenster, in dem eine Draufsicht der Golden Gate Bridge mit den Marin Headlands im Hintergrund zu sehen ist.

Nachdem Sie die Anleitung abgeschlossen haben, sollten Sie die folgende Karte in Ihrer Entwicklungsumgebung sehen:

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 bieten integrierte JavaScript-Unterstützung, sodass Sie keine zusätzliche Software installieren müssen.

  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 grundlegenden 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 ein benutzerdefiniertes HTML-Element hinzu, um die Karte zu laden. Der Code enthält zwei Elemente:

  • gmp-map-3d enthält die Parameter, die zum Initialisieren der Startposition und -ansicht der Kamera verwendet werden.
  • script enthält den Aufruf zum Laden der Maps JavaScript API. Achten Sie darauf, YOUR_KEY durch Ihren API-Schlüssel zu ersetzen.
<!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 mode="hybrid" 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=beta&libraries=maps3d"></script>
  </body>
</html>

Anwendung ausführen

So führen Sie die Anwendung aus und sehen die Ausgabe:

  1. Speichern Sie die erstellte HTML-Datei.
  2. Öffnen Sie die Datei in einem Webbrowser. Sie können auf die Datei doppelklicken, sie in ein Browserfenster ziehen oder mit der rechten Maustaste klicken und „Öffnen mit“ verwenden.
  3. Die Karte sollte nun in Ihrem Browserfenster angezeigt werden.

Glückwunsch! Sie haben gerade eine Anwendung geschrieben, die die Google Maps JavaScript API für fotorealistische 3D-Karten verwendet.

Nächste Schritte

  • Mithilfe der Beispiele von Google können Sie komplexere 3D-Karten erstellen.
  • In der Referenzdokumentation erfahren Sie, wie Sie das volle Potenzial der fotorealistischen 3D-Karten in der Maps JavaScript API ausschöpfen.