JSFiddle - React, Tailwind, and code Playground

HTML

<map name="map1" id="map1" style="position=relative;">
    <area href="#" shape="circle" coords="248, 122, 10" data-agence="Paris" />
	<area href="#" shape="circle" coords="391, 368, 10" data-agence="Cannes" />
	<area href="#" shape="circle" coords="254, 35, 10" data-agence="Lille" />
	<area href="#" shape="circle" coords="252, 88, 10" data-agence="Amiens" />
	<area href="#" shape="circle" coords="661, 141, 10" data-agence="Armentieres" />
	<area href="#" shape="circle" coords="739, 183, 10" data-agence="Tourcoing" />
	<area href="#" shape="circle" coords="605, 220, 10" data-agence="Bethune" />
	<area href="#" shape="circle" coords="801, 221, 10" data-agence="Marcq en Baroeul" />
	<area href="#" shape="circle" coords="731, 262, 10" data-agence="Lille" />
	<area href="#" shape="circle" coords="681, 290, 10" data-agence="Lens" />
	<area href="#" shape="circle" coords="774, 293, 10" data-agence="Douaï" />
	<area href="#" shape="circle" coords="702, 331, 10" data-agence="Arras" />
	<area href="#" shape="circle" coords="880, 301, 10" data-agence="Valenciennes" />
	
</map>
<img src="http://demogeoks.fr/leclercvdef/wp-content/uploads/2015/01/map-agences.jpg" usemap="#map1" >
	
<div id="tel_agence"></div>
<div id="fax_agence"></div>
<div id="mail_agence"></div>
<div id="adr_agence"></div>
<div id="hor_agence"></div>

JavaScript

var monJSON= {
	"Paris": {
				"tel":"tel paris",
				"fax":"fax Paris",
				"mail": "mail Paris",
				"adr":"Adr PAris",
				"hor":" Horaires Paris"},    
	"Lille": {     
				"tel":"tel Lille",
				"fax":"fax Lille",
				"mail": "mail Lille",
				"adr":"Adr Lille",
				"hor":" Horaires Lille"},   
	"Amiens": {     
				"tel":"tel Amiens",
				"fax":"fax Amiens",
				"mail": "mail Amiens",
				"adr":"Adr Amiens",
				"hor":" Horiares Amiens"},	
	"Cannes": {     
				"tel":"tel Cannes",
				"fax":"fax Cannes",
				"mail": "mail Cannes",
				"adr":"Adr Cannes",
				"hor":" Horiares Cannes"},
				
	"Arras": {     
				"tel":"tel Arras",
				"fax":"fax Arras",
				"mail": "mail Arras",
				"adr":"Adr Arras",
				"hor":" Horiares Arras"},	
	"Valenciennes": {     
				"tel":"tel Valenciennes",
				"fax":"fax Valenciennes",
				"mail": "mail Valenciennes",
				"adr":"Adr Valenciennes",
				"hor":" Horiares Valenciennes"},					
	"Douaï": {    
				"tel":"tel Douaï",
				"fax":"fax Douaï",
				"mail": "mail Douaï",
				"adr":"Adr Douaï",
				"hor":" Horiares Douaï"},
	"Lens": {    
				"tel":"tel Lens",
				"fax":"fax Lens",
				"mail": "mail Lens",
				"adr":"Adr Lens",
				"hor":" Horiares Lens"},
	"Bethune": {    
				"tel":"tel Bethune",
				"fax":"fax Bethune",
				"mail": "mail Bethune",
				"adr":"Adr Bethune",
				"hor":" Horiares Bethune"},
	"Marcq en Baroeul": {    
				"tel":"tel Marcq en Baroeul",
				"fax":"fax Marcq en Baroeul",
				"mail": "mail Marcq en Baroeul",
				"adr":"Adr Marcq en Baroeul",
				"hor":" Horiares Marcq en Baroeul"},	
	"Tourcoing": {    
				"tel":"tel Tourcoing",
				"fax":"fax Tourcoing",
				"mail": "mail Tourcoing",
				"adr":"Adr Tourcoing",
				"hor":" Horiares Tourcoing"},
	"Armentieres": {    
				"tel":"tel Armentieres",
				"fax":"fax Armentieres",
				"mail": "mail Armentieres",
				"adr":"Adr Armentieres",
				"hor":" Horiares Armentieres"}						 
			}

$( function(){
    
     $('#map1 area').on ('click', function(e){
    ...