The Maps JavaScript API offers two different implementations of the map: raster
and vector. The raster map 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 type is recommended for the best user experience, as it provides
improved visual fidelity, better caching across maps, as well as the ability to
control tilt and heading on the map. [Learn more about vector map features.](https://developers.google.com/maps/documentation/javascript/vector-map.md.txt)

## Default rendering type

The map's default rendering type varies depending on your implementation.

- Maps using the `<gmp-map>` element default to the vector rendering type.

- Maps using a `<div>` element with `google.maps.Map` default to the raster
  rendering type.

Set the rendering type for a map either by specifying the `renderingType` map
option, or by setting the option on an associated map ID. The `renderingType`
option overrides any rendering type settings made by configuring a map ID.

## Specify the `renderingType` option

Use the `renderingType` option to specify either the raster or vector
rendering type for your map (no map ID required). For maps loaded using a `div`
element and JavaScript, the default rendering type is
`google.maps.RenderingType.RASTER`. Take these steps to set the `renderingType`
option:

1. Load the `RenderingType` library; this can be done when loading the Maps
   library:

   ```javascript
   const { Map, RenderingType } = await google.maps.importLibrary("maps");
   ```
2. When initializing the map, use the `renderingType` option to specify either
   `RenderingType.VECTOR` or `RenderingType.RASTER`:

   ```javascript
   map = new Map(
     document.getElementById('map'),
     {
       zoom: 4,
       center: position,
       renderingType: RenderingType.VECTOR,
     }
   );
   ```

When the vector map rendering type is set, you must set the options for the
needed features.

- To enable tilt, set the `tiltInteractionEnabled` map option to `true` or call `map.setTiltInteractionEnabled(true)`.
- To enable panning, set the `headingInteractionEnabled` map option to `true` or call `map.setHeadingInteractionEnabled(true)`.

For maps loaded using the `<gmp-map>` element, the default rendering type is
`google.maps.RenderingType.VECTOR`, with tilt and heading control enabled. To
set the rendering type by using the `<gmp-map>` element, use the
`rendering-type` attribute.

## Use a map ID to set rendering type

You can also specify the rendering type by using a map ID. Create a map ID by
following the steps in [Using Cloud-based Map Styling - Get a map ID](https://developers.google.com/maps/documentation/javascript/styling#creating-map-ids).
Be sure to set the Map type to **JavaScript** , and select an option (**Vector**
or **Raster** ). Check **Tilt** and **Rotation** to enable tilt and rotation
on the map. Doing so will allow you to programmatically adjust these values, and
also lets users adjust tilt and heading directly on the map. If the use of tilt
or heading will adversely affect your app, leave **Tilt** and **Rotation** un-
checked so users will not be able to adjust tilt and rotation.

![Create Vector Map ID](https://developers.google.com/static/maps/documentation/maps-customization/images/vector-map-id.png)

Next, update your map initialization code with the map ID you created. You can
find your map IDs on the
[Maps
Management](https://console.cloud.google.com/google/maps-apis/studio/maps) page. Provide a map ID when you instantiate the map using the
`mapId` property as shown here:

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

> [!IMPORTANT]
> **Important:** It is recommended to associate your map ID and API key with the same Google Cloud console project.

## Detect which rendering type is in use

To detect which rendering type is used, call `getRenderingType()` on the map
object, as shown in the following example:

````javascript
  // Wait for the map to finish loading.
  google.maps.event.addListenerOnce(map, "tilesloaded", () => {
      // Print the rendering type to the console.
      console.log(`${map.getRenderingType()}`);
  });```
````