Using external controls to zoom the map

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>
<div id="controls">
    <input type="button" value="Zoom In" onclick="zoomIn();" />
    <input type="button" value="Zoom Out" onclick="zoomOut();" />
</div>

CSS

body {
    font-family: Verdana;
    font-size: 12px;
    padding: 10px;
}
#chartdiv {
	width	: 100%;
	height	: 500px;
}
#controls {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.8);
    padding: 10px;
    font-size: 15px;
}
#controls input {
    padding: 5px;
}

JavaScript

var map = AmCharts.makeChart("chartdiv", {

	"type": "map",
    "theme": "none",
    "pathToImages": "http://www.amcharts.com/lib/3/images/",

	"dataProvider": {
     "map": "worldLow",
		"getAreasFromMap": true
	},
	"areasSettings": {
		"autoZoom": true,
		"selectedColor": "#ffffff"
	}
});

map.addListener("rendered", function () {
    map.initialZoomLatitude = map.zoomLatitude();
    map.initialZoomLongitude = map.zoomLongitude();
});

function zoomIn () {
    centerMap();
    map.zoomIn();
}

function zoomOut () {
    centerMap();
    map.zoomOut();
}

function centerMap () {
    map.zoomToLongLat(map.zoomLevel(), map.initialZoomLongitude, map.initialZoomLatitude, true);
}