It's the 15th anniversary of Google Maps Platform - Check out the latest news and announcements

Using 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 map your users are familiar with using on maps.google.com, and offers a number of advantages over the default raster tile map, the two most noticeable being the sharpness of vector-based images, and the addition of 3D buildings at close zoom levels.

To use the Vector Map, do the following:

  1. Create a Vector-Map-enabled Map ID.
  2. Update your bootstrap request.
  3. Load a static map for fast rendering (optional).

Create a Vector-Map-enabled Map ID

To create a Map ID that uses the Vector Map, follow the steps in Using Cloud-based Map Styling - Get a Map ID to create a new Map ID, set the Map type to JS and select Vector.

Create Vector Map ID

Update your bootstrap request

Currently, the Vector Map is only available if you load the Maps JavaScript API from the beta channel. To do this, add a v=beta parameter to the src URL when you load the Maps JavaScript API. For example:

<script
  src="https://maps.googleapis.com/maps/api/js?key=KEY&v=beta&callback=yourInitMapMethod">
</script>

Load a static map for fast rendering

A common strategy for improving map loading performance is to load a static map, which will be displayed while the dynamic map renders. For more information, see Vector Static Map.

Known Issues

Browser and device support

Browser and device support matches that for Google Maps.

You can find more information about browser blacklists for vector maps here. Map IDs associated with vector maps will revert to raster maps on these browsers.

Developers can check if a browser on a particular device supports vector maps here.

If you encounter rendering errors, use about://gpu (Chrome) and a screenshot with bug reports, if possible.

Mobile web support

Mobile web support for vector maps is still experimental. If you want to use a raster map instead of a vector map, use client APIs to detect mobile web browsers and use a Map ID associated with the raster map.

As with other vector map renderers, slower rendering performance is expected for some mobile devices. If you choose to use vector maps on a mobile web platform, we welcome your performance statistics and feedback. If vector maps support is not available, a vector Map Id will fallback to using a raster map automatically.