Show groups of map images only at specific zoom level

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>

CSS

#chartdiv {
	width	: 100%;
	height	: 500px;
}

TypeScript

// svg path for target icon
var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";

var map = AmCharts.makeChart("chartdiv", {
  type: "map",
    "theme": "none",
     pathToImages: "http://www.amcharts.com/lib/3/images/",

  imagesSettings: {
    rollOverColor: "#089282",
    rollOverScale: 3,
    selectedScale: 3,
    selectedColor: "#089282",
color:"#13564e"
  },

zoomControl:{buttonFillColor:"#15A892"},

areasSettings:{unlistedAreasColor:"#15A892"},

  dataProvider: {
    map: "worldLow",
    images: [{
      groupId: "minZoom-2",
      svgPath: targetSVG,
      zoomLevel: 5,
      scale: 0.5,
      title: "Vienna",
      latitude: 48.2092,
      longitude: 16.3728
    }]
  }
});

// create a zoom listener which will check current zoom level and will toggle
// corresponding image groups accordingly
map.addListener("rendered", function () {
    revealMapImages();
    map.addListener("zoomCompleted", revealMapImages);
});
    
function revealMapImages (event) {
    var zoomLevel = map.zoomLevel();
    if ( zoomLevel < 2 ) {
        map.hideGroup("minZoom-2");
        map.hideGroup("minZoom-2.5");
    }
    else if ( zoomLevel < 2.5 ) {
        map.showGroup("minZoom-2");
        map.hideGroup("minZoom-2.5");
    }
    else {
        map.showGroup("minZoom-2");
        map.showGroup("minZoom-2.5");
    }
}