JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>
CSS
html, body, #map {
height: 100%;
width: 100% margin: 0px;
padding: 0px
}
JavaScript
var map = null;
var marker1, marker2, marker3, circle;
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(44, -78),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"),
myOptions);
var point1 = new google.maps.LatLng(44.25, -77.9);
var point2 = new google.maps.LatLng(44.3, -78);
var point3 = new google.maps.LatLng(44.3, -78.2);
marker1 = new google.maps.Marker({
position: point1,
draggable: true,
title: "point1",
map: map
});
google.maps.event.addListener(marker1,'dragend', drawCircleOnChange);
marker2 = new google.maps.Marker({
position: point2,
draggable: true,
title: "point2",
map: map
});
google.maps.event.addListener(marker2,'dragend', drawCircleOnChange);
marker3 = new google.maps.Marker({
position: point3,
draggable: true,
title: "point3",
map: map
});
google.maps.event.addListener(marker3,'dragend', drawCircleOnChange);
google.maps.event.addListener(map, 'projection_changed', drawCircleOnChange);
}
function drawCircleOnChange() {
drawCircleDel(marker1, marker2, marker3);
map.fitBounds(circle.getBounds());
}
google.maps.event.addDomListener(window, 'load', initialize);
function drawCircleDel(a, b, c) {
var pixelA = map.getProjection().fromLatLngToPoint(a.getPosition());
var pixelB = map.getProjection().fromLatLngToPoint(b.getPosition());
var pixelC = map.getProjection().fromLatLngToPoint(c.getPosition());
var a_x = pixelA.x;
var a_y = pixelA.y;
var b_x = pixelB.x;
var b_y = pixelB.y;
var c_x = pixelC.x;
var c_y = pixelC.y;
var aSlope = (b_y - a_y) / (b_x - a_x);
...