External zoom controls

by amcharts

HTML

<script src="http://www.ammap.com/lib/ammap.js" type="text/javascript"></script>
<script src="http://www.ammap.com/lib/maps/js/worldLow.js" type="text/javascript"></script>
<div id="mapdiv" style="width: 100%; height: 370px;"></div>

<input type="button" value="up" onclick="zoom('up');" />
<input type="button" value="down" onclick="zoom('down');" />
<input type="button" value="left" onclick="zoom('left');" />
<input type="button" value="right" onclick="zoom('right');" />
<input type="button" value="-" onclick="zoom('-');" />
<input type="button" value="+" onclick="zoom('+');" />

CSS

input[type=button] {
    min-width: 40px;
}

JavaScript

var map;

AmCharts.ready(function() {
    map = new AmCharts.AmMap();
    map.pathToImages = "http://www.ammap.com/lib/images/";
    //map.panEventsEnabled = true; // this line enables pinch-zooming and dragging on touch devices
    map.balloon.color = "#000000";

    var dataProvider = {
        mapVar: AmCharts.maps.worldLow,
        getAreasFromMap: true
    };

    map.dataProvider = dataProvider;

    map.areasSettings = {
        autoZoom: true,
        selectedColor: "#CC0000"
    };

    map.smallMap = new AmCharts.SmallMap();

    map.write("mapdiv");

});

function zoom (dir) {
    switch(dir) {
        case 'up':
            map.moveUp();
            break;
        case 'down':
            map.moveDown();
            break;
        case 'left':
            map.moveLeft();
            break;
        case 'right':
            map.moveRight();
            break;
        case '+':
            map.zoomIn();
            break;
        case '-':
            map.zoomOut();
            break;
    }
}