@{
    ViewBag.Title = System.Configuration.ConfigurationManager.AppSettings["Title"] + " | Heat Map SLA not met";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
    string[] arrayMapApiKeys = new string[] { "AIzaSyD-4NThTO2MnAu1Kc9eyguaKlYXuYMKiFY", "AIzaSyD-4NThTO2MnAu1Kc9eyguaKlYXuYMKiFY", "AIzaSyD-4NThTO2MnAu1Kc9eyguaKlYXuYMKiFY" };

    Random random = new Random();

    var mapApiKey = arrayMapApiKeys[random.Next(0, arrayMapApiKeys.Length)];
    var src1 = "https://maps.googleapis.com/maps/api/js?v=3&libraries=visualization&key=" + mapApiKey;      
}
<script id="scriptMapApi" type="text/javascript" src='@src1'></script>

<div class="sizefull">
    <div class="window">
        <div class="titlebar" style="height: 37px;">
            <div class="titlenew" style="float: left; margin-right: 15px; line-height: 29px; margin-top: 3px; margin-left: 9px;">
                Heat Map (SLA missed)
            </div>
            <div class="">
                <label class="fright" style="margin-right: 5px; margin-top: 2px;">
                    <span>Select State : </span>
                    @Html.Kendo().ComboBox().SelectedIndex(0).Events(e => e.Change("onSelectState")).Name("ddState").Filter("contains").DataTextField("Text").DataValueField("Value").BindTo(Model).Suggest(true)
                </label>
            </div>
        </div>
        <div style="clear: both; float: none;"></div>
        <div class="innerWindow" style="top: 47px;">
            @*<div class="tabs">
                <ul style="float: left;" class="tablist">
                    <li id="tabOperational" class="tabUlLi selected" rel="relOperational">Heat Map</li>
                </ul>

            </div>
            <div class="clear"></div>*@

            <div id="divMap" class="content MapBox">
            </div>

        </div>
    </div>
</div>

<script src="~/Scripts/Shared/heapMapData.js"></script>

<script>
    var ccplMap = '', defaultLat = 28.632880, defaultLng = 77.218436, heatmap = null, heatMapArray = [];
    var latlngbounds = null;

    function initMap(id) {
        var mapOptions = {
            center: new google.maps.LatLng(defaultLat, defaultLng),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        //initialize map
        ccplMap = new google.maps.Map(document.getElementById(id), mapOptions);
    }

    function onSelectState() {
        latlngbounds = new google.maps.LatLngBounds();
        if (heatMapArray.length > 0) {
            for (var count = 0; count < heatMapArray.length; count++) {
                heatMapArray[count].setMap(null);
            }
        }
        var stateId = $("#ddState").data("kendoComboBox").value();
        var data = [], _tempData = [];

        if (stateId != null && stateId != "") {
            $.each(jsonData_notMet, function (index, item) {
                if (item.stateName.toLowerCase() == stateId.toLowerCase()) {
                    data = item.locationPoints;
                }
            });
        } else {
            $.each(jsonData_notMet, function (index, item) {
                _tempData.push(item.locationPoints);
            });
            data = [].concat.apply([], _tempData);
        }
        createHeatMap(data);
    }

    function createHeatMap(data) {
        var forLoopLength, multiplier = 100, waitIndex = 0, setTimeOutSeconds = 0;
        var arrLength = data.length;
        var arr1000Points = [];
        if (arrLength < 1000) {
            forLoopLength = 1;
        } else if ((arrLength % 1000) > 0) {
            forLoopLength = parseInt((arrLength / 1000), 10) + 1;
        } else if ((arrLength % 1000) == 0) {
            forLoopLength = parseInt((arrLength / 1000), 10);
        }
        var z;
        if (forLoopLength == 1) {
            createHeatMapLayer(data);
        } else {
            for (var index = 0; index < forLoopLength; index++) {
                setTimeOutSeconds = waitIndex * multiplier;
                if (arrLength < 1000) { z = 0; } else { z = arrLength - 1000; }
                arr1000Points = [];
                for (var j = arrLength; j > z; j--) {
                    arr1000Points.push(data[j - 1]);
                }
                arrLength = arrLength - 1000;
                createHeatMapLayer(arr1000Points);
                waitIndex++;
            }
        }

    }

    function createHeatMapLayer(heatData) {
        latlngbounds.extend(heatData[0].location);
        latlngbounds.extend(heatData[heatData.length - 1].location);
        latlngbounds.extend(heatData[parseInt(heatData.length / 2, 10)].location);

        //console.log(heatData);
        heatmap = new google.maps.visualization.HeatmapLayer({
            data: heatData,
            map: ccplMap,
            gradient: gradient
        });

        heatMapArray.push(heatmap);
        ccplMap.fitBounds(latlngbounds);
    }

    //var gradient = [
    //     'rgba(214,16,2,0)',
    //     'rgba(214,16,2,1)',
    //     'rgba(168,8,16,1)',
    //     'rgba(170,1,10,1)',
    //     'rgba(173,0,11,1)'
    //];
    var gradient = [
         'rgba(214,16,2,0)',
         'rgba(214,16,2,1)'
         //'rgba(0,128,0,1)',
         //'rgba(34,139,34,1)',
         //'rgba(50,205,50,1)',
         //'rgba(0,255,0,1)',
         //'rgba(124,252,0,1)',
         //'rgba(127,255,0,1)'
    ];

    $(document).ready(function () {
        initMap("divMap");
        onSelectState();
    });

</script>