How to enable Fractional Zoom using Maps JavaScript API?

The beta version of Maps JavaScript API supports fractional zoom. This feature enables map zoom using fractional values instead of integers, allowing a smoother transition between zoom levels and finer viewport adjustments. Fractional zoom is on by default for vector maps, and off for raster maps. It can be enabled/disabled using the isFractionalZoomEnabled property. Here's how to use fractional zoom. 

For both vector and raster maps, set the Maps JavaScript API to use a beta version by setting v=beta in the Maps JavaScript API URL script tag.

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

Vector Map

1. Create a new Map ID with Map Type = JavaScript > Vector.

• In Cloud Console, go to Google Maps Platform > Map Management page.
• Click + CREATE MAP ID.
• In the form, specify the following: 
  • Name: specify a name for e.g. "JavaScript Vector"
  • Description: (optional): add a description for this Map ID
  • Map Type: choose JavaScript
  • (JavaScript options): choose Vector
• Click Save.

This generates a Map ID that you can use in your map initialization code in the next step.

2. Add the mapId property to your map initialization code.

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

Where 'MAP_ID' is the Map ID generated in Step 1. Since fractional zoom is enabled by default for Vector Maps, there's no need to add the isFractionalZoomEnabled property. Use this property to disable the feature (isFractionalZoomEnabled: false).

Raster Map

Add isFractionalZoomEnabled property to your map initialization code and set to true.

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

Use map.set or map.setOptions methods.

Alternatively, you can use map.set() or map.setOptions() to enable/disable this property.

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

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

Testing
You can verify if the Fractional Zoom property works by map.setZoom() and map.getZoom.

// set zoom level to 6.44
map.setZoom(6.44);

// log the current zoom level to the console
console.log(map.getZoom());