How to make a smooth change in the center of Google map?

Question

Google Maps

There is a script that takes information from json, builds a map and a list of addresses, by clicking on one of which the center of the map changes to the corresponding coordinates. How to make a smooth change in the center of the map? Please, I can't find anything.

// Map
    var map;
    var arrMarkers = [];
    var arrInfoWindows = [];
    function mapInit(){
        var lat = 49.326721,
            lng = 31.783277;
        var centerCoord = new google.maps.LatLng(lat, lng);
        var mapOptions = {
            scrollwheel: false,
            zoom: 6,
            center: centerCoord,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("c-where__map"), mapOptions);
        //Определяем область отображения меток на карте
        var latlngbounds = new google.maps.LatLngBounds();
        //Загружаем данные в формате JSON из файла map.json
        $.getJSON("assets/js/map.json", {}, function(data){
            $.each(data.places, function(i, item){
                $("#c-where__markers").append(
                    "<li><div class='row'><div class='imgBox'>" +
                    "<a href='#' rel='" + i + "' data-lat='" + item.lat + "' data-lng='" + item.lng + "'>" + item.image + "</a>" +
                    "</div>" +
                    "<div class='textBox'>" +
                    "<p class='title'><a href='#' rel='" + i + "' data-lat='" + item.lat + "' data-lng='" + item.lng + "'>" + item.title + "</a></p>" +
                    "<p>" + item.address + "</p>" +
                    "<p>" + item.phones + "</p>" +
                    "<p>" + item.schedule + "</p>" +
                    "</div></div></li>"
                );
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(item.lat, item.lng),
                    map: map,
                    title: item.title
                });
                //Добавляем координаты меток
                latlngbounds.extend(new google.maps.LatLng(item.lat, item.lng));
                arrMarkers[i] = marker;
                var infowindow = new google.maps.InfoWindow({
                    content: "<div class='c-where__markers__item'><h3><a href=" + item.mainLink + ">"+ item.title + "</a></h3><div>" + item.moreText + "</div></div>"
                });
                arrInfoWindows[i] = infowindow;
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, marker);
                });
            });
            //Центрируем и масштабируем карту так, чтобы были видны все метки
            map.setCenter( latlngbounds.getCenter(), map.fitBounds(latlngbounds));
        });
    }
    $(function(){
        // Определяем карту (добавляем маркеры, балуны и список со ссылками)
        mapInit();
        // Событие клика по ссылке
        $(document).on("click", "#c-where__markers a", function(){
            var i = $(this).attr("rel"),
                lat = $(this).data("lat"),
                lng = $(this).data("lng");
            // Закрыть все балуны
            for(close=0; close < arrInfoWindows.length; close++){ arrInfoWindows[close].close(); }
            // center the map on the clicked marker
            map.setCenter(arrMarkers[i].getPosition());
            map.setZoom(10);
            arrInfoWindows[i].open(map, arrMarkers[i]);
            return false;
        });
    });