can we place some data inside the circle drawn on

Question

I am using the sample from google map API to draw the circle and wanted to place the population value inside the circle for the plots can we do this in google map API

Example:https://developers.google.com/maps/documentation/javascript/examples/circle-simple

inside the ping circle as shown in the demo ,want to place the value of the population

Answer 1

One option is to use the InfoBox third party library to label the circles.

Proof of concept fiddle

code snippet:

// This example creates circles on the map, representing populations in North
// America.

function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: 37.090,
      lng: -95.712
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      zIndex: -100,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
    var myOptions = {
      content: "population<br>" + citymap[city].population,
      boxStyle: {
        background: '#FFFFFF',
        color: '#000000',
        textAlign: "center",
        fontSize: "8pt",
        width: "50px"
      },
      disableAutoPan: true,
      pixelOffset: new google.maps.Size(-25, -10), // left upper corner of the label
      position: new google.maps.LatLng(citymap[city].center.lat,
        citymap[city].center.lng),
      closeBoxURL: "",
      isHidden: false,
      pane: "floatPane",
      zIndex: 100,
      enableEventPropagation: true
    };
    var ib = new InfoBox(myOptions);

    ib.open(map);

  }
}

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

// First, create an object containing LatLng and population for each city.
var citymap = {
  chicago: {
    center: {
      lat: 41.878,
      lng: -87.629
    },
    population: 2714856
  },
  newyork: {
    center: {
      lat: 40.714,
      lng: -74.005
    },
    population: 8405837
  },
  losangeles: {
    center: {
      lat: 34.052,
      lng: -118.243
    },
    population: 3857799
  },
  vancouver: {
    center: {
      lat: 49.25,
      lng: -123.1
    },
    population: 603502
  }
};

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="map"></div>