3d-map-nadir-view

Sample code supporting Google Maps Platform JavaScript API documentation. author(s): Geo Developer IX Documentation Team

HTML

<!doctype html>
<!--
 @license
 Copyright 2026 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->

<html>
  <head>
    <title>3d-map-nadir-view</title>

    <script
      async
      src="https://maps.googleapis.com/maps/api/js?loading=async&libraries=maps3d"></script>
  </head>
  <body>
    <gmp-map-3d
      center="37.803,-122.448,0"
      range="2500"
      tilt="0"
      heading="0"
      mode="roadmap">
    </gmp-map-3d>
  </body>
</html>

CSS

/*
 * @license
 * Copyright 2026 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

gmp-map-3d {
  height: 100%;
  width: 100%;
}

JavaScript

'use strict';
/*
 * @license
 * Copyright 2026 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */