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.5120, -0.12);
var options = {
    zoom: 14,
    center: mycity,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map')[0], options);
var myCity = new google.maps.Circle({
    center: bigOne,
    radius: 150,
    strokeColor: "#E16D65",
    strokeWeight: 2,
    fillColor: "#E16D65",
    fillOpacity: 0
});
var smallcircle = new google.maps.Circle({
    center: smallOne,
    radius: 300,
    strokeColor: "#E16D65",
    strokeOpacity: 1,
    strokeWeight: 2,
    fillColor: "#E16D65",
    fillOpacity: 0
});
myCity.setMap(map);
smallcircle.setMap(map);