PeterLS, как то так ... далее сами дерзайте
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
margin: 0;
}
#map-canvas {
width: 100%;
height: 100vh;
margin: auto;
}
.map-marker.running {
background-image: url(//d30y9cdsu7xlg0.cloudfront.net/png/27587-84.png);
}
.map-marker {
width: 45px;
height: 45px;
background: #485F6E center no-repeat;
background-size: 80%;
position: relative;
z-index: 30;
cursor: pointer;
}
.map-marker:after {
position: absolute;
left: 50%;
bottom: -8px;
margin-left: -8px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #485F6E;
content: " ";
}
.map-marker:hover {
background-color: #39c360;
transition: 0.3s background-color;
}
.map-marker:hover:after {
border-top-color: #39c360;
transition: 0.3s border-top-color;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(42.4924, -92.3427778);
var mapOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var markers = [];
var arr = [{a : 42.4924, b : -92.3427778,title : 'первый'}, {a : 42.50, b : -92.3427778, title : 'второй'}];
arr.forEach(function(el, i) {
var myLatlng = new google.maps.LatLng(el.a, el.b);
var options = {
map: map,
position: myLatlng,
className: 'map-marker running',
visible: true ,
title: el.title
}
var marker = new google.maps.Marker(options);
google.maps.event.addListener(marker, 'click', function() {
map.panTo(myLatlng);
});
markers[i] = marker;
})
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>