Create circle on google maps proportional to zoomlevel

Details
Written by: Stanko Milosev
Category: JavaScript
Hits: 1569
Example partly taken from here.

HTML: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<script defer src="https://maps.googleapis.com/maps/api/js"></script>
		<script defer src="./js/index.js"></script>
		<link type="text/css" rel="stylesheet" href="./css/index.css" />
	</head>
	<body>
		<div id="map-canvas"></div>
	</body>
</html>
JS: 
/*global google*/
(function (ns){
    "use strict";
 
    var mapOptions,
        mapCanvas,
        map,
		gpsViewModel;
 
    mapOptions = {
        zoom: 6,
        center: { lat: -34.397, lng: 150.644},
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
 
    mapCanvas = document.getElementById('map-canvas');
 
    if (!map) {
        map = new google.maps.Map(mapCanvas, mapOptions);
		google.maps.event.addListener(map, 'click', function (event) {
			var p = Math.pow(2, (21 - map.getZoom()));
			new google.maps.Circle({ 
				strokeColor: "#FF0000",
				strokeOpacity: 0.8,
				strokeWeight: 2,
				fillColor: "#FF0000",
				fillOpacity: 0.35,
				map,
				center: { lat: event.latLng.lat(), lng: event.latLng.lng()},
                editable: true,
                draggable: true,
				radius: p * 1128.497220 * 0.0027
			});
		});
		
    }

}({}));
Notice options: editable: true and draggable: true. With these options circles are editable and draggable.
Also notice line: var p = Math.pow(2, (21 - map.getZoom())); and option radius: p * 1128.497220 * 0.0027. Like this circle is always proportional to zoom level.

Live example: