<script src="jquery.seat-charts.min.js" type="text/javascript"></script>
<script type="text/javascript">
var price = 100;
$(document).ready(function() {
var $cart = $('#seats_chose'),
$tickects_num = $('#tickects_num'),
$total_price = $('#total_price');
var sc = $('#seat_area').seatCharts({
map: [
'cccccccccc',
'cccccccccc',
'__________',
'cccccccc__',
'cccccccccc',
'cccccccccc',
'cccccccccc',
'cccccccccc',
'cccccccccc',
'cc__cc__cc'
],
naming: {
top: false,
getLabel: function(character, row, column) {
return column;
}
},
legend: {
node: $('#legend'),
items: [
['c', 'available', 'available'],
['c', 'unavailable', 'unavailable']
]
},
});
</script>

these is my code which I have included seat-chart.js library so my plan is to make different map for 3 different image and when I click on the image the according map will show but I tried lots of solution from google I still can't change the map property by clicking on image