Custom HTML elements as map markers

HTML

<link rel="stylesheet" href="http://www.ammap.com/lib/3/ammap.css" type="text/css">
<script src="http://www.ammap.com/lib/3/ammap.js" type="text/javascript"></script>
<script src="http://www.ammap.com/lib/3/maps/js/worldLow.js" type="text/javascript"></script>
<div style="width:100%;">
   
    <div id="mapdiv" style="height: 370px;"></div>            
</div>

CSS

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

.holder {
    /* adjusting for the marker dimensions so that it is centered on coordinates */
    margin-left: -8px;
    margin-top: -8px;
}
.holder .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;
	}
	.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

// request #3275 
    var dataPoints = [{
              latitude: '51.000000000000',
              longitude: '9.000000000000',
              type: 'bubble',
              color: '#000',
        title: 'Berlin',
              fixedSize: false,
              alpha: 0.9,
              height: 30,
              width: 30,
              centered: true,
              id: 'test'
      }];

    AmCharts.ready(function() {
        // create AmMap object
        var map = new AmCharts.AmMap();
        // set path to images
        map.pathToImages = "http://www.ammap.com/lib/images/";
        
        var dataProvider = {
            mapVar: AmCharts.maps.worldLow,
            getAreasFromMap:false,
            images: dataPoints
        }; 

        // pass data provider to the map object
        map.dataProvider = dataProvider;
    
        map.areasSettings = {
            autoZoom: true,
            selectedColor: "#000"
        };
    
        // add events
        map.addListener("positionChanged", updateCustomMarkers);
        
        // write the map to container div
        map.write("mapdiv");
        
        
        
    });

function updateCustomMarkers (event) {
    // get map object
    var map = event.chart;
    
    // go through all of the images
    for( var x in map.dataProvider.images) {
        // get MapImage object
        var image = map.dataProvider.images[x];
        
        // check if it has corresponding HTML element
        if ('undefined' == typeof image.externalElement)
            image.externalElement = createCustomMarker(image);

        // reposition the element accoridng to coordinates
        image.externalElement.style.top = map.latitudeToY(image.latitude) + 'px';
        image.externalElement.style.left = map.longitudeToX(image.longitude) + 'px';
    }
}

function createCustomMarker(image) {
    // create holder
    var holder = document.createElement('div');
    holder.className = 'holder';
    holder.title = image.title;
   ...