<script type="text/javascript">
	function ajaxFunction()
	{
		var xmlHttp;
		try
		{
			// Firefox, Opera 8.0+, Safari
			xmlHttp=new XMLHttpRequest();
		}
		catch (e)
		{
			// Internet Explorer
			try
			{
				xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch (e)
			{
				try
				{
					xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
				catch (e)
				{
					alert("Your browser does not support AJAX!");
					return false;
				}
			}
		}
	}
	</script>

Taken from here.

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:

While I was developing my gallery I had few problems which I want here to describe.

My solution for errors "initMap is not a function" and "google is not defined":

(function (ns) {
    /*globals google, map*/
    "use strict";
    var map;

    function initMap() {
        try {
            map = new google.maps.Map(document.getElementById('map-canvas'), {
                center: { lat: 34.397, lng: 150.644 },
                scrollwheel: true,
                zoom: 2
            });
        }
        catch (e) {
            console.log(e);
            setTimeout(function () {
                if (typeof google !== 'object') {
                    location.reload();
                }
            }, 1000);
        }
        ns.map = map;
    }

    ns.initMap = initMap;

})(window.milosev);
POI fix for "google is not defined" error:
setTimeout(function () {
	if (typeof google !== 'object') {
		location.reload();
	}
}, 1000);
POI fix for "initMap is not a function" error:
    function initMap() {
        map = new google.maps.Map(document.getElementById('map-canvas'), {
            center: { lat: 34.397, lng: 150.644 },
            scrollwheel: false,
            zoom: 2
        });
        ns.map = map;
    }
Where HTML part should look like:
<script defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=myKey;callback=window.milosev.initMap"></script>
Notice: window.milosev.initMap

My solution for zoom after fitBounds:

(function (ns) {
	/*globals google, $*/
	"use strict";
    $.getJSON("djala.json", function (data) {
		data.forEach(function (file) { 
			var picsLatLng = new google.maps.LatLng(file.Latitude, file.Longitude);
			var bounds = new google.maps.LatLngBounds();
		
			var marker = new google.maps.Marker({
				position: picsLatLng,
				map: ns.map,
				title: file.FileName,
				url: file.FileName
			});

			marker.addListener('click', function () {
				window.open(marker.url, "_target");
			});
				
			bounds.extend(picsLatLng);
			ns.map.fitBounds(bounds);	
			
			var zoomChangeBoundsListener = 
				google.maps.event.addListenerOnce(ns.map, 'bounds_changed', function(event) {
					if ( ns.map.getZoom() ){
						ns.map.setZoom(14);  // set zoom here
					}
				});

			setTimeout(function(){
				google.maps.event.removeListener(zoomChangeBoundsListener);
			}, 2000);			
		});
	});
})(window.milosev);
POI:
var zoomChangeBoundsListener = 
	google.maps.event.addListenerOnce(ns.map, 'bounds_changed', function(event) {
		if ( ns.map.getZoom() ){
			ns.map.setZoom(14);  // set zoom here
		}
	});

setTimeout(function(){
	google.maps.event.removeListener(zoomChangeBoundsListener);
}, 2000);

Title I have stolen from here.

Here is my example. This example will return five times five:

for (var i=0; i < 5; i++) {
	setTimeout(function () {
    console.log(i)
  }, i*1000)
}

And this example will return 0, 1, 2, 3, 4:

var aa = function (a) {setTimeout(function () {
    console.log(a)
  }, i*1000)};
  
for (var i=0; i < 5; i++) {
	aa(i);
}