Facetwp Map facet add and position marker icon labels

<?php
// FacetWP Map facet: add marker labels
// More info: https://facetwp.com/help-center/facets/facet-types/map/advanced-map-customizations/#add-a-marker-label

add_filter( 'facetwp_map_marker_args', function( $args, $post_id ) {
  $labeltext = esc_html( get_the_title( $post_id ) ); // Fetch the post title.
  $args['label'] =
    [
      'text' => $labeltext,
      'className' => 'label-position', // A custom class.
      // optional:
      'color' => 'red',
      'fontSize' => '40px',
      'fontWeight' => 'bold',
      'fontFamily' => 'Courier'
    ];
  // Optionally remove the marker icons. Note: for this to work, there needs to be a space between the quotes.
  // $args['icon'] = ' ';
  
  return $args;
}, 10, 2 );

// Position the label with CSS, based on above added class. 
// Alternatively, if you are using custom markers, you can use labelOrigin: 
// https://facetwp.com/help-center/facets/facet-types/map/advanced-map-customizations/#using-labelorigin

add_action( 'wp_head', function() { ?>
  <style>
    .facetwp-type-map .label-position {
      position: relative;
      top: -40px; /* Use a negative value to position the label above the marker. And you can use 'bottom', 'left' and 'right'. */
    }
</style>
<?php } );