Los gehts

Plattform auswählen: Android iOS JavaScript

In dieser Anleitung erfahren Sie, wie Sie Ihre erste JavaScript-Anwendung mit 3D Maps in Maps JavaScript erstellen: ein einfaches Fenster mit einer Ansicht der Golden Gate Bridge von oben und den Marin Headlands im Hintergrund.

Nach Abschluss der Anleitung 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, 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 .html Erweiterung (z.B. hello-p3djs.html).

HTML-Seite schreiben

Erstellen Sie zuerst eine Webseite mit einer einfachen HTML-Struktur:

<html>
  <head>
      <title>Map</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. Ersetzen Sie YOUR_KEY durch Ihren API-Schlüssel.

<html>
    <head>
        <title>Map</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps3d"></script>
    </head>
    <body>
        <gmp-map-3d center="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
        </gmp-map-3d>
    </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 dazu auf die Datei doppelklicken, sie in ein Browserfenster ziehen oder mit der rechten Maustaste darauf klicken und „Öffnen mit“ auswählen.
  3. Die Karte sollte in Ihrem Browserfenster angezeigt werden.

Glückwunsch! Sie haben gerade eine Anwendung mit der 3D Maps in Maps JavaScript API von Google geschrieben.

Nächste Schritte

  • Erstellen Sie mit den vorhandenen Beispielen von Google komplexere 3D-Karten.
  • In der Referenzdokumentation erfahren Sie mehr über das volle Potenzial der 3D Maps in Maps JavaScript API.