i am using Jvectormap to place 2 maps on my page. the maps are placed normally and everything is fine. they are placed in 2 different divs:

<div id="map1">
    </div>

<div id="map2">
    </div>

and the Jquery:

$(function () {
    $('#map1').vectorMap({
        color: '#aaaaaa',
        backgroundColor: '#ffffff',
        hoverOpacity: 1,
        hoverColor: true
    });
});

$(function () {
    $('#map2').vectorMap({
        color: '#aaaaaa',
        backgroundColor: '#ffffff',
        hoverOpacity: 1,
    });
});

Now when I try to change the colors of map2 dynamically using:

$("#map2").vectorMap("set", "colors", colorsDictionnary);

The colors of the first one only is changed.

and this happens only when changing colors. Always the first one have it's colors changed even if I am using $("#map2")

How can change the colors of the map2 without touching map1?

Thank you very much for any help, I really need it