Get a Maps Demo Key :Try out select Maps JavaScript API and Places UI Kit features at no cost with a Maps Demo Key—no billing information required.

Control the position of the camera

In the 3D Maps in Maps JavaScript API, you manage the camera's focus using the cameraPosition option.

Key Behaviors:

With center : The latitude and longitude coordinates specify the exact point on the map the camera faces.
With cameraPosition : The camera itself is placed at the coordinates provided during construction. This often makes it difficult to center the view on a specific point of interest.

The following example demonstrates initializing a map using the center option to ensure a specific focal point. The marker indicates the center point provided in the center :

CSS

 gmp-map-3d 
  
 { 
  
 height 
 : 
  
 100 
 % 
 ; 
 } 
 html 
 , 
 body 
  
 { 
  
 height 
 : 
  
 100 
 % 
 ; 
  
 margin 
 : 
  
 0 
 ; 
  
 padding 
 : 
  
 0 
 ; 
 } 
   style 
 . 
 css

HTML

<html>
    <head>
        <title>3D Camera Position</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
    </head>
    <body>
        <gmp-map-3d
            center="40.7860524,-73.9634983,0"
            range="1500"
            tilt="70"
            heading="-150"
            mode="satellite">
            <gmp-marker position="40.7860524,-73.9634983" altitude-mode="clamp-to-ground"></gmp-marker>
        </gmp-map-3d>

        <script
            async
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&v=weekly&libraries=maps3d"></script>
    </body>
</html>  index.html

Try Sample

JSFiddle.net

Field of view and range

You can adjust how much of the map is visible in the viewport using two distinct parameters: range and fov. While they both affect the "zoom" level, they function differently:

range : Controls the physical distance between the camera and the center point. Adjusting this is equivalent to moving the camera closer to or further away from the map.
fov (Field of View): Controls the angle of the camera's lens. A higher value acts like a wide-angle lens, showing more of the periphery, while a lower value acts like a telephoto lens.

The following comparison shows the same map at opposite ends of the fov spectrum. In the left map, the fov is set to 5 (narrow/telephoto); in the right map, it is set to 80 (wide-angle).

A side-by-side comparison of two 3D aerial renderings of the Golden Gate
Bridge. The left side shows a wide bird's-eye view of the entire bridge span and
the Marin Headlands. The right side shows an extreme close-up of a red
suspension tower and the bridge deck at a steep downward
angle.

Control the position of the camera Stay organized with collections Save and categorize content based on your preferences.

CSS

HTML

Try Sample

Field of view and range

Control the position of the camera