Начать

Выберите платформу: Android iOS JavaScript

В этом руководстве вы узнаете, как создать свое первое JavaScript-приложение с использованием 3D-карт в Maps 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, чтобы загрузить карту. Код состоит из двух элементов:

  • 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=GOOGLE_MAPS_API_KEY&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. В окне браузера должна появиться карта.

Поздравляем! Вы только что написали приложение, использующее 3D-карты Google в Maps JavaScript API.

Дальнейшие действия