Display Text inside a circle marker - google-maps

Question

I want to display a circle like in this sample:
https://developers.google.com/maps/documentation/javascript/examples/circle-simple?hl=en
I do not want to use clustered markers as I really just need to display some circles with a
number inside.
UPDATE
That is my code:
$(document).ready(function() {
//Google maps API initialisation
var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
/* constructor */
function USGSOverlay(bounds, map, alarmnumber) {
// Now initialize all properties.
this.bounds_ = bounds;
this.map_ = map;
this.alarmnumber_ = alarmnumber;
// We define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay
this.setMap(map);
}
USGSOverlay.prototype.onAdd = function() {
// Note: an overlay's receipt of onAdd() indicates that
// the map's panes are now available for attaching
// the overlay to the map via the DOM.
// Create the DIV and set some basic attributes.
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
div.style.border = '1px solid #000';
div.style.fontWeight = 'bold';
div.style.backgroundColor = '#fff';
$(div).attr('id', 'alarmDiv' + this.alarmnumber_);
$(div).addClass("circle");
$(div).addClass("center");
// Set the overlay's div_ property to this DIV
this.div_ = div;
this.div_.innerHTML = this.alarmnumber_;
// We add an overlay to a map via one of the map's panes.
// We'll add this overlay to the overlayLayer pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
USGSOverlay.prototype.draw = function() {
// Size and position the overlay. We use a southwest and northeast
// position of the overlay to peg it to the correct position and size.
// We need to retrieve the projection from this overlay to do this.
var overlayProjection = this.getProjection();
// Retrieve the southwest and northeast coordinates of this overlay
// in latlngs and convert them to pixels coordinates.
// We'll use these coordinates to resize the DIV.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's DIV to fit the indicated dimensions.
var div = this.div_;
div.style.left = (sw.x - 20) + 'px';
div.style.top = (ne.y - 20) + 'px';
div.style.width = 40 + 'px';
div.style.height = 40 + 'px';
};
var element = document.getElementById("map");
var map = new google.maps.Map(element, {
center: new google.maps.LatLng(48.705236, 9.128566), // Latitude/Breitengrad , Longitude/Längengrad
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP, // Google maps provider
//mapTypeId: "OSM", // OpenStreetMap provider
mapTypeControl: false,
streetViewControl: false
});