- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 3608
(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);
- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 4889
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);
}
- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 4831
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.
- Details
- Written by: Stanko Milosev
- Category: JavaScript
- Hits: 4677
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="/jquery-2.1.4.js"></script>
<script type="text/javascript" src="/index.js" defer></script>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="withoutPromise">
<b>Example without promise:<p/></b>
</div>
<div id="withJqueryPromise">
<b>Example with jQuery promise:<p/></b>
</div>
<div id="pureJavaScriptPromiseWithoutJquery">
<b>Example with pure JavaScript promise (without jQuery):<p/></b>
</div>
</body>
</html>
JS:
/*global console, $, XMLHttpRequest*/
(function () {
"use strict";
function fillResult(id, data) {
$.each(data, function (key, val) {
$(id).append("key: " + key + "<br/>value: " + val + "<p/>");
});
}
function fillPromiseResult(data) {
$.each(JSON.parse(data), function (key, val) {
$('#pureJavaScriptPromiseWithoutJquery').append("key: " + key + "<br/>value: " + val + "<p/>");
});
}
$.getJSON("index.json", function (data) {
fillResult("#withoutPromise", data);
});
$.getJSON("index.json").done(function (data) {
fillResult("#withJqueryPromise", data);
});
function makeRequest() {
return new Promise(function (resolve, reject) {
var myJson = new XMLHttpRequest();
myJson.open("GET", "http://localhost:63342/promiseExample/index.json");
myJson.onload = function () {
if (this.status >= 200 && this.status < 300) {
resolve(myJson.response);
} else {
reject(this.statusText);
}
};
myJson.send();
});
}
makeRequest().then(fillPromiseResult, function (errorMsg) {
$("#pureJavaScriptPromiseWithoutJquery").append(errorMsg);
}).catch(function (err) {
console.log("Error: " + err);
});
}());
JSON:
{
"first": "first test",
"second": "second test",
"nested test": [
{"first nest": "nest one"},
{"second nest": "nest two"}
]
}
Mostly I was using this example. Notice that it seems that resolve method of promise can accept only one parameter, that is why I needed to create function special for promise. Example download from here.