Map with FancyBox popups

by Fatih Demir

HTML

<script src="http://www.ammap.com/lib/ammap.js" type="text/javascript"></script>
<script src="http://www.ammap.com/lib/maps/js/usaLow.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css"/>
<div id="mapdiv" style="width: 100%; height: 370px;"></div>

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.colorSteps = 10;
    map.balloon.color = "#000000";
    var dataProvider = {
        mapVar: AmCharts.maps.usaLow,
        getAreasFromMap: true
    };

    map.areasSettings = {
        autoZoom: true
    };
    map.dataProvider = dataProvider;

    map.addListener("clickMapObject", function (event) {
        $.fancybox({
            'type': 'iframe',            
            'width': '200px',
            'height': '120px',
             afterLoad:function(){
             	$('.fancybox-iframe').contents().html('new content');
             }
        });
    });

    map.write("mapdiv");
});