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);
			if (typeof google !== 'object') {
				setTimeout(function () {
					location.reload();
				}, 3000);
			}
        }
        ns.map = map;
    }

    ns.initMap = initMap;

})(window.milosev);
POI fix for "google is not defined" error:
if (typeof google !== 'object') {
	setTimeout(function () {
		location.reload();
	}, 3000);
}
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);
	<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.

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);
}

 

One example of swiping with old version of swiper.

HTML:

<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			Test slide one
		</div>
		<div class="swiper-slide">
			Test slide two
		</div>
		<div class="swiper-slide">
			Test slide three
		</div>
	</div>
</div>

JS:

$('.swiper-container').swiper({
    grabCursor: true
});

Live example you can see here.