score:9

Accepted answer

mapZoom is a method that belongs to the chart object so, in order to call it as en event (load), you have to call it using this keyword.

You can edit your code like this (JSFiddle):

...
events: {
    load: function () {
        this.mapZoom(0.5, 100, 100);
        }
    }
}
...

Alternatively, you can call it whenever you want using a jQuery reference (JSFiddle):

$('#container').highcharts().mapZoom(0.5, 100, 100);

score:1

If you want to zoom several countries, than you can try this

events: {
    load: function () {
    var mapChart = this;
    ['DE', 'HU', 'RO'].map(function(code){
        return mapChart.get(code);
    }).reduce(function(acc, current){
      // Set map bounds
      acc._minX = isNaN(acc._minX) ? current._minX : Math.min(acc._minX, current._minX);
      acc._maxX = isNaN(acc._maxX) ? current._maxX : Math.max(acc._maxX, current._maxX);
      acc._minY = isNaN(acc._minY) ? current._minY : Math.min(acc._minY, current._minY);
      acc._maxY = isNaN(acc._maxY) ? current._maxY : Math.max(acc._maxY, current._maxY);
      return acc;
    }).zoomTo(); 
 }}

score:5

Zoom to a specific country on your map is easy

series : [{
            ...
            data: [{code: 'HU', id: 'HU', value: 7.5, name: 'Hungary'}],
            ...
            }

...and then...

var mapChart=$('#MapContainer').highcharts(); //get map chart object from DOM
mapChart.get('HU').zoomTo(); //zoom to the country using "id" from data serie
mapChart.mapZoom(5); //elevate viewpoint a little to see surrounding countries as well

Related Query

More Query from same tag