Dynamically load map of the country on click using jQuery

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>

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 wordlDataProvider = {
        mapVar: AmCharts.maps.indiaLow,
        getAreasFromMap: true,
        areas: [
            { id: "IN", color: "#4444ff" }]
           
    };

    map.dataProvider = wordlDataProvider;

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

    map.smallMap = new AmCharts.SmallMap();
    
    map.addListener("clickMapObject", function (event) {
        if (event.mapObject.id == "IN") {
            loadNewMap("http://www.ammap.com/lib/maps/js/indiaLow.js", "indiaLow");
        }
        
    });

    map.write("mapdiv");

});

function loadNewMap (url, mapName) {
    if (AmCharts.maps[mapName] != undefined) {
        // the map was already loaded
        setNewMap(mapName);
    }
    else {
        // let's load the map
        jQuery.getScript(url, function () {
            setNewMap(mapName);
        });
    }
}

function setNewMap (mapName) {
    var dataProvider = {
        mapVar: AmCharts.maps[mapName],
        getAreasFromMap: true
    };
    map.dataProvider = dataProvider;
    map.validateData();
}