JSFiddle - React, Tailwind, and code Playground
by grant
HTML
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&dummy=.js"></script>
<div id="map_canvas"></div>
<input type="button" id="recenter" value="Re-center" />
CSS
#map_canvas {
width: 400px;
height: 300px;
margin: 0;
padding: 0;
}
JavaScript
var mapOptions = {
center: new google.maps.LatLng(0,0),
zoom: 4,
mapTypeId: google.maps.MapTypeId.TERRAIN,
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var myLatLng = new google.maps.LatLng(45.265,-116.326);
var circleOptions = {
center: myLatLng,
fillOpacity: 0,
strokeOpacity:0,
// map: myMapObject,
radius: 4023 /* 20 miles */
}
var myCircle = new google.maps.Circle(circleOptions);
map.fitBounds(myCircle.getBounds());