Add markers to image map resizer on interactive map

Question

I have an image map with buildings on that needs to be interactive but also responsive. Having looked around online and SO I found this Image Map Resize plugin. Its working very nicely and scaling down responsively.

Here is a JSFiddle of my image map.

And here is a working snippet:

/*! Image Map Resizer (imageMapResizer.min.js ) - v1.0.7 - 2018-05-01
 *  Desc: Resize HTML imageMap to scaled image.
 *  Copyright: (c) 2018 David J. Bradshaw - dave@bradshaw.net
 *  License: MIT
 */

!function(){"use strict";function a(){function a(){function a(a,d){function e(a){var d=1===(f=1-f)?"width":"height";return c[d]+Math.floor(Number(a)*b[d])}var f=0;j[d].coords=a.split(",").map(e).join(",")}var b={width:l.width/l.naturalWidth,height:l.height/l.naturalHeight},c={width:parseInt(window.getComputedStyle(l,null).getPropertyValue("padding-left"),10),height:parseInt(window.getComputedStyle(l,null).getPropertyValue("padding-top"),10)};k.forEach(a)}function b(a){return a.coords.replace(/ *, */g,",").replace(/ +/g,",")}function c(){clearTimeout(m),m=setTimeout(a,250)}function d(){l.width===l.naturalWidth&&l.height===l.naturalHeight||a()}function e(){l.addEventListener("load",a,!1),window.addEventListener("focus",a,!1),window.addEventListener("resize",c,!1),window.addEventListener("readystatechange",a,!1),document.addEventListener("fullscreenchange",a,!1)}function f(){return"function"==typeof i._resize}function g(a){return document.querySelector('img[usemap="'+a+'"]')}function h(){j=i.getElementsByTagName("area"),k=Array.prototype.map.call(j,b),l=g("#"+i.name)||g(i.name),i._resize=a}var i=this,j=null,k=null,l=null,m=null;f()?i._resize():(h(),e(),d())}function b(){function b(a){if(!a.tagName)throw new TypeError("Object is not a valid DOM element");if("MAP"!==a.tagName.toUpperCase())throw new TypeError("Expected <MAP> tag, found <"+a.tagName+">.")}function c(c){c&&(b(c),a.call(c),d.push(c))}var d;return function(a){switch(d=[],typeof a){case"undefined":case"string":Array.prototype.forEach.call(document.querySelectorAll(a||"map"),c);break;case"object":c(a);break;default:throw new TypeError("Unexpected data type ("+typeof a+").")}return d}}"function"==typeof define&&define.amd?define([],b):"object"==typeof module&&"object"==typeof module.exports?module.exports=b():window.imageMapResize=b(),"jQuery"in window&&(jQuery.fn.imageMapResize=function(){return this.filter("map").each(a).end()})}();
//# sourceMappingURL=imageMapResizer.map


		$('map').imageMapResize();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="availability-map">
	<img name="availability-map" src="https://i.imgur.com/FuwVLPz.jpg" usemap="#m_availability-map" border="0" width="100%">

	<map name="m_availability-map">
		<area shape="poly" coords="1359,534 1437,502 1490,595 1563,563 1603,631 1587,692 1427,750 1390,711 1390,626 1359,602" href="#" title="1330">

		<area class="map-shape" shape="poly" coords="1227,664 1227,593 1301,561 1380,685 1380,750 1304,768" href="#" title="1320">

		<area class="map-shape" shape="poly" coords="926,664 1082,610 1074,585 1156,561 1237,685 1237,758 1155,789 1126,731 974,789 926,724" href="#" title="1310">

		<area class="map-shape" shape="poly" coords="608,416 714,450 739,502 780,514 832,502 863,561 863,606 792,642 682,605 619,511" href="#" title="1240">

		<area class="map-shape" shape="poly" coords="474,440 559,416 616,543 648,611 648,664 540,626 474,476" href="#" title="1230">

		<area class="map-shape" shape="poly" coords="335,447 413,427 490,592 497,655 447,723" href="#" title="1220">

		<area class="map-shape" shape="poly" coords="195,442 266,468 277,540 250,561 259,575 345,605 345,655 316,714 195,675 140,529" href="#" title="1210">

		<area class="map-shape" shape="poly" coords="264,1056 363,1034 424,1258 432,1311 335,1335" href="#" title="1650">

		<area class="map-shape" shape="poly" coords="1708,723 1745,714 1763,742 1727,750" href="#" title="Floating Pavilion">

		<area class="map-shape" shape="poly" coords="692,732 824,685 874,789 783,832 709,832 692,739" href="#" title="The Bowl">

		<area class="map-shape" shape="poly" coords="1947,593 1919,675 1890,750 2053,789 2156,768 2192,675" href="#" title="1410">

		<area class="map-shape" shape="poly" coords="2069,798 2263,789 2282,868 2248,943 2053,950 2032,869" href="#" title="1420">

		<area class="map-shape" shape="poly" coords="2176,1034 2205,969 2421,905 2466,992 2435,1048 2221,1110" href="#" title="1430">
	</map>
</section>

What I would like to do is append a <div> to be positioned centered to each <area>. Or even better if I could control the positioning of each <div> to to be relative to each <area>.

The reason is that I want it look like this, with each having an interactive label with different text and styles:

Hovering over the labels would then push some text out to the side like this:

I tried achieving this with using <rect> and <g> but I couldn't get it to to be related to each <area>. I also don't think using either <rect> or <g> is right because of the hover interaction needed on the label?

Using .append makes everything listed below the <map>

$( ".map-shape" ).append( "<p>Test</p>" );

JSFiddle of trying to use append.