JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

/* some style, display none so we can show it on geomapmove */
.geo-label {
    margin: -2em 0 0 1em;
    padding: .25em .5em;
    font-family: Ariel;
    font-size: .7em;
    color: #444;
    background: #dedede;
    border-radius: 8px;
    border: solid 2px #444;
    width: auto;
    display: none;
}

JavaScript

// create a map centered on Naga
// style the shape points
var map = $("#map").geomap( {
    center: [ 123.19, 13.62 ],
    zoom: 14,
    shapeStyle: {
        color: "#444",
        width: 12,
        height: 12
    },
    move: function( e, geo ) {
        // search for a monument under the cursor
        var monument = map.geomap("find", geo, 12);
        if ( monument.length > 0 ) {
            // if found, show its label
            $("." + monument[0].properties.id).closest(".geo-label").show();
        } else {
            // otherwise, hide all labels
            $(".geo-label").hide();
        }
    }
} );

// two monument GeoJSON Features
var monuments = [ {
    type: "Feature",
    geometry: {
        type: "Point",
        coordinates: [123.187005, 13.627944]
    },
    properties: {
        id: 6115163,
        name: "Naga Metropolitan Cathedral"
    }
}, {
    type: "Feature",
    geometry: {
        type: "Point",
        coordinates: [123.200244, 13.632601]
    },
    properties: {
        id: 6115159,
        name: "Basilica of Our Lady of Penafrancia"
    }
} ];

$.each( monuments, function() {
    // label has a class that matches the monument's id
    // false (at the end) stops jQuery Geo from trying to refresh after each append
    map.geomap("append", this, '<span class="' + this.properties.id + '">' +  this.properties.name + '</span>', false);
} );

// we're done appending, refresh the map
map.geomap("refresh");