Benutzerdefinierter HTML-Marker für Google Maps

Question

Gibt es eine Möglichkeit, ein einfaches Marker oder eine Schicht aus html zu erstellen. Ich denke an einen Kreis, der mit css3 animiert wird. Der Kreis selbst ist nur ein div mit abgerundeten Ecken.

Answer 1

Ok, scheint so, als würden Benutzerdefinierte Overlays das tun, was ich will. Das ist die Ping-Schicht:

    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';
    }

So fügt man sie der Karte hinzu:

 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);

Und das ist der CSS, der die Animation macht:

.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;

}