Question

Is there a way to create a simple marker or layer from html. I think about a circle that will be animated with css3. The circle itself is just a div with rounded corners.

Answer 1

Ok, seems that Custom Overlays will do what I want. This is ping layer:

    function PingLayer(bounds, map) {
        this.bounds = bounds;
        this.setMap(map);
    }

    PingLayer.prototype = new google.maps.OverlayView();

    PingLayer.prototype.onAdd = function() {
        var div = document.createElement('DIV');
        div.className = "ping";
        this.getPanes().overlayLayer.appendChild(div);
        div.appendChild(document.createElement("DIV"))
        this.div = div;

        setTimeout(function(){div.className += " startPing"}, 10);
    }

    PingLayer.prototype.draw = function() {

        var overlayProjection = this.getProjection();
        var sw = overlayProjection.fromLatLngToDivPixel(this.bounds.getSouthWest());
        var ne = overlayProjection.fromLatLngToDivPixel(this.bounds.getNorthEast());
        var div = this.div;
        div.style.left = sw.x - 60 + 'px';
        div.style.top = ne.y - 65 + 'px';
    }

This is the way to add em to the map:

 var swBound = new google.maps.LatLng(lat, lng);
 var neBound = new google.maps.LatLng(lat, lng);
 var bounds = new google.maps.LatLngBounds(swBound, neBound);   
 new PingLayer(bounds, map);

And this is CSS that does the animation:

.ping {
    position: absolute;
    width: 100px;
    height: 100px;
}
.ping div {
    top: 50px;
    left: 50px;
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background: none;
    border: solid 5px #000;
    text-align: center;
    font-size: 20px;
    color: #fff;
    -moz-transition-property: width, height, top, left, opacity;

    -moz-transition-duration: 2s;

}

.ping.startPing div{
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    opacity: 0;
    -moz-transition-duration: 2s;

}