Move between markers on Google Map

HTML

<script src="http://maps.googleapis.com/maps/api/js"></script>
<ul class="switching__list">
    <li><a href="javascript:map.setCenter(marker.getPosition());" data-name="Black Sea">Black Sea</a></li>
    <li><a href="javascript:map.setCenter(marker2.getPosition());" data-name="Baltik Sea">Baltik Sea</a></li>
    <li><a href="javascript:map.setCenter(marker3.getPosition());" data-name="North Sea">North Sea</a></li>
    <li><a href="javascript:map.setCenter(marker4.getPosition());" data-name="Atlantic Ocean">Atlantic Ocean</a></li>
</ul>
<div id="map-canvas"></div>

CSS

#map-canvas 
{ 
height: 400px; 
width: 500px;
}

JavaScript

var map;
function initialize() {
	var mapOptionsWatertemp = {
		center: new google.maps.LatLng(43.533016, 34.557850),
		zoom: 6,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
    // Coordinates
	var blackSea = new google.maps.LatLng(43.533016, 34.557850);
	var balticSea = new google.maps.LatLng(57.415672, 19.927596);
	var northSea = new google.maps.LatLng(56.029392, 3.514022);
	var atlanticOcean = new google.maps.LatLng(35.391504, -10.178066);

	map = new google.maps.Map(document.getElementById('map-canvas'), mapOptionsWatertemp);
    
    marker = new google.maps.Marker( {position: blackSea, map: map} );
    marker2 = new google.maps.Marker( {position: balticSea, map: map} );
    marker3 = new google.maps.Marker( {position: northSea, map: map} );
    marker4 = new google.maps.Marker( {position: atlanticOcean, map: map} );
}

google.maps.event.addDomListener(window,'load',initialize);