Popover change marker icon image for each item

Dont change the settings of the component, leave things on default

.el-marker svg {
/* make the default marker inivisble */
opacity: 0;    
}

.el-marker, .el-marker:hover {
/* Set the general background properties: */
background: transparent center no-repeat;
background-size: 80%;
}

/* add individual icons */
.el-marker:nth-of-type(1),
.el-marker:nth-of-type(2),
.el-marker:nth-of-type(3),
.el-marker:nth-of-type(4),
.el-marker:nth-of-type(6),
.el-marker:nth-of-type(8),
.el-marker:nth-of-type(9),
.el-marker:nth-of-type(12),
.el-marker:nth-of-type(15),
.el-marker:nth-of-type(16),
.el-marker:nth-of-type(17),
.el-marker:nth-of-type(18),
.el-marker:nth-of-type(25),
.el-marker:nth-of-type(26),
.el-marker:nth-of-type(27),
.el-marker:nth-of-type(28),
.el-marker:nth-of-type(29),
.el-marker:nth-of-type(30),
.el-marker:nth-of-type(31),
.el-marker:nth-of-type(32),
.el-marker:nth-of-type(33),
.el-marker:nth-of-type(34),
.el-marker:nth-of-type(35),
.el-marker:nth-of-type(36),
.el-marker:nth-of-type(37),
.el-marker:nth-of-type(38),
.el-marker:nth-of-type(39),
.el-marker:nth-of-type(40)
{
background-image: url(../images/icons/apple.png);
}

.el-marker:nth-of-type(5),
.el-marker:nth-of-type(11),
.el-marker:nth-of-type(13),
.el-marker:nth-of-type(19),
.el-marker:nth-of-type(21),
.el-marker:nth-of-type(23)
{
background-image: url(../images/icons/pear.png);
background-size: 90%;
}

.el-marker:nth-of-type(7),
.el-marker:nth-of-type(10),
.el-marker:nth-of-type(14),
.el-marker:nth-of-type(20),
.el-marker:nth-of-type(22),
.el-marker:nth-of-type(24),
{
background-image: url(../images/icons/plum.png);
background-size: 80%;
}