I'm using Google Maps Javascript API v3 Circle
object to draw circles on the map.
I want to customize the css of that circle, by adding some css animations.
I know that I can use a custom overlays, but I like the Circle class because I can easy set a radius and the circle scales automatically.
I just want to edit some css properties of the circle, but looking at the docs there is nothing.
How can i do that?
This is the Circle code that i use currently:
var latLng = {
lat: 0,
lng: 0
};
var radius = 200; //200 meters
var fillColor = "#40ad00";
var strokeColor = "#40ad00";
var circle = new google.maps.Circle({
center: latLng,
radius: radius,
strokeColor: strokeColor,
strokeOpacity: 0.25,
strokeWeight: 1,
fillColor: fillColor,
fillOpacity: 0.1,
map: map
});
What i want to do is to have this animated circle on the map.
body {
background: #000000;
}
div.circle {
position: absolute;
top: 10px;
left: 50px;
width: 200px;
height: 200px;
overflow: hidden;
border: 2px solid;
border-radius: 100%;
box-sizing: border-box;
animation: spin 5s infinite cubic-bezier(0.075, 0.80, 0.135, 1);
}
@keyframes spin {
0% {
opacity:0;
-webkit-transform: scale(0.25);
border-color: #FFFFFF;
box-shadow: 0px 0px 0px 1px #FFFFFF;
}
15% {
opacity:1;
}
70% {
opacity:1;
border-color: #d100ff;
box-shadow: 0px 0px 50px 1px #d100ff;
}
100% {
opacity:0;
-webkit-transform: scale(1);
box-shadow: 0px 0px 50px 1px #FFFFFF;
}
}
<div class="circle"></div>