OpenLayers live circle radius

HTML

<link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css">
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/style.css">
 <h1 id="title">OpenLayers Live Measurement of Circle Radius</h1>


<h4>Testarea: O. R. Tambo International Airport, main Runway 03L/21R. length: <b>4.418m</b></h4>

<p id="shortdesc">Draw a circle to see its live radius.</p>
<span id="clear" class="button">Clear map</span>


<h2>
    Radius: <span id="radius" >xxx</span>  <span id="einheit">Meter</span>
</h2> 
<div id="map" class="smallmap"></div>

CSS

#radius {
    color:red;
    font-weight:bold;
}
html, body {
    height:100%;
    width: 100%;
    padding:5px;
    margin:0px;
}
#map {
    height:90%;
    width: 95%;
}
.button {
    display: inline-block;
    line-height: 1;
    padding: 7px 10px;
    text-decoration: none;
    font-weight: bold;
    color: #fff;
    background-color: #39c;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    margin-right:20px;
    float:right;
    cursor:pointer;
}

JavaScript

var circles = new OpenLayers.Layer.Vector("Kreise");
var radiuslayer = new OpenLayers.Layer.Vector("Radius");


//initialize a draw control
var my_polygonhandler = OpenLayers.Handler.RegularPolygon;

var polygonControl = new OpenLayers.Control.DrawFeature(circles,
my_polygonhandler, {
    handlerOptions: {
        sides: 100
    }
});



//initialize a map
var map = new OpenLayers.Map({
    div: 'map',
    projection: new OpenLayers.Projection('EPSG:900913'),
    displayProjection: new OpenLayers.Projection('EPSG:4326'),
    layers: [
    new OpenLayers.Layer.OSM(),
    circles, radiuslayer]
});
var mittelpunkt = new OpenLayers.LonLat(28.239834, -26.129185).transform(map.displayProjection, map.projection);
map.setCenter(mittelpunkt, 14);
map.addControl(polygonControl);
polygonControl.activate();


polygonControl.handler.callbacks.move = function (e) {

    var linearRing = new OpenLayers.Geometry.LinearRing(e.components[0].components);
    var geometry = new OpenLayers.Geometry.Polygon([linearRing]);
    var polygonFeature = new OpenLayers.Feature.Vector(geometry, null);
    var polybounds = polygonFeature.geometry.getBounds();

    var minX = polybounds.left;
    var minY = polybounds.bottom;
    var maxX = polybounds.right;
    var maxY = polybounds.top;

    //calculate the center coordinates

    var startX = (minX + maxX) / 2;
    var startY = (minY + maxY) / 2;

    //make two points at center and at the edge
    var startPoint = new OpenLayers.Geometry.Point(startX, startY);
    var endPoint = new OpenLayers.Geometry.Point(maxX, startY);
    var radius = new OpenLayers.Geometry.LineString([startPoint, endPoint]);
    var len = Math.round(radius.getLength()).toString();

    var laenge;
    if (len > 1000) {
        laenge = len / 1000;
        einheit = "km";
    } else {
        laenge = len;
        einheit = "m";
    }
    document.getElementById("radius").innerHTML = laenge;
    document.getElementById("einheit").innerHTML =...