[SOLVED] Mapster fill areas

Mapster fill areas

i use mapster js for show some section inside image. Inside areas i use data key and class also. Hover working perfec but i need fill these sections after load not only on hover with specific color. I try some examples but not working.

$('.plan-img').mapster({
            stroke: true,
            strokeWidth: 2,
            configTimeout: 20000,
            mapKey: 'data-key',
            onClick: function(data){
                if (this.href && this.href !== '#') {
                    window.open(this.href,'_self');
                }
            },
            onConfigured:function() {

                $(".floor-plans .mapster_el").parent().hide();

            },
     
            areas:[{
                key: 'free',
                fillColor: 'A7DC96',
                strokeColor: 'A7DC96',
            },
                {
                    key: 'sold',
                    fillColor: 'ff7f7f',
                    strokeColor: 'ff7f7f',

                },
                {
                    key: 'reserve',
                    fillColor: 'ddde97',
                    strokeColor: 'ddde97',
                }
            ],
            fillOpacity: 0.3
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://trnky2.reklama.sexy/js/jquery.imagemapster.min.js"></script>
<div class="floor-plans">

<div class="plan">
    <img src="http://trnky2.reklama.sexy/img/floor-1.jpg" usemap="#floor-1" class="plan-img" data-floor="1">
    <map id="floor-1" name="floor-1">

        <area shape="rect" data-key="sold" class="sold" alt="" title="" coords="580,78,771,274" href="#" target="">
        <area shape="rect" data-key="reserve" class="reserve" alt="" title="" coords="308,81,506,273" href="#" target="">

    </map>
</div>

Solution

var map = $('.plan-img'),

    render = new Array();

    render["free"] = {
        fillColor: 'A7DC96',
        strokeColor: 'A7DC96',
    };

    render["sold"] = {
        fillColor: 'ff7f7f',
        strokeColor: 'ff7f7f',
    };

    render["reserve"] = {
        fillColor: 'ddde97',
        strokeColor: 'ddde97',
    };

map.mapster({        
    onConfigured: function () {

        $(this).parent().parent().find("area").each(function(){

            var type = $(this).attr("data-key");                
            $(this).mapster('set',true,render[type]);

        })
    },
    onClick: function (data) {
        if (this.href && this.href !== '#') {
            window.open(this.href, '_self');
        }
    }

});