Cómo controlar el mapa y la cámara

Selecciona la plataforma: Android iOS JavaScript

Es posible que desees controlar el desplazamiento horizontal de la cámara, la altitud máxima o 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 límites de ubicación establecidos para restringir el movimiento de la cámara:

Cómo restringir los límites del mapa

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

En la siguiente muestra de código, se muestra cómo restringir 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();
}

Cómo 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 el siguiente ejemplo de código, se muestra 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();