使ってみる

プラットフォームを選択: Android iOS JavaScript

このチュートリアルでは、Maps JavaScript で 3D 地図を使用して最初の JavaScript アプリケーション（マリン ヘッドランズを背景にゴールデン ゲート ブリッジの俯瞰ビューを表示する基本的なウィンドウ）を作成する手順を説明します。

チュートリアルを完了すると、開発環境に次の地図が表示されます。

環境をセットアップする

コードの記述を開始する前に、JavaScript を実行する環境をセットアップする必要があります。このチュートリアルでは、環境としてウェブブラウザを使用します。最新のウェブブラウザはすべて JavaScript をサポートしているため、追加のソフトウェアをインストールする必要はありません。

  1. お好みのテキスト エディタを開きます。
  2. 新しいファイルを作成して、拡張子を .html（例: hello-p3djs.html）で保存します。

HTML ページを記述する

まず、ウェブページを基本的な HTML 構造で作成します。

<html>
  <head>
      <title>Map</title>
  </head>
  <body>
      <!-- Your JavaScript code will go here -->
  </body>
</html>

JavaScript を追加する

次に、地図を読み込むためのカスタム HTML 要素を追加します。このコードには、次の 2 つの要素が含まれています。

  • gmp-map-3d。カメラの開始位置とビューを初期化するために使用するパラメータが含まれています。
  • script。Maps JavaScript API を読み込む呼び出しが含まれています。YOUR_KEY は、実際の API キーに置き換えてください。

<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>

アプリケーションを実行する

アプリケーションを実行して出力を確認する手順は次のとおりです。

  1. 作成した HTML ファイルを保存します。
  2. ファイルをウェブブラウザで開きます（ファイルをダブルクリックするか、ブラウザ ウィンドウにドラッグするか、右クリックして [このアプリケーションで開く] を使用します）。
  3. ブラウザ ウィンドウに地図が表示されます。

おめでとうございます！Google の Maps JavaScript API の 3D Maps を使用するアプリケーションを作成しました。

次のステップ