JSFiddle - React, Tailwind, and code Playground

by cs_brandt

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="map"></div>

CSS

#map{
    width: 750px;
    height: 750px;
}

JavaScript

var map;
var center = new google.maps.LatLng(34.7325,-120.568056);

var myOptions = {
    zoom: 6,
    center: center,
    mapTypeId: 'terrain'
};

map = new google.maps.Map($('#map')[0], myOptions);

var nearestSW = new google.maps.LatLng(33, -122);
var nearestNE = new google.maps.LatLng(36, -119);
    
var sw = new google.maps.LatLng(33.8341847159, -121.6610919726);
var ne = new google.maps.LatLng(35.6308152841, -119.4750200274);

var bullseyeOptions = {
    center: center,
    strokeColor: "#0000FF",
    radius: 10000,
    strokeWeight: 2,
    fillOpacity: 0.0,
    map: map
};

var bigRectOptions = {
    bounds: new google.maps.LatLngBounds(nearestSW, nearestNE),
    fillOpacity: 0.0,
    map: map,
    strokeColor: "#FF0000",
    strokeWeight: 2
};

var rectOptions = {
    bounds: new google.maps.LatLngBounds(sw, ne),
    fillOpacity: 0.0,
    map: map,
    strokeColor: "#0000FF",
    strokeWeight: 2
};

new google.maps.Circle(bullseyeOptions);
new google.maps.Rectangle(rectOptions);
new google.maps.Rectangle(bigRectOptions);