<div id="map-canvas"></div>
 <ul id="markers" class="wow fadeInLeft" data-wow-delay="0.3s">
                        <li class="active">
                            <div class="marker-link map_name" data-markerid="0">Москва</div>
                        </li>
                        <li>
                            <div class="marker-link map_name" data-markerid="1">Барнаул</div>
                        </li>

                        <li>
                            <div class="marker-link map_name" data-markerid="2">Улан-Удэ</div>
                        </li>
 </ul>

#map-canvas {
    background-color: #e5e3df;
    height: 100%;
    min-height: 600px;
    position: relative;
    width: 100%;
}
.marker-link{
  cursor:pointer;
  margin:10px 0px;
  text-decoration:underline;
}
var locations = [
['Москва, Россия', 'Москва', 'infowindow 1'],
['Барнаул, Россия', 'Барнаул', 'infowindow 2'],
['Улан-Удэ, Россия', 'Улан-Удэ', 'infowindow 3']
];

var markers = new Array();
function initialize() {

  var mapOptions = {
                    center: new google.maps.LatLng(55.830695, 37.431010),
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    zoom: 10,
                    scrollwheel: false,
                    mapTypeControl: false,
                    zoomControl: true,
                };   
    geo = new google.maps.Geocoder();
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var infowindow = new google.maps.InfoWindow();
    for (var i = 0; i < locations.length; i++) {
        //geocodeAddress(locations[i]);
      geocodeAddress(locations[i], i == 0);
    }
  
  //var isSetToCenterMap = new google.maps.LatLng(55.830695, 37.431010);
  
function geocodeAddress(location, isSetToCenterMap) {
geo.geocode({'address' : location[0]}, function (results,status) {
  
 if(status == google.maps.GeocoderStatus.OK) {
   
   if (isSetToCenterMap){
       map.setCenter(results[0].geometry.location);
   }

  createMarker(results[0].geometry.location,location[0],location[1],location[2]);
}
}); 
}
 var image = {
              url: "http://icons.iconarchive.com/icons/icons-land/vista-map-markers/32/Map-Marker-Marker-Outside-Chartreuse-icon.png", 
              anchor: new google.maps.Point(25, 50),
              scaledSize: new google.maps.Size(50, 50)   
             }; 
function createMarker(latlng,html,label,info){
var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            draggable: false,
            animation: google.maps.Animation.DROP,
            icon: image,
            title: html,
            visible: true
        }); 
    
    // Register a click event listener on the marker to display the corresponding infowindow content
google.maps.event.addListener(marker, 'click', (function (marker, i) {

return function () {
        infowindow.setContent(info);
                infowindow.open(map, marker);
                map.panTo(marker.getPosition());
            }
        })(marker, i));
        // Add marker to markers array
        markers.push(marker);
}
    // Trigger a click event on each marker when the corresponding marker link is clicked
    $('.marker-link').on('click', function () {
        google.maps.event.trigger(markers[$(this).data('markerid')], 'click');
        return false;
    });   
}
//initialize();
google.maps.event.addDomListener(window, 'load', initialize);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  2. https://maps.googleapis.com/maps/api/js?key=AIzaSyA4asxO8kGu8rGxbAP_5zezGcy8u1qMQUM