Programatically centering the map to selected object
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>
<input type="button" value="Center map to selected object" onclick="centerMapOnSelectedObject();" />
CSS
#chartdiv {
width : 100%;
height : 500px;
}
input {
font-size: 15px;
padding: 10px;
position: absolute;
right: 20px;
top: 400px;
}
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": false,
"selectable": true,
"selectedColor": "#CC0000"
},
"smallMap": {}
});
function centerMapOnSelectedObject () {
var obj = map.selectedObject;
alert(map.getAreaCenterLongitude(obj))
if ( 'MapArea' == obj.objectType || 'MapData' == obj.objectType )
map.zoomToLongLat(map.zoomLevel(), map.getAreaCenterLongitude(obj), map.getAreaCenterLatitude(obj), true);
else if ( 'MapImage' == obj.objectType )
map.zoomToLongLat(map.zoomLevel(), obj.longitude, obj.latitude, true);
}