スタート ガイド

このチュートリアルでは、Maps JavaScript で Photorealistic 3D マップを使用して、最初の 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 を追加する

次に、地図を読み込む JavaScript コードを追加します。このコードには、次の 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 center="37.841157, -122.551679" tilt="67.5"></gmp-map-3d>
    <script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=alpha&libraries=maps3d"></script>
  </body>
</html>

プログラムを実行する

プログラムを実行して出力を確認する手順は次のとおりです。

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

これで完了です。Google の Maps JavaScript API の Photorealistic 3D 地図を使用してプログラムを作成しました。

次のステップ

  • Google の既存のサンプルを使用して、より複雑な 3D 地図エクスペリエンスを構築する。
  • リファレンス ドキュメントでは、Maps JavaScript API の 3D マップの可能性を最大限に引き出すことができます。