Zooming to countries
HTML
<script src="http://www.ammap.com/lib/3/ammap.js" type="text/javascript"></script>
<script src="http://www.ammap.com/lib/3/maps/js/worldLow.js" type="text/javascript"></script>
<div id="mapdiv" style="width: 100%; height: 370px;"></div>
<div id="BR" class="flag"><a href="http://www.google.br/">Brazil</a></div>
<div id="AU" class="flag"><a href="http://www.google.au/">Australia</a></div>
<div id="RU" class="flag"><a href="http://www.google.ru/">Russia</a></div>
CSS
.flag {
}
.flag.hover,
.flag:hover{
background-color: #88F;
}
JavaScript
var map;
AmCharts.ready(function() {
map = new AmCharts.AmMap();
map.pathToImages = "http://www.ammap.com/lib/3/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,
rollOverColor: "#CC0000",
selectedColor: "#CC0000"
};
// hover events
map.addListener("rollOverMapObject", function (event) {
// add class "hover" to the respective flag
var id = event.mapObject.id;
jQuery('#'+id).addClass('hover');
});
map.addListener("rollOutMapObject", function (event) {
// remove class "hover" from the respective flag
var id = event.mapObject.id;
jQuery('#'+id).removeClass('hover');
});
// click event on the map
map.addListener("clickMapObject", function (event) {
// find href on the respective flag anchor and redirect to it
var id = event.mapObject.id;
var url = jQuery('#'+id+' a').attr('href');
if ( url ) {
window.location.href = url;
}
});
map.write("mapdiv");
});
jQuery(function ($) {
// add hover events to flags
$('.flag').hover(function () {
map.rollOverMapObject( map.getObjectById(this.id) );
}, function () {
map.rollOutMapObject( map.getObjectById(this.id) );
});
});