Controlar la posición de la cámara

En los mapas en 3D de la API de Maps JavaScript, puedes administrar el enfoque de la cámara con la opción cameraPosition.

Comportamientos clave:

Con center: Las coordenadas de latitud y longitud especifican el punto exacto del mapa hacia el que apunta la cámara.
Con cameraPosition: La cámara se coloca en las coordenadas proporcionadas durante la construcción. Esto suele dificultar centrar la vista en un lugar de interés específico.

En el siguiente ejemplo, se muestra cómo inicializar un mapa con la opción center para garantizar un punto focal específico. El marcador indica el punto central proporcionado en center:

<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

Consulta el ejemplo de código fuente completo

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

Prueba la muestra

JSFiddle.net

Campo visual y rango

Puedes ajustar la cantidad del mapa que se ve en el viewport con dos parámetros distintos: rango y fov. Si bien ambos afectan el nivel de "zoom", funcionan de manera diferente:

range: Controla la distancia física entre la cámara y el punto central. Ajustar esto equivale a acercar o alejar la cámara del mapa.
fov (campo visual): Controla el ángulo de la lente de la cámara. Un valor más alto actúa como una lente gran angular, que muestra más de la periferia, mientras que un valor más bajo actúa como una lente teleobjetivo.

En la siguiente comparación, se muestra el mismo mapa en extremos opuestos del espectro fov. En el mapa de la izquierda, el fov se establece en 5 (estrecho/teleobjetivo); en el mapa de la derecha, se establece en 80 (gran angular).

Comparación en paralelo de dos renderizaciones aéreas en 3D del puente Golden Gate. En el lado izquierdo, se muestra una vista panorámica de todo el tramo del puente y de Marin Headlands. En el lado derecho, se muestra un primer plano extremo de una torre de suspensión roja y la plataforma del puente en un ángulo descendente pronunciado.