Showing Data in Google Maps Drawing -

i using google maps in web page. on map, user can draw circle. have following:

var mymanager = new google.maps.drawing.drawingmanager({   drawingmode: google.maps.drawing.overlaytype.marker,   drawingcontrol: true,   drawingcontroloptions: {     drawingmodes: [       google.maps.drawing.overlaytype.circle,     ]   },   circleoptions: {     clickable: true,     editable: true,     draggable: true,     zindex: 1   } }); mymanager.setmap(new google.maps.map(document.getelementbyid("roadmap"), {});); mymanager.setdrawingmode(null);  google.maps.event.addlistener(mymanager, 'circlecomplete', function(circle) {         }); 

as user drawing, want show them radius of circle. in other words, may 1.25 miles. circle grows, may go 2.0 miles. there way google maps? if so, how? have been unsuccessful in figuring out how this.

thank you!

you don't have access circle until circlecomplete event fires. once happens can display radius, , add radius_changed listener it.

proof of concept fiddle

code snippet:

var geocoder;  var map;  var circles = [];    function initialize() {    map = new google.maps.map(      document.getelementbyid("map_canvas"), {        center: new google.maps.latlng(37.4419, -122.1419),        zoom: 13,        maptypeid: google.maps.maptypeid.roadmap      });    var mymanager = new google.maps.drawing.drawingmanager({      drawingmode: google.maps.drawing.overlaytype.marker,      drawingcontrol: true,      drawingcontroloptions: {        drawingmodes: [          google.maps.drawing.overlaytype.circle        ]      },      circleoptions: {        clickable: true,        editable: true,        draggable: true,        zindex: 1      }    });    mymanager.setmap(map);    mymanager.setdrawingmode(null);      google.maps.event.addlistener(mymanager, 'circlecomplete', function(circle) {      google.maps.event.addlistener(circle, 'radius_changed', function() {        document.getelementbyid('info').innerhtml = "circle center = " + circle.getcenter().tourlvalue(6) + " radius = " + circle.getradius().tofixed(2) + " meters";      });      circles.push(circle);      document.getelementbyid('info').innerhtml = "circle center = " + circle.getcenter().tourlvalue(6) + " radius = " + circle.getradius().tofixed(2) + " meters";    });      }  google.maps.event.adddomlistener(window, "load", initialize);

html,  body,  #map_canvas {    height: 500px;    width: 500px;    margin: 0px;    padding: 0px  }

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing"></script>  <div id="map_canvas" style=" border: 2px solid #3872ac;"></div>  <div id="info"></div>