使ってみる

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

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

環境をセットアップする

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

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

HTML ページを記述する

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

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

JavaScript を追加する

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

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

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

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

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

これで、Maps JavaScript API で Google の Photorealistic 3D Maps を使用するアプリケーションを作成しました。

次のステップ

  • Google の既存のサンプルを使用して、より複雑な 3D 地図を構築する。
  • リファレンス ドキュメントをお読みになり、Maps JavaScript API の Photorealistic 3D マップを最大限に活用してください。