JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.outsharked.com/scripts/jquery.imagemapster.js"></script>
<map name="map">
  <area shape="rect" group="rect" alt="" coords="25,38,102,104" href="#" /-->
  <area shape="circle" group="circle" alt="" coords="185,160,30" href="#" /-->
  <area shape="poly" group="poly" alt="" coords="230,62,237,25,276,20,291,55,264,80,230,62" href="#" /-->
</map>

<h1>MAP1</h1>
<img src='http://www.placekitten.com/320/240' width='320' height='240' id='map_full' usemap="#map">
<h1>MAP2</h1>
<img src='http://www.placekitten.com/320/240' width='320' height='240' id='map_mini' usemap="#map">

JavaScript

$(document).ready(function() {
     // Create a clone of our <map>
    var map = $('map[name="map"]'); //this is our <map>
    var clone = map.clone().attr('name', 'map2');     
                // this is clone of our map with name map2
    map.after(clone); // We add clone to the source   
       
    // Bind created clone to our second image-map
    var image1 = $('#map_full'),image2 = $('#map_mini');
    image2.attr('usemap', '#map2');

    // This function change second image-map when there is action on 1-st one    
    var changing  =false;
    function state_change(data) {
        // prevent recursion: exit if already inside this function  
        if (changing) return;
        changing = true;
     
        // switch the image that's not this one.
        var target = this==image1[0] ? $(image2) : $(image1);
        
        if (data.state=='highlight'){
            if (data.selected) {
                target.mapster(data.state,data.key,true);
            } else {
                target.mapster(data.state,false);
            }
        } else if (data.state=='select') {
             target.mapster('set', data.selected, data.key);
        }
        changing=false;
    }
    
    
    //Create a variable of the options both maps will share
    var options = {
        singleSelect: true,
        isDeselectable: false,

        fill: true,
        fillColor: 'ff0000',
        fillOpacity: 0.5,
        onStateChange: state_change
    };
    
    $('#map_mini, #map_full').mapster(options);
    
});