Circle 2 Miles - Google Maps

by iamjpg

HTML

<script src="https://maps.google.com/maps/api/js?key=AIzaSyDciDh5LCPwyxG8tml6998d80mlukEj8Q4&amp;libraries=drawing,places,geometry"></script>
<div id="map">

</div>
<div id="info">

</div>

CSS

#map {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 10;
}

#info {
  position: absolute;
  left: 10px;
  padding: 10px;
  background: #fff;
  z-index: 15;
  font-size: 12px;
}

JavaScript

var map;

map = new google.maps.Map(document.getElementById('map'), {
  center: {
    lat: 47.686270657786764,
    lng: -122.28723893639705
  },
  zoom: 12
});


var drawingManager = new google.maps.drawing.DrawingManager({
  drawingMode: google.maps.drawing.OverlayType.MARKER,
  drawingControl: true,
  drawingControlOptions: {
    position: google.maps.ControlPosition.TOP_CENTER,
    drawingModes: ['circle']
  },
  markerOptions: {
    icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
  },
  circleOptions: {
    fillColor: '#222',
    fillOpacity: .2,
    strokeWeight: 1,
    clickable: false,
    editable: true,
    zIndex: 1
  }
});

var evaluateCircle = function(circle) {
  console.log(circle.getBounds().getSouthWest().lat())
  var projection = map.getProjection();
  var topRight = projection.fromLatLngToPoint(map.getBounds().getNorthEast());
  var bottomLeft = projection.fromLatLngToPoint(map.getBounds().getSouthWest());
  var scale = Math.pow(2, map.getZoom());

  var point = projection.fromLatLngToPoint(
    new google.maps.LatLng(circle.getBounds().getSouthWest().lat(), circle.getBounds().getSouthWest().lng())
  );
  
  var posLeft = (point.x - bottomLeft.x) * scale;
  var posTop = (point.y - topRight.y) * scale;
  
  var elem = document.querySelector('#info')
  elem.style.top = posTop + 'px';
  elem.style.left = posLeft + 'px'
}

google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {

  drawingManager.setDrawingMode()

  var thisCircle = circle

  evaluateCircle(thisCircle)

  var returnMiles = function(radius) {
    document.querySelector('#info').innerHTML = Math.round(radius * 0.000621371) + ' mile radius'
  }
  var radius = thisCircle.getRadius();
  returnMiles(radius)

  google.maps.event.addListener(circle, 'bounds_changed', function() {
    var radius = thisCircle.getRadius();
    returnMiles(radius)
    evaluateCircle(thisCircle)
 ...