Mapas vectoriales

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

La API de Maps JavaScript ofrece dos implementaciones diferentes del mapa: de trama y vectoriales. El mapa de trama se carga de forma predeterminada y lo carga como una cuadrícula de mosaicos de imágenes de trama basados en píxeles, que se generan en el servidor de Google Maps Platform y, luego, se publican en tu app web. El mapa vectorial está compuesto por mosaicos basados en vectores, que se dibujan en el tiempo de carga del cliente mediante WebGL, una tecnología web que permite al navegador acceder a la GPU en el dispositivo del usuario para procesar gráficos 2.

El mapa vectorial es el mismo mapa de Google que tus usuarios están familiarizados y ofrece una serie de ventajas sobre el mapa de mosaicos de trama predeterminado, en particular la nitidez de las imágenes basadas en vectores y la adición de edificios 3D con niveles de zoom cercanos. El mapa vectorial también es compatible con algunas funciones nuevas, como la capacidad de agregar contenido 3D con la vista de superposición de WebGL, el control programático de la orientación y la inclinación, el control mejorado de la cámara y el zoom fraccional para lograr un zoom más fluido.

Cómo comenzar a usar Vector Maps

Cómo controlar la cámara

Usa la función map.moveCamera() para actualizar cualquier combinación de propiedades de la cámara a la vez. map.moveCamera() acepta un solo parámetro que contiene todas las propiedades de cámara que se actualizarán. En el siguiente ejemplo, se muestra cómo llamar a map.moveCamera() para configurar center, zoom, heading y tilt a la vez:

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

Puedes animar propiedades de la cámara llamando a map.moveCamera() con un bucle de animación, como se muestra a continuación:

const degreesPerSecond = 3;

function animateCamera(time) {
  // Update the heading, leave everything else as-is.
  map.moveCamera({
    heading: (time / 1000) * degreesPerSecond
  });

  requestAnimationFrame(animateCamera);
}

// Start the animation.
requestAnimationFrame(animateCamera);

Zoom fraccional

Los mapas vectoriales admiten el zoom fraccional, lo que te permite hacer zoom mediante valores fraccionales en lugar de números enteros. Si bien tanto los mapas de tramas como los vectoriales admiten el zoom fraccional, este está activado de forma predeterminada para los mapas de vectores y desactivado de forma predeterminada para los mapas de tramas. Usa la opción de mapa isFractionalZoomEnabled para activar y desactivar el zoom fraccional.

En el siguiente ejemplo, se muestra la habilitación del zoom fraccional al inicializar el mapa:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  isFractionalZoomEnabled: true
});

También puedes activar y desactivar el zoom fraccional si configuras la opción del mapa isFractionalZoomEnabled como se muestra a continuación:

// Using map.set
map.set('isFractionalZoomEnabled', true);

// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});

Puedes configurar un objeto de escucha para detectar si el zoom fraccional está activado. Esto es más útil si no configuraste isFractionalZoomEnabled como true o false de forma explícita. El siguiente código de ejemplo verifica si está habilitado el zoom fraccional:

map.addListener('isfractionalzoomenabled_changed', () => {
  const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
  if (isFractionalZoomEnabled === false) {
    console.log('not using fractional zoom');
  } else if (isFractionalZoomEnabled === true) {
    console.log('using fractional zoom');
  } else {
    console.log('map not done initializing yet');
  }
});