This sample demonstrates how to initialize the map, zoomed in, looking directly down at the surface at a 90-degree angle (also known as a nadir view).
### CSS
```css
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}
gmp-map-3d {
height: 100%;
width: 100%;
}
```
### HTML
```html
3d-map-nadir-view
```
### Try Sample
[JSFiddle.net](https://jsfiddle.net/gh/get/library/pure/googlemaps-samples/js-api-samples/tree/main/dist/samples/3d-map-nadir-view/jsfiddle)
### Clone Sample
Git and Node.js are required to run this sample locally. Follow these [instructions](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
to install Node.js and NPM. You will also need a [Google Maps API key](https://developers.google.com/maps/documentation/javascript/get-api-key.md.txt).
The following commands clone the repository, install dependencies, and copy the environment file.
```javascript
git clone https://github.com/googlemaps-samples/js-api-samples.git
cd js-api-samples
npm i
cp .env.template .env
```
Once you copy the environment file, make sure to open the `.env` file and replace `` with your actual API key before starting the sample.
```javascript
cd samples/3d-map-nadir-view
npm start
```