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">
  Radius Info:
</div>

CSS

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

#info {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 20px;
  background: #fff;
  z-index: 15;
}

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
  }
});

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

  var returnMiles = function(radius) {
    document.querySelector('#info').innerHTML = 'Radius Info: ' + Math.round(radius * 0.000621371) + ' miles'
  }
  var radius = thisCircle.getRadius();
  returnMiles(radius)
  
  google.maps.event.addListener(circle, 'bounds_changed', function() {
  	var radius = thisCircle.getRadius();
  	returnMiles(radius)
  })
});

drawingManager.setMap(map);