<script src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script>
var mark = [{ LatLang: { lat: 41.888014, lng: 12.482378 }, description: "Описание 1 - маркера" },
{ LatLang: { lat: 41.89616, lng: 12.484159 }, description: "Описание 2 - маркера" },
{ LatLang: { lat: 41.893445, lng: 12.483258 }, description: "Описание 3 - маркера" },
{ LatLang: { lat: 41.911132, lng: 12.48741 }, description: "Описание 4 - маркера" }
];
var elem;
function showMap() {
var centerLatLng = { lat: 41.893445, lng: 12.483258 };
var e = document.getElementById("map"),
t = {
center: centerLatLng,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var gmap = new google.maps.Map(e, t);
var marker = [], infowindow=[];
for (i = 0; i < 4; i++) {
marker[i] = new google.maps.Marker({
position: mark[i].LatLang,
map: gmap,
title: mark[i].description
});
marker[i].setMap(gmap);
infowindow[i] = new google.maps.InfoWindow({
content: mark[i].description
});
marker[i].id = i;
marker[i].addListener('click', function () {
infowindow[this.id].open(gmap, this);
});
elem = document.createElement('li');
elem.innerText = "Маркер " + (i + 1);
elem.id = i;
elem.addEventListener('click', function () {
google.maps.event.trigger(marker[+this.id], 'click');
});
document.querySelector('ul').appendChild(elem);
}
};
google.maps.event.addDomListener(window, 'load', showMap);
</script>
</head>
<body>
<div style="float: left; width: 200px; height: 400px;">
<ul></ul>
</div>
<div id="map" style="float: left; width: 400px; height: 400px;">
</div>
</body>
