How to center a google map?

Question

JavaScript

The script creates a map and displays markers from json on it, and also creates a menu of addresses, when you click on the links on the map, the corresponding marker opens. How to center the opening marker in the center of the map?
markup

<div id="map" class="grayBox"></div><ul id="markers"></ul>

The script itself

// Map
var map;
var arrMarkers = [];
var arrInfoWindows = [];
function mapInit(){
    var centerCoord = new google.maps.LatLng(lat, lng);
    var mapOptions = {
        zoom: 12,
        center: centerCoord,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    //Определяем область отображения меток на карте
    var latlngbounds = new google.maps.LatLngBounds();
    //Загружаем данные в формате JSON из файла map.json
    $.getJSON("http://your-webmasters.com/demo/live-motion/map.json", {}, function(data){
        $.each(data.places, function(i, item){
            $("#markers").append(
                "<li class='row'><div class='col-xs-12 col-md-4 imgBox'><a href='#' rel='" + i + "' data-lat='" + item.lat + "' data-lng='" + item.lng + "'>" + item.image + "</a></div><div class='col-xs-12 col-md-6'><p class='title'><a href='#' rel='" + i + "' data-lat='" + item.lat + "' data-lng='" + item.lng + "'>" + item.title + "</a></p><p>" + item.description + "</p><p class='moreLink'>" + item.moreLink + "</p></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: "<h3>"+ item.title +"</h3>"
            });
            arrInfoWindows[i] = infowindow;
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map, marker);
            });
        });
        //Центрируем и масштабируем карту так, чтобы были видны все метки
        //map.setCenter( latlngbounds.getCenter(), map.fitBounds(latlngbounds));
    });
}
$(function(){
    // Определяем карту (добавляем маркеры, балуны и список со ссылками)
    mapInit();
    // Cобытие клика по ссылке
    $(document).on("click", "#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(); }
        arrInfoWindows[i].open(map, arrMarkers[i]);
        return false;
    });
});

json

{"places": [
    {
      "title": "YellowKorner",
      "image": "<img src='style/img/gallery.jpg' alt=''>",
      "description": "Saint-Petersburg",
      "moreLink": "<a href='#' target='_blank'>more info</a>",
      "lat": -56.31927,
      "lng": 44.026297
    },
    {
      "title": "Very long name of gallery",
      "image": "<img src='style/img/gallery.jpg' alt=''>",
      "description": "Saint-Petersburg",
      "moreLink": "<a href='#' target='_blank'>more info</a>",
      "lat": 56.31927,
      "lng": 44.02629700001
    },
    {
      "title": "YellowKorner",
      "image": "<img src='style/img/gallery.jpg' alt=''>",
      "description": "Saint-Petersburg",
      "moreLink": "<a href='#' target='_blank'>more info</a>",
      "lat": 10.31927,
      "lng": 80.026297
    }]}

Answer 1

$(function(){
        // Определяем карту (добавляем маркеры, балуны и список со ссылками)
        mapInit();
        // Cобытие клика по ссылке
        $(document).on("click", "#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());
            arrInfoWindows[i].open(map, arrMarkers[i]);
            return false;
        });
    });

Answer 2

google.maps.event.addListener(marker, 'click', function() {
    
   map.panTo(marker.getPosition());

   infowindow.open(map, marker);
            });

Answer 3

I don’t know how in Google, I know how Yandex. did a long time ago for the client
plnkr.co/edit/zCILTUR1NejTtAGsMN0R