Leaflet - only one tile is loaded

Question

DUPLICATED

Leaflet only loads one tile

resolved invalidating map dimensions when the accordion (the map container) is fully opened

$('.ui.accordion').accordion({  
                onOpen : function() {
                        map.invalidateSize(); //ripristina le dimensioni della mappa quando l'accordio ha terminato l'apertura
                }
        });

===============================================================

i've tried to use a map with openstreetmap tiles and markers but it is loaded only one tile (top left) and leaflet control doesn't adjust the map accordingly

var places = [
                ["Pizzeria",41.8573802,12.4705307,18],
                ["Ristorante",41.8636938,12.4705371,17],
                ["Supermercato",41.9674316,12.5476399,17],
                ["Forno",41.9435349,12.4705118,18],
                ["Forno",41.9243629,12.4019605,16],
                ["Supermercato",41.9042377,12.4812988,14],
                ["Forno",41.8863744,12.506197,16],
                ["Ristorante",41.8840456,12.5103363,16],
                ["Pizzeria",41.8524282,12.4955204,17]
                ];

                var map = L.map('mapid').setView([41.9009975,12.4895659,17], 11);
        mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + ' Contributors',
            maxZoom: 18,
            minZoom: 9,
            }).addTo(map);

        for (var i = 0; i < places.length; i++) {
            marker = new L.marker([places[i][1],places[i][2]])
                .bindPopup(places[i][0])
                .addTo(map);
        }

this pen shows the problem https://codepen.io/anon/pen/RBdNJZ