Add a infobox to the right edge of a circle drawn via Google Maps

Question

Trying to figure out how to \"attach\" an InfoBox\" to the left edge of a circle drawn in Google Maps (v3).

Here\'s what I have so far:
http://jsfiddle.net/a1aq9ey8/

Answer 1

You need to calculate the position of the label to put it on the circle. Using the geometry library computeOffset method.

• distance = radius of the circle
• heading = -90 degrees (west)
• fromLatLng = center of the circle

var radiusOptions = {
  strokeColor:"#222c38",
  strokeOpacity:1,
  strokeWeight:1,
  fillColor:"#ffffff",
  fillOpacity:0,
  map: map,
  center: bblocation,
  radius: 12872
};
markerCircles = new google.maps.Circle(radiusOptions);

// calculate the position of the label
var labelPosn = google.maps.geometry.spherical.computeOffset(radiusOptions.center,radiusOptions.radius,-90);
var labelText = "8 MILE";
var myOptions = {
    content: labelText,
    boxStyle: {
    background: '#222c38',
    color: '#ffffff',
    textAlign: "center",
    fontSize: "8pt",
    width: "50px"
  },
  disableAutoPan: true,
  pixelOffset: new google.maps.Size(0, 0), // left upper corner of the label
  position:  labelPosn, // on the left edge of the circle
  closeBoxURL: "",
  isHidden: false,
  pane: "mapPane",
  enableEventPropagation: true
};

updated fiddle

code snippet:

$(document).ready(function() {
  //set your google maps parameters
  var map;
  var bblocation = new google.maps.LatLng(37.787321, -122.258365);
  var map_zoom = 11;

  //set google map options
  var map_options = {
    center: bblocation,
    zoom: map_zoom,
    panControl: false,
    zoomControl: true,
    mapTypeControl: false,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false,
    disableDefaultUI: true,
  }

  //inizialize the map
  map = new google.maps.Map(document.getElementById('google-container'), map_options);

  var radiusOptions = {
    strokeColor: "#222c38",
    strokeOpacity: 1,
    strokeWeight: 1,
    fillColor: "#ffffff",
    fillOpacity: 0,
    map: map,
    center: bblocation,
    radius: 12872
  };
  markerCircles = new google.maps.Circle(radiusOptions);

  // calculate the position of the label
  var labelPosn = google.maps.geometry.spherical.computeOffset(radiusOptions.center, radiusOptions.radius, -90);
  var labelText = "8 MILE";
  var myOptions = {
    content: labelText,
    boxStyle: {
      background: '#222c38',
      color: '#ffffff',
      textAlign: "center",
      fontSize: "8pt",
      width: "50px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(0, 0), // left upper corner of the label
    position: labelPosn, // on the left edge of the circle
    closeBoxURL: "",
    isHidden: false,
    pane: "mapPane",
    enableEventPropagation: true
  };
  var mmLabel = new InfoBox(myOptions);
  mmLabel.open(map);

  google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
  });
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="google-container"></div>