animated marker Google Maps

by jpeter06

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=places"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.6.3/less.min.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>
<button style="position:absolute;top:0px;left:0px"
        onclick="animateA()">animate<button>

CSS

html, body, #map { height: 100%; margin: 0px; padding: 0px;}


@keyframes pulsate {
    0% { transform: scale(.1, .1);  opacity: 0;   }
    50% {  opacity: 1;   }
    100% {    transform: scale(1.2, 1.2); opacity: 0; }
}

.shadow {
    position: absolute;
}
.shadow::after {
    position: absolute;
    left: -80px ;
    display: block;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    content: '';
    transform: rotateX(55deg);
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0,0.3) 60px 0 25px;
}

.pin { position:absolute; left:-20px;top:-20px}

.pulse {
    position: absolute;
    margin-top: -25px;
    margin-left: -25px;
    transform: rotateX(55deg);
}
.pulse.anime::after {
    display: block;
    width: 50px;
    height: 50px;
    content: '';
    animation: pulsate 1s ease-out;
    animation-delay: 0.2s;
    animation-iteration-count: 3;
    opacity: 0;
    border-radius: 50%;
    box-shadow: 0 0 1px 2px rgba(0, 0, 0,0.5);
    box-shadow: 0 0 2px 3px rgba(255,0,0, 0.5);
}

.displayNone{
    display:none;
}

JavaScript

var markers = [];
var center=[40.424127, -3.711656];//Plaza de España
var atos=[40.434726, -3.632597];

CustomMarker.prototype = new google.maps.OverlayView();
function CustomMarker(opts) {
    this.setValues(opts);
}

CustomMarker.prototype.draw = function() {
    var self = this;
    var div = this.div;
    if (!div) {
        div = this.div = $('' +
            '<div>' +
            '<div class="shadow"></div>' +
            '<div class="pulse"></div>' +
            '<div class="pin"><SVG><path d="M20 20 L5 0 L35 0 Z" /></SVG></div>' +
            '</div>' +
            '</div>' +
            '')[0];
        this.pulse = this.div.getElementsByClassName('pulse')[0];
        this.pin = this.div.getElementsByClassName('pin');
        this.pinShadow = this.div.getElementsByClassName('shadow');
        div.style.position = 'absolute';
        div.style.cursor = 'pointer';
        var panes = this.getPanes();
        panes.overlayImage.appendChild(div);
        google.maps.event.addDomListener(div, "click", function(event) {
            google.maps.event.trigger(self, "click", event);
        });
    }
    var point = this.getProjection().fromLatLngToDivPixel(this.position);
    if (point) {
        div.style.left = point.x + 'px';
        div.style.top = point.y + 'px';
    }
};

CustomMarker.prototype.getDraggable=function(){ return false;};

CustomMarker.prototype.getPosition=function(){ 
    console.log(this.position);
    return this.position;};

CustomMarker.prototype.remove=function(){
   // this.div.classList.add("displayNone");
};

//ParentClass.prototype.myMethod.call(this)
CustomMarker.prototype.setMap=function(mapa){
    console.log("add map",map);
    google.maps.OverlayView.prototype.setMap.call(mapa);
};

CustomMarker.prototype.animatePulse=function(){
    this.pulse.classList.add("anime");
    this.pulse.addEventListener('webkitAnimationEnd',function(){
    this.classList.remove("anime") ;});
}

var marker=null;
$(function() {
    var pos = new...