How to write text center of the area using imagemap?

I used map and area attr and for styling them , i used maphighlight.js which is jquery. When i hover , it shows borders and color fillings etc.

Now i want to put text center of each areas which are determined with coordinates. When page loads , i want to see texts on center of areas "without hover" and after hover i wanna see borders ,color etc. Thanks for your helps. Here's my code. 1)Maphilight

 $(document).ready(function(){
    $('.map').maphilight();
});

2)I tried to write text but not works properly

    $(function() {

    $('area').each(function(){
        var txt=$(this).data('name');
        var coor=$(this).attr('coords');
        var coorA=coor.split(',');
        var left=coorA[0];
        var top=coorA[1];

        var $span=$('<span class="map_title">'+txt+'</span>');        
        $span.css({top: top+'px', left: left+'px', position:'absolute'});
        $span.appendTo('.content');
    }) 
})

This is mapping

<div class="content">

<img src="ozak.jpg" alt="" class="map" width="2000" height="2000" border="0" usemap="#demo">
</div>
<map name="demo">
     <area  id="51" alt="D1" class ="tooltip" title="3+1 150 m² Deniz Manzaralı " href="javascript: alert('Daire 5127 Satılmıştır!')" coords="588,271,816,369" shape="rect" data-maphilight='{"strokeColor":"000000","strokeWidth":5,"fillColor":"F72E06","fillOpacity":0.7}' data-name="Daire1">
    <area  alt="" title="" href="javascript: alert('Daire 5287 Satılıktır!')" coords="1251,278,1374,367" shape="rect" data-maphilight='{"strokeColor":"000000","strokeWidth":5,"fillColor":"00BD06","fillOpacity":0.7}' data-name="Daire2">
  <area alt="" title="" href="javascript: alert('Daire 8692 Satılmıştır!')" coords="600,469,807,554" shape="rect" data-maphilight='{"strokeColor":"000000","strokeWidth":5,"fillColor":"F72E06","fillOpacity":0.7}' data-name="Daire3">


</map>

CSS

#map {
    position:relative
}
.map_title {
    position:absolute;    
}

Solution

First thing is that I have used my own image.

How coords="588,271,816,369" works:

Here it is x1,y1,x2,y2 where x1,y1 is for top-left corner of area and x2,y2 is bottom-right corner.
Second thing is that you need to parse these cordinates to integer to calculate top/left attribute of your text.
Now, you can calculate left attribute by using this formula. parseInt(coorA[0])+((parseInt(coorA[2])-parseInt(coorA[0]))/2). And same for top

Please note, here the point I calculated is the exact center of your rect but it is appearing sligh the right side as it is starting from the exact center point. You can apply some more mathematics to get it exactly center aligned.

EDIT

You can calculate the width of your span and get its width. After that, divide by 2 will give you the pixes you need subtract to get your labels accurately in the center. Here, I assume some pixels are being utilized in the border so I have back 9 pixels to it as an adjustment. It can be removed if you feel it's working fine.

$(function() {
    $('.map').maphilight();
    $('area').each(function(){
        var txt=$(this).data('name');
        var coor=$(this).attr('coords');
        var coorA=coor.split(',');
        
        var left=parseInt(coorA[0])+((parseInt(coorA[2])-parseInt(coorA[0]))/2);
        var top=parseInt(coorA[1])+((parseInt(coorA[3])-parseInt(coorA[1]))/2)
        
        var $span=$('<span class="map_title">'+txt+'</span>');        
        $span.css({top: top+'px', left: left+'px', position:'absolute'});        
        $span.appendTo('.content');
        $span.css({left:(left-Math.ceil($span.width()/2)+9)+'px'})
        
    }) 
});

#map {
    position:relative
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.4.0/jquery.maphilight.min.js" integrity="sha256-nUK4JHJVwdj7H1SYkkMcuE2unpjH5vYOe3mGEVu/69Q=" crossorigin="anonymous"></script>
<div class="content">

<img src="https://i.picsum.photos/id/372/200/300.jpg" alt="" class="map" width="2000" height="2000" border="0" usemap="#demo">
</div>
<map name="demo">
     <area  id="51" alt="D1" class ="tooltip" title="3+1 150 m² Deniz Manzaralı " href="javascript: alert('Daire 5127 Satılmıştır!')" coords="588,271,816,369" shape="rect" data-maphilight='{"strokeColor":"000000","strokeWidth":5,"fillColor":"F72E06","fillOpacity":0.7}' data-name="Daire1">
    <area  alt="" title="" href="javascript: alert('Daire 5287 Satılıktır!')" coords="1251,278,1374,367" shape="rect" data-maphilight='{"strokeColor":"000000","strokeWidth":5,"fillColor":"00BD06","fillOpacity":0.7}' data-name="Daire2">
  <area alt="" title="" href="javascript: alert('Daire 8692 Satılmıştır!')" coords="600,469,807,554" shape="rect" data-maphilight='{"strokeColor":"000000","strokeWidth":5,"fillColor":"F72E06","fillOpacity":0.7}' data-name="Daire3">


</map>