JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jquerygeo.com/test/jquery.geo-test.min.js"></script>
<div id="map">
</div>

CSS

#map
{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

/* all shape labels get the geo-label CSS class */
.geo-label {
    background: #dedede;
    border: solid 2px #222;
    border-radius: 8px;
    margin-left: .5em;
    margin-top: -2.5em;
    padding: 4px;
}

JavaScript

var popup = null; //< stored reference to our popup shape

// create a map, setting mode to drawPoint
var map = $("#map").geomap({
    center: [-71.0595678, 42.3604823],
    zoom: 8,
    mode: "drawPoint",
    shape: function(e, geo) {
        // remove any previous popup
        if (popup) {
            map.geomap("remove", popup);
            popup = null;
        }
        
        // search for shapes at the clicked location
        var foundShapes = map.geomap("find", geo, 8);

		// find returns an array of 0 or more shapes, do we have a shape?        
        if (foundShapes.length > 0) {
            // create a reference to the click point for the popup label
            popup = geo;

            // append the popup shape with appropriate label
            // width & hight are set to 0 because the popup shape is only for position
            // and should not be visible
            map.geomap("append", popup, {
                width: 0,
                height: 0,
            }, foundShapes[0].properties.loc);
        }
    }
});

// append a GeoJSON Feature object to also store properties
map.geomap("append", {
    type: "Feature",
    geometry: {
        type: "Polygon",
        coordinates: 
    },
    properties: {
        loc: "Cape Cod"
    }
});