Prepare pins to put on a block display element, probably with an image in it.

mapPins.js

/**
 * Prepare pins to put on a block display element, probably with an image in it.
 *
 * As creating an instance, a CSS rule will be written in the document
 * for the pins with `className` as the class name.
 * And the element the pins will be on will have its position property
 * set to 'relative'.
 *
 * @param {!HTMLElement} containerDOM the element to put pins on
 * @param {number} [diameter=24] diameter of pins
 * @param {string} [borderColor="darkblue"] border color of pins
 * @param {string} [fillColor="rgb(135, 206, 235)"] fill color of pins
 * @param {string} [letterColor="darkblue"] color of a text inside pins
 * @param {string} [className="pin"] class name for pins
 * @returns {{add: function}}
 * @constructor
 */
var Pins = function(
	containerDOM, diameter, borderColor, fillColor, letterColor, className
) {
	diameter = (typeof diameter === "undefined" || diameter < 24) ?
		24 : diameter;
	borderColor = typeof borderColor === "undefined" ?
		"darkblue" : borderColor;
	fillColor = typeof fillColor === "undefined" ?
		"rgb(135, 206, 235)" : fillColor;
	letterColor = typeof letterColor === "undefined" ?
		"darkblue" : letterColor;
	className = typeof className === "undefined" ?
		"pin" : className;

	if(containerDOM) {
		var currFontSize = parseFloat(
			window.getComputedStyle(document.body, null).getPropertyValue("font-size")
		);
		var border = 2;
		var container = containerDOM;
		container.style.position = "relative";
		var pin = document.createElement("span");
		pin.className = className;
		document.styleSheets[0].insertRule(
			"."+pin.className+" { \
display: block; \
position: absolute; \
border: "+border+"px solid "+borderColor+"; \
border-bottom: 0; \
border-radius: 100%; \
background-color: "+fillColor+"; \
text-align: center; \
color: "+(letterColor ? letterColor : "inherit")+"; \
z-index: 0; \
width: "+(diameter - 2 * border)+"px; \
height: 0; \
padding: "
+((diameter - 2 * border)/2 - .625*currFontSize)+"px 0 \
"+((diameter - 2 * border)/2 + .625*currFontSize)+"px; \
}",
			"max"
		);
		document.styleSheets[0].insertRule(
			"."+pin.className+":after { \
content: ''; \
position: absolute; \
left: "+(6*(diameter/24)-3)+"px; \
top: "+(10*(diameter/24)-1+.18*(diameter-24))+"px; \
width: "+(diameter/2)+"px; \
height: "+(diameter/2)+"px; \
border-bottom: "+border+"px solid "+borderColor+"; \
border-right: "+border+"px solid "+borderColor+"; \
background-color: "+fillColor+"; \
-webkit-transform: rotate(45deg); \
z-index: -1; \
}",
			"max"
		);
	}

	return {
		add: function(posX, posY, text) {
			if(container) {
				var pinNew = pin.cloneNode(false);
				if(text) pinNew.innerHTML = text;
				pinNew.style.left = posX + "px";
				pinNew.style.top = posY + "px";
				container.appendChild(pinNew);
				var renderedSize = pinNew.getBoundingClientRect();
				pinNew.style.left =
					parseInt(pinNew.style.left)
					- (renderedSize.width*.5)
					+ "px";
				pinNew.style.top =
					parseInt(pinNew.style.top)
					- (renderedSize.height+5)
					- (.18*(diameter-24))
					+ "px";
			}

			return this;
		}
	}
};

usage example