Do you know why I get Maximum call stack size exceeded if I insert a code inside a function and execute it.
$(function() {
function loadContent() {
$.getJSON("js/data.json").done(function(data) {
var content = '';
$.each(data, function(i, item) {
content += '<div class="item" id="' + item.id + '" data-lat="' + item.latitude + '" data-lng="' + item.longitude + '" style="background-image: url(img/' + item.photo + ');"><div class="item__wrapper"><h2 class="item__title">' + item.title + '</h2><p class="item__content">' + item.description + '</p><span class="lat"><i class="fa fa-location-arrow"></i> ' + item.latitude + ' N, </span><span class="long">' + item.longitude + ' E</span></div></div>';
var latLng = new google.maps.LatLng(item.latitude, item.longitude);
var marker = new google.maps.Marker({
position: latLng
});
marker.setMap(map);
});
$('#sidebar').html(content);
$('.item').on("click", function() {
$(this).toggleClass("item--expanded").siblings().removeClass("item--expanded");
});
}).fail(function() {
var content = '<p>Błąd wczytywania danych!</p>';
$('#sidebar').html(content);
});
}
loadContent();
});
If I don't use function loadContent() It works fine. I've read it Maximum call stack size exceeded error but I don't execute the loop inside loop.
Edit: The problem is cause by this code:
<script>
var placeList = document.getElementById("sidebar");
placeList.addEventListener("click", getPlace, false);
function getPlace(ev) {
if (ev.target !== ev.currentTarget) {
clickedItem = ev.target.id;
var getItem = document.getElementById(clickedItem);
var lat = getItem.dataset.lat;
var lng = getItem.dataset.lng;
}
var center = new google.maps.LatLng(lat, lng);
map.panTo(center);
map.setZoom(13);
}
</script>