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.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With