<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js" type="text/javascript"></script>
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=geometry">
<script src="GoogleMapTEST.js"></script>

<style>
    html{
    height:100%;
    margin:0;
    padding:0;
    }
    body{
    height:60%;
    font-family:'Trebuchet MS',  'Arial', 'Helvetica', 'sans-serif';
    font-size:10pt;
    background-color: LightGray;
    line-height:1.6em;
    }
    #map-canvas {
    width:80%;
    height:500px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    margin-bottom: 25px;
    }
    .col2{
    border: #bfbfbf 1px solid;
    vertical-align: middle;
    display: inline;
    width: 39%;
    height: 90px;
    margin-left: 4%;
    }
</style>

<div id="map-canvas"></div>

<div>
    <form>
        <fieldset class="col2">
            Search radius (km): <br><br>
            <input type="text" id="DrawTxt" value="30">
            <input type="button" id="DrawBtn" value="Draw">
        </fieldset>
    </form>
</div>

var map;
var overlays_array = [];

function initialize()
{
    var MyLatLng = new google.maps.LatLng(51,-114);
    var mapOptions = {
        center: MyLatLng,
        zoom: 10
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

    $("#DrawBtn").click( function(){
        ClearOverlays();
        var radius = $("#DrawTxt").val();
        var circle = DrawCircle(map.getCenter(), radius);
        AddOverlay(circle);
    });

    var CP_url = 'https://drive.google.com/uc?export=download&id=0B2KR4Lz3foYEd04za21sMXZYaEE'
    var CP_options = {
        preserveViewport: true,
        map: map
    };
    var CP_layer = new google.maps.KmlLayer(CP_url, CP_options);
}

google.maps.event.addDomListener(window, 'load', initialize);

function DrawCircle(center, radius)
{
    var nodes = 72;

    var latConv = google.maps.geometry.spherical.computeDistanceBetween( center, new google.maps.LatLng(center.lat()+0.1, center.lng()) )/100;
    var lngConv = google.maps.geometry.spherical.computeDistanceBetween( center, new google.maps.LatLng(center.lat(), center.lng()+0.1) )/100;

    var points = [];
    var step = parseInt(360/nodes)||10;

    for(var i=0; i<=360; i+=step)
    {
        var pint = new google.maps.LatLng(center.lat() + (radius/latConv * Math.cos(i * Math.PI/180)), center.lng() + (radius/lngConv * Math.sin(i * Math.PI/180)));
        points.push(pint);
    }
    points.push(points[0]);

    var poly = new google.maps.Polygon({
        paths: points,
        strokeColor: "#00A2FF",
        strokeOpacity: 0,
        strokeWeight: 0,
        fillColor: "#80D0FF",
        fillOpacity: 0.3
    });

    return poly;
}

function AddOverlay(overlay)
{
    if(overlay)
    {
        overlay.setMap(map);
        overlays_array.push(overlay);
    }
}

function ClearOverlays()
{
    while(overlays_array[0])
    {
        overlays_array.pop().setMap(null);
    }
}