Cacher is the code snippet organizer for pro developers

var markers = new Array();
var map;

var locations = [
    ['<h4>Delhi International Art Festival, New Delhi</h4>', 28.613939, 77.209021],
    ['<h4>ICCR - Horizon Series, New Delhi</h4>', 28.625439, 77.245715],
    ['<h4>Shree Arobindo Asharam, Pondecherry</h4>', 11.936761, 79.834314],
    ['<h4>With Shuba Mudgal, Florance, Italy</h4>', 43.769560, 11.255814],
    ['<h4>Classical Piano by S.A.I.D., London, UK</h4>', 51.507351, -0.127758],
    ['<h4>Piano Unplugged for Nartan Academy, US & Canada</h4>', 40.712784, -74.005941]
];

// Setup the different icons and shadows
var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';

var icons = [
iconURLPrefix + 'red-dot.png',
iconURLPrefix + 'green-dot.png',
iconURLPrefix + 'green-dot.png',
iconURLPrefix + 'red-dot.png',
iconURLPrefix + 'purple-dot.png',
iconURLPrefix + 'green-dot.png']
var iconsLength = icons.length;

function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(20.59, 78.96),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        streetViewControl: false,
        panControl: false,
        zoomControlOptions: {
            position: google.maps.ControlPosition.LEFT_BOTTOM
        }
    });


    var infowindow = new google.maps.InfoWindow({
        maxWidth: 160
    });

    var iconCounter = 0;

    // Add the markers and infowindows to the map
    for (var i = 0; i < locations.length; i++) {
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon: icons[iconCounter],
            title: 'Click to zoom'
        });

        markers.push(marker);

        google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {

            return function () {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
                //map.setZoom(9);
                //map.setCenter(marker.getPosition());	
            }
        })(marker, i));

        google.maps.event.addListener(marker, 'click', (function (marker, i) {

            return function () {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
                map.setZoom(9);
                map.setCenter(marker.getPosition());
            }
        })(marker, i));


        iconCounter++;
        // We only have a limited number of possible icon colors, so we may have to restart the counter
        if (iconCounter >= iconsLength) {
            iconCounter = 0;
        }

    }
    autoCenter();
}
google.maps.event.addDomListener(window,'load',initialize);
function triggerClick(i) {
    google.maps.event.trigger(markers[i], 'click');
    //map.getBounds();	
}




function autoCenter() {
    //  Create a new viewpoint bound
    var bounds = new google.maps.LatLngBounds();
    //  Go through each...
    for (var i = 0; i < markers.length; i++) {
        bounds.extend(markers[i].position);
    }
    //  Fit these bounds to the map
    map.fitBounds(bounds);
}

body {
    padding:0;
    margin:0;
}
.container {
    width:100%;
    height:100%;
}
.archive-map {
    width:100%;
    height:400px;
}
.nav {
    background:rgba(0, 0, 0, 0.5);
    width:100%;
    text-align:center;
    margin:0;
    padding-left:0;
}
.nav li {
    display:inline-block;
}
.nav li a {
    color:#fff;
    padding:10px;
    display:block;
    position:relative;
    z-index:100;
}

<ul class="nav">
    <li><a href="javascript:triggerClick(0)">location1</a>

    </li>
    <li><a href="javascript:triggerClick(1)">location2</a>

    </li>
    <li><a href="javascript:triggerClick(2)">location3</a>

    </li>
    <li><a href="javascript:triggerClick(3)">location4</a>

    </li>
</ul>
<div class="container">
    <div id="map" class="archive-map"></div>
</div>

<script src="https://maps.google.com/maps/api/js"></script>