Как плавно увеличить масштаб на маркере в Google Maps?

Этот вариант отлично сработал для меня:

function animateMapZoomTo(map, targetZoom) {
    var currentZoom = arguments[2] || map.getZoom();
    if (currentZoom != targetZoom) {
        google.maps.event.addListenerOnce(map, 'zoom_changed', function (event) {
            animateMapZoomTo(map, targetZoom, currentZoom + (targetZoom > currentZoom ? 1 : -1));
        });
        setTimeout(function(){ map.setZoom(currentZoom) }, 80);
    }
}

С помощью этой функции можно плавно анимировать увеличение масштаба карты. Она использует рекурсию и событие zoom_changed, чтобы последовательно увеличивать или уменьшать масштаб до желаемого значения. Функция setTimeout добавляет небольшую задержку перед установкой нового уровня зума, что делает анимацию более плавной. Попробуйте, это может вам помочь!

Вы можете попробовать использовать setInterval, чтобы увеличивать масштаб по одному уровню за раз, и очищать интервал, когда достигнете желаемого уровня масштабирования.

Проблема в том, что интервал, который будет работать, полностью зависит от производительности ЦП и пропускной способности машины пользователя (насколько быстро она может загрузить и отобразить новый набор тайлов с изображениями).

Честно говоря, я не уверен, что это можно реализовать так, чтобы работало отлично в любых ситуациях, но небольшой интервал между уровнями масштабирования может помочь немного.

Тем не менее, есть несколько моментов, которые стоит учитывать:

1. Это создаст гораздо большую нагрузку на ЦП и пропускную способность пользователя по сравнению с прямым переходом к выбранному уровню масштабирования.
2. Пользователю придется подождать, пока все это завершится, прежде чем он сможет начать взаимодействовать с картой, что вполне может привести к плохому пользовательскому опыту.

Эти два и, вероятно, другие причины объясняют, почему Google не реализовал такой вид масштабирования в своих картах с самого начала — потому что это плохая идея...

Ваше решение отлично, но при двойном клике пропускается несколько зумов. 😄 Поэтому я разработал собственное решение с плавным зумом. Не могу забрать весь кредит, так как отредактировал код JesseDobbelaere с jsfiddle.net. Это смесь вашего и его кода.

function smoothZoom(map, level, cnt, mode) {
    if (mode == true) {
        if (cnt >= level) {
            return;
        } else {
            if ((maxZoomOut + 2) <= cnt) {
                var z = google.maps.event.addListener(map, 'zoom_changed', function(event) {
                    google.maps.event.removeListener(z);
                    map.setCenter(marker.getPosition());
                    smoothZoom(map, level, cnt + 1, true);
                });
                setTimeout(function() { map.setZoom(cnt); }, timeOut);
            } else {
                map.setZoom(cnt);
                smoothZoom(map, level, cnt + 1, true);
            }
        }
    } else {
        if (cnt < level) {
            return;
        } else {
            var z = google.maps.event.addListener(map, 'zoom_changed', function(event) {
                google.maps.event.removeListener(z);
                map.setCenter(marker.getPosition());
                smoothZoom(map, level, cnt - 1, false);
            });
            if (maxZoomIn - 2 <= cnt) {
                map.setZoom(cnt);
            } else {
                setTimeout(function() { map.setZoom(cnt); }, timeOut);
            }
        }
    }
}

Я добавил несколько дополнительных переменных, таких как timeOut, maxZoomIn и maxZoomOut. Полный код можно найти на jsfiddle:
http://jsfiddle.net/dexy86/9afy9/