Cómo controlar el mapa y la cámara

Es posible que quieras controlar el desplazamiento lateral de la cámara y la altitud máxima, o bien crear límites de latitud y longitud que restrinjan el movimiento de un usuario en un mapa determinado. Puedes hacerlo con las restricciones de la cámara.

En el siguiente ejemplo, se muestra un mapa con los límites de ubicación establecidos para limitar el movimiento de la cámara:

Restringe los límites del mapa

Puedes restringir los límites geográficos de la cámara configurando la opción bounds.

En el siguiente ejemplo de código, se muestra la restricción de los límites del mapa:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

init();
}

Restringir la cámara

Puedes restringir el movimiento de la cámara configurando cualquiera de las siguientes opciones:

  • maxAltitude
  • minAltitude
  • maxHeading
  • minHeading
  • maxTilt
  • minTilt

En el siguiente ejemplo de código, se muestra cómo restringir la cámara:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55
  });

 document.body.append(map);
}

init();

Cómo restringir los límites del mapa y la cámara

Puedes restringir simultáneamente los límites del mapa y de la cámara. En la siguiente muestra de código, se demuestra cómo restringir los límites del mapa y de la cámara:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

 document.body.append(map);
}

init();