Currently, I am utilizing the Google Maps Javascript API v3 Circle object to display circles on the map. I am interested in customizing the CSS of this circle by incorporating some CSS animations.
Although I am aware that custom overlays can be used for this purpose, I prefer using the Circle class due to its simplicity in setting a radius and automatic scaling of the circle.
However, my challenge lies in trying to edit specific CSS properties of the circle as there doesn't seem to be any documentation available regarding this issue.
I am seeking guidance on how to achieve this customization.
This is the current code snippet I am using for creating the Circle:
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
});
My goal is to have an animated circle displayed 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>