Highmaps labels show in incorrect position

Question

I've created a simple map with basic configurations. Labels are showing in the incorrect position. Any idea?

var map_chart;

function init_map(){
	
    map_chart =  new Highcharts.chart({
		
        chart: {
            type: 'map',
	    renderTo: 'map_container'
        },

        series: [{
            mapData: Highcharts.maps['custom/world'],
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }]
    });

}

$( document ).ready(function() {
	
	init_map();

});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

<div id="map_container">
</div>

Answer 1

This seems to be caused by how the highmaps object is initiated.

replacing

map_chart = new Highcharts.chart({

with

map_chart = new Highcharts.Map({

solves the problem, JSFiddle