Zoom is smoother on maps.google.com than on Google Maps API v3

Question

I have noticed that the zoom on maps.google.com behaves differently (read: smoother) than my custom map using version 3 of the google maps api. I later found out that this also applies to the demo from Google here.

Is there a way to get the same smooth zoom feeling on maps using the Google Maps API v3?

I've been trying to search around the net for a solution, but all I can find is people asking how to do zoom animations, which is not what I'm looking for.

Answer 1

The native Google Maps site maps.google.com uses the HTML5 canvas element for rendering maps. The Google Maps API v3 does not. It is currently (as of late 2015) not possible to get the smooth continuous zoom behavior using the Google Maps API.

After searching Google docs and the web for answers without results, I took some time to understand how the API v3 and how maps.google.com basically work to render and display maps. There's one major difference that makes immediately clear why a continuous zoom won't work using the API:

1. Google Maps API v3 creates a map made of image tiles each rendered into single <div /> containers with a fixed default size of 256 x 256 px. When switching the zoom level every single tile has to be re-rendered with a new image (of whatever type, possibly dynamically styled with custom overlays and so on). This is a very expensive task, so every additional zoom step adds extra resources to be loaded and extra computation costs for re-rendering the whole scene via DOM manipulation. A fluid zoom experience is nearly impossible, even with modern browsers on high CPU/memory machines.

2. maps.google.com uses the HTML5 canvas object for rendering map scenes (I'm pretty sure there's a API v3 style fallback variant for old browsers). Drawing in a natively supported canvas object is way less expensive than replacing images in DOM elements. Google uses a vector graphics based approach which basically allows to do a continuous zoom into detail without the need to fetch additional resources. Additionally needed information for a specific zoom level though could be fetched as smaller chunks of data and applied to the drawing routines.

I must admit that I don't know how this works in detail. It's just what I discovered by inspecting the source and I hope it pretty much sums up why a "smooth zoom" is currently not possible using the maps API. Anyway, let's look forward to the Google Maps API v4!

Answer 2

There are other JavaScript mapping libraries that allow for smooth zooming, such as Mapbox-GL and Cesium. They both use WebGL, just like maps.google.com.

https://www.mapbox.com/mapbox-gl-js/example/fitbounds/

https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Camera.html&label=Showcases