JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

CSS

html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

var geocoder;
var map;

function initialize() {
    map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    for (var size=100; size < 600; size+=100) {
        drawRadius(size);
    }
}
google.maps.event.addDomListener(window, "load", initialize);
function drawRadius(size){
      var circle = new google.maps.Marker({
        position: map.getCenter(),
        zIndex: 1,
        clickable: false,
        icon: {
            path: google.maps.SymbolPath.CIRCLE,
            scale: size,
            strokeOpacity: 0.65,
            strokeWeight: 4,
            fillColor: '#FEFCF3',
            fillOpacity: 0.08,
            strokeColor: '#efe8b2'
        },
        map: map
      });
    }