Vector Maps

The Maps JavaScript API offers two different implementations of the map: raster and vector. The raster map is loaded by default, and loads the map as a grid of pixel-based raster image tiles, which are generated by Google Maps Platform server-side, then served to your web app. The vector map is a composed of vector-based tiles, which are drawn at load time on the client-side using WebGL, a web technology that allows the browser to access the GPU on the user's device to render 2D and 3D graphics.

The vector map is the same Google map your users are familiar with using, and offers a number of advantages over the default raster tile map, most notably the sharpness of vector-based images, and the addition of 3D buildings at close zoom levels. The vector map also supports some new features, such as the ability to add 3D content with WebGL Overlay View, programmatic tilt and heading control, enhanced camera control, and fractional zoom for smoother zooming.

Get started with Vector Maps

Control the camera (Beta)

Use the map.moveCamera() function to update any combination of camera properties at once. map.moveCamera() accepts a single parameter containing all of the camera properties to update. The following example shows calling map.moveCamera() to set center, zoom, heading, and tilt at once:

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

You can animate camera properties by calling map.moveCamera() with an animation loop, as shown here:

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);

Fractional Zoom

Vector maps support fractional zoom, which lets you zoom using fractional values instead of integers. While both raster and vector maps support fractional zoom, fractional zoom is on by default for vector maps, and off by default for raster maps. Use the isFractionalZoomEnabled map option to turn fractional zoom on and off.

The following example shows enabling fractional zoom when initializing the map:

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

You can also turn fractional zoom on and off by setting the isFractionalZoomEnabled map option as shown here:

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

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

You can set a listener to detect whether fractional zoom is turned on; this is most useful if you have not explicitly set isFractionalZoomEnabled to true or false. The following example code checks to see whether fractional zoom is enabled:

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');
  }
});