JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>
<div id="animation">
    <div class="dot"></div>
</div>
<hr>
<div id="map"></div>

CSS

#animation {
    position: relative;
    width: 100%;
    height: 200px;
    background: #EEE;
}
#map {
    height: 400px;
    width: 100%;
}
.dot {
    position: absolute;
    top: 80px;
    left: 150px;
    background: #00C0FF;
    box-shadow: 1px 0 2px 0 rgba(0, 0, 0, .5);
    height: 0;
    width: 0;
    padding: 4px;
    border-radius: 5000px;
}
.dot:before, .dot:after {
    position: absolute;
    content:" ";
    border-radius: inherit;
    height: 0px;
    width: 0px;
    box-shadow: 0 0 2px 2px #FF0000;
    transform: translate(-50%, -50%);
    animation: pulseInner 2s infinite ease-out;
}
.dot:after {
    height: 7px;
    width: 7px;
    box-shadow: 0 0 4px 2px #FFFF00;
    animation: pulseOuter 2s infinite ease-out;
}
@-webkit-keyframes {
    0% {
        height: 0;
        width: 0;
        opacity: 0;
    }
    20% {
        opacity: 1
    }
    95% {
        height: 125px;
        width: 125px;
        opacity: 0.25;
    }
    100% {
        opacity: 0;
    }
}
@-moz-keyframes {
    0% {
        height: 0;
        width: 0;
        opacity: 0;
    }
    20% {
        opacity: 1
    }
    95% {
        height: 125px;
        width: 125px;
        opacity: 0.25;
    }
    100% {
        opacity: 0;
    }
}
@keyframes pulseInner {
    0% {
        height: 0;
        width: 0;
        opacity: 0;
    }
    20% {
        opacity: 1
    }
    95% {
        height: 125px;
        width: 125px;
        opacity: 0.25;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes {
    0% {
        height: 7px;
        width: 7px;
        opacity: 0;
    }
    20% {
        opacity: 1
    }
    100% {
        height: 250px;
        width: 250px;
        opacity: 0.25;
    }
}
@-moz-keyframes {
    0% {
        height: 7px;
        width: 7px;
        opacity: 0;
    }
    20% {
        opacity: 1
    }
    100% {
        height: 250px;
        width: 250px;
        opacity: 0.25;
    }
}
@keyframes pulseOuter {
    0% {
        height: 7px;
        width:...

JavaScript

var map;
var mycity = new google.maps.LatLng(51.5120, -0.12);
var bigOne = new google.maps.LatLng(51.5120, -0.12);
var smallOne = new google.maps.LatLng(51.5155, -0.12);
var options = {
    zoom: 14,
    center: mycity,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map')[0], options);

function drawCircle(point, radius, dir)
{ 
    var d2r = Math.PI / 180;   // degrees to radians 
    var r2d = 180 / Math.PI;   // radians to degrees 
    var earthsradius = 3963; // 3963 is the radius of the earth in miles
    var points = 32; 

    // find the raidus in lat/lon 
    var rlat = (radius / earthsradius) * r2d; 
    var rlng = rlat / Math.cos(point.lat() * d2r); 

    var extp = new Array(); 
    if (dir==1) {var start=0;var end=points+1} // one extra here makes sure we connect the
    else{var start=points+1;var end=0}
    for (var i=start; (dir==1 ? i < end : i > end); i=i+dir)  
    {
        var theta = Math.PI * (i / (points/2)); 
        ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) 
        ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) 
        extp.push(new google.maps.LatLng(ex, ey));
    }
    return extp;
}

var joined = new google.maps.Polygon({
                 paths: [drawCircle(smallOne, 150/1609.344, 1),
                        drawCircle(bigOne, 300/1609.344, 1)],
                 strokeColor: "#ff0000",
                 strokeOpacity: 0.35,
                 strokeWeight: 0,
                 fillColor: "#FF0000",
                 fillOpacity: 0.35
     });
joined.setMap(map);