Custom HTML elements as map markers

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

CSS

#chartdiv {
	width	: 100%;
	height	: 500px;
}

.map-marker {
    /* adjusting for the marker dimensions 
    so that it is centered on coordinates */
    margin-left: -8px;
    margin-top: -8px;
}
.pulse {
		width: 10px;
		height: 10px;
		border: 5px solid #f7f14c;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		border-radius: 30px;
		background-color: #716f42;
		z-index: 10;
		position: absolute;
	}
.map-marker .dot {
		border: 10px solid #fff601;
		background: transparent;
		-webkit-border-radius: 60px;
		-moz-border-radius: 60px;
		border-radius: 60px;
		height: 50px;
		width: 50px;
		-webkit-animation: pulse 3s ease-out;
		-moz-animation: pulse 3s ease-out;
		animation: pulse 3s ease-out;
		-webkit-animation-iteration-count: infinite;
		-moz-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		position: absolute;
		top: -25px;
		left: -25px;
		z-index: 1;
		opacity: 0;
	}
	@-moz-keyframes pulse {
	 0% {
	   	-moz-transform: scale(0);
	   	opacity: 0.0;
	 }
	 25% {
	   	-moz-transform: scale(0);
	   	opacity: 0.1;
	 }
	 50% {
	   	-moz-transform: scale(0.1);
	   	opacity: 0.3;
	 }
	 75% {
	   	-moz-transform: scale(0.5);
	   	opacity: 0.5;
	 }
	 100% {
	   	-moz-transform: scale(1);
	   	opacity: 0.0;
	 }
	}
	@-webkit-keyframes "pulse" {
	 0% {
	    -webkit-transform: scale(0);
	   	opacity: 0.0;
	 }
	 25% {
	    -webkit-transform: scale(0);
	   	opacity: 0.1;
	 }
	 50% {
	    -webkit-transform: scale(0.1);
	   	opacity: 0.3;
	 }
	 75% {
	    -webkit-transform: scale(0.5);
	   	opacity: 0.5;
	 }
	 100% {
	    -webkit-transform: scale(1);
	   	opacity: 0.0;
	 }
	}

JavaScript

/**
 * This example uses pulsating circles CSS by Kevin Urrutia
 * http://kevinurrutia.tumblr.com/post/16411271583/creating-a-css3-pulsating-circle
 */

var map = AmCharts.makeChart("chartdiv", {
    type: "map",
    "theme": "none",
    pathToImages: "http://www.amcharts.com/lib/3/images/",

    imagesSettings: {
        rollOverColor: "#089282",
        rollOverScale: 3,
        selectedScale: 3,
        selectedColor: "#089282",
        color: "#13564e"
    },

    zoomControl: {
        buttonFillColor: "#15A892"
    },

    areasSettings: {
        unlistedAreasColor: "#15A892"
    },

    dataProvider: {
        map: "worldLow",
        images: [{
            zoomLevel: 5,
            scale: 0.5,
            title: "Brussels",
            latitude: 50.8371,
            longitude: 4.3676
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "Copenhagen",
            latitude: 55.6763,
            longitude: 12.5681
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "Paris",
            latitude: 48.8567,
            longitude: 2.3510
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "Reykjavik",
            latitude: 64.1353,
            longitude: -21.8952
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "Moscow",
            latitude: 55.7558,
            longitude: 37.6176
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "Madrid",
            latitude: 40.4167,
            longitude: -3.7033
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "London",
            latitude: 51.5002,
            longitude: -0.1262
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "Peking",
            latitude: 39.9056,
            longitude: 116.3958
        }, {
            zoomLevel: 5,
            scale: 0.5,
            title: "New Delhi",
           ...