Create circle on google maps proportional to zoomlevel

Details
Written by: Stanko Milosev
Category: JavaScript
Hits: 2259
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:

Few notes about Google maps

Details
Written by: Stanko Milosev
Category: JavaScript
Hits: 3901
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);

Example of a Javascript Closure: setTimeout Inside a For Loop

Details
Written by: Stanko Milosev
Category: JavaScript
Hits: 5169

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

 

idangero.us swiper 2.4.2 example

Details
Written by: Stanko Milosev
Category: JavaScript
Hits: 5097

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.

  1. Promises
  2. Inline if
  3. Stroke style
  4. Getters and setters

Subcategories

Ajax

JavaScript

ExtJS


jQuery

Bing Maps AJAX Control, Version 7.0

Knockout

Jasmine

Moment

node.js

Page 2 of 24