Google map circle with label

Question

I created map view using google map api, changed markers into circles by using google.maps.Circle circles printing on map with no issues on that but I can't add label or text into it. How can I fix that.

Here is the code I used to print circles

   function initialize() {

        var frrlanser_marker = {
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            radius: 60 * 100
        };



        var latlng = new google.maps.LatLng(6.951974, 80.720160);
        var myOptions = {
            scrollwheel: false,
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map"),
            myOptions);

<?php foreach($results as $val): ?>
<?php if($val->geo_location != ""): ?>

      <?php if($val->fontUserTypeId == 1) { ?>
        var fill_color_val = '#3888ff';
      <?php } else { ?>
        var fill_color_val = '#70d04f';
     <?php  } ?>




   <?php $LatLng = explode(",", $val->geo_location); ?>

    var latitude = <?php echo $LatLng[0]; ?>;
    var lontitude = <?php echo $LatLng[1]; ?>;

    var myLatLng = {lat: latitude, lng: lontitude};

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map
    });

       // Add circle overlay and bind to marker
        var circle = new google.maps.Circle({
            map: map,
            radius: 3200,    // 10 miles in metres
            fillColor: fill_color_val,
            strokeColor: '#FFFFFF',
            strokeWeight: 2,
            fillOpacity: 1,
        });
        circle.bindTo('center', marker, 'position');

        marker.setVisible(false);

    }

    google.maps.event.addDomListener(window, "load", initialize);

Answer 1

You can add an InfoBox with your desired label/text over the circle.

proof of concept fiddle

code snippet:

function initialize() {

  var frrlanser_marker = {
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    radius: 60 * 100
  };

  var latlng = new google.maps.LatLng(6.951974, 80.720160);
  var myOptions = {
    scrollwheel: false,
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map"),
    myOptions);
  var fill_color_val = '#3888ff';

  var latitude = 6.951974;
  var lontitude = 80.720160;

  var myLatLng = google.maps.LatLng(latitude, lontitude);

  var marker = new google.maps.Marker({
    position: latlng,
    map: map
  });

  // Add circle overlay and bind to marker
  var circle = new google.maps.Circle({
    map: map,
    radius: 3200, // 10 miles in metres
    fillColor: fill_color_val,
    strokeColor: '#FFFFFF',
    strokeWeight: 2,
    fillOpacity: 1,
  });
  circle.bindTo('center', marker, 'position');

  marker.setVisible(false);

  var labelText = "1";
  var myOptions = {
    content: labelText,
    boxStyle: {
      border: "none",
      textAlign: "center",
      fontSize: "10pt",
      width: "50px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-25, -5),
    position: latlng,
    closeBoxURL: "",
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: true
  };

  var ibLabel = new InfoBox(myOptions);
  ibLabel.open(map);

}

google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/npm/google-maps-infobox@2.0.0/infobox-module.min.js"></script>
<div id="map"></div>