I had a problem recently with a site that needed a dynamic way to present map markers both on a google map and in a list view. Before I used static numbered PNGs but this was not a sustainable option since the number of markers used could exceed hundreds. And I wasn’t that particularly interested in creating 250 different PNGs in multiple color… I came up with a CSS only solution that implemented the DATA URI-scheme together with CSS.

To create the base64-data-URI from an existing image I used this site. There are probably easier and better ways, but you do it one time and then you’re set.

Basically you create three different types of CSS classes:

• Marker container
• Marker background
• Marker number

/* marker container */

.marker{
	font-family: "Tahoma", sans-serif;
	font-size: 11px;
	padding-top: 5px;
	width: 27px;
	height: 27px;
	text-align: center;
}

/* marker background */

.marker-black{
color: #fff;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AUWDBYAATi9dAAAAWVJREFUSMftlrFuwjAQhj+blCCKuvU1OrQsqKsf22vF1D5JqSLURgQM6fJbskIgLcIbJ51sRcl9vjsr9xsA55wBRvK7ZG/4v7XAXr6Le+99awQqgDEwkY8FsxfADgJsgY18C4RCQcfAFHjQWuoAl1oAGqAG1jHjCJsI9AgsuZ4tkmxDoR5NlNHSe381knNuCTyplI1NyliSx8p4B2xy84pMsNiqkdX1tuQ1C5jckCPiDXaD3WD5Ya3+yjntALQ2maohEyhEhk2mapMJ1ij+vpBO2GiqLjSDjmxozjnnTg3PWvF3xjlXaOb0yQKTiJ63U0CBXhPBs+vIgjoOz1jGGqiAL2AFfGqtgG9g3nd6PZvrnUrfrBSnUtwtsDcDUs4qwzKRDh8xQ4Gek1I1yir0SrmBPpgENlOZZ8C7XnlRRmutDRC8921fvEER2gFOgXtpClSen9iTc6A/wTrAcUdThuRqnwUB/AIqeYeoNuNZpAAAAABJRU5ErkJggg==);
}

/* marker numbers */

.marker-0{}
.marker-1:after{content: "1";}
.marker-2:after{content: "2";}
.marker-3:after{content: "3";}
.marker-4:after{content: "4";}
.marker-5:after{content: "5";}
.marker-6:after{content: "6";}
.marker-7:after{content: "7";}
.marker-8:after{content: "8";}
.marker-9:after{content: "9";}
.marker-10:after{content: "10";}
/* etc... */

You then display the map marker using only a div:

<div class="marker marker-black marker-45"></div>

A working demo can be found here.

Good luck!