Untitled

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Bulgarian Clickable Map</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ammaps/3.13.0/ammap.css" type="text/css">
    </head>
    <body>
        <div id="mapdiv" style="width: 100%; height: 500px;"></div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ammaps/3.13.0/ammap.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ammaps/3.13.0/maps/js/bulgariaHigh.js" type="text/javascript"></script>
        <script type="text/javascript">
        var map;
        AmCharts.ready(function() {
            map = new AmCharts.AmMap();
            map.pathToImages = "http://www.ammap.com/lib/images/";
            var dataProvider = {
                map: "bulgariaHigh",
                getAreasFromMap: true
            };
            map.areasSettings = {
                autoZoom: false,
                selectable: true
            };
            map.zoomControl = {
                panControlEnabled: false,
                zoomControlEnabled: false
            };
            map.dataProvider = dataProvider;
            map.write("mapdiv");
            map.addListener("clickMapObject", function (event) {
                if (event.mapObject.id != undefined ) {
                    window.location.hash = '#' + event.mapObject.title;
                    console.log('#' + event.mapObject.title);
                }
            });
        });
        </script>
    </body>
</html>