带有形状的Google Maps Infowindows

So I am basically pulling a lat and lng from a database and using those coordinates plotting a circle on the map.

All is working well with the exception that my infoWindow, while populating the correct information, is popping up over the exact same circle, not the one that I am clicking on.

I have read several articles here but can't seem to find what it is I am doing wrong.

<script type="text/javascript">


var map = new google.maps.Map(document.getElementById('map'), {
    mapTypeId: google.maps.MapTypeId.TERRAIN
});

var markerBounds = new google.maps.LatLngBounds();

var cityLocation;


<?php foreach($allResults as $key =>$singleResult): ?>

cityLocation = new google.maps.LatLng(<?php echo $singleResult["lat"] ?>, <?php echo $singleResult["lng"] ?>);



// Draw a marker for each random point
 var circle = new google.maps.Circle({
    center: cityLocation,
    radius: <?php echo $meters ?>,
    position: cityLocation,
    strokeColor: "#222",
    strokeOpacity: 0.1,
    strokeWeight: 2,
    fillColor: "#ff0007",
    fillOpacity: 0.2,
    clickable:true,
    map: map
});

circle.info = new google.maps.InfoWindow ({
   content:'<?php echo "Lat: " . $singleResult["lat"] . " " . "Lng: " . $singleResult["lng"] ?> '
});

google.maps.event.addListener(circle,'click',function() {
    this.info.open(map, circle);
});



// Extend markerBounds with each random point.
markerBounds.extend(cityLocation);

<?php endforeach; ?>

// Map.fitBounds() method to set the map to fit markerBounds
map.fitBounds(markerBounds);

change

this.info.open(map, circle);

this.info.open(map, this);

To open an infowindow on something that isn't a marker, you need to set the position of the infowindow (and not use the .open(map, anchor) syntax).

google.maps.event.addListener(circle, 'click', function (evt) {
  infowindow.setContent(this.info);
  infowindow.setPosition(this.getCenter());
  infowindow.open(map);
});

proof of concept fiddle

Working example modified from google's circle example

code snippet:

var infowindow = new google.maps.InfoWindow();

function initialize() {
  // Create the map.
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(37.09024, -95.712891),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  // 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) {
    var populationOptions = {
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100,
      info: 'name: ' + citymap[city].name + "<br>population: " + citymap[city].population + "<br>" + citymap[city].info
    };
    // Add the circle for this city to the map.
    var circle = new google.maps.Circle(populationOptions);

    google.maps.event.addListener(circle, 'click', function(evt) {
      infowindow.setContent(this.info);
      infowindow.setPosition(this.getCenter());
      infowindow.open(map);
    });

  }
}
google.maps.event.addDomListener(window, 'load', initialize);
// This example creates circles on the map, representing
// populations in North America.

// First, create an object containing LatLng and population for each city.
var citymap = {};
citymap['chicago'] = {
  center: new google.maps.LatLng(41.878113, -87.629798),
  population: 2714856,
  name: "Chicago, IL",
  info: "stuff for infowindow"

};
citymap['newyork'] = {
  center: new google.maps.LatLng(40.714352, -74.005973),
  population: 8405837,
  name: "New York, NY",
  info: "stuff for infowindow"
};
citymap['losangeles'] = {
  center: new google.maps.LatLng(34.052234, -118.243684),
  population: 3857799,
  name: "Los Angeles, CA",
  info: "stuff for infowindow"
};
citymap['vancouver'] = {
  center: new google.maps.LatLng(49.25, -123.1),
  population: 603502,
  name: "Vancouver, BC",
  info: "stuff for infowindow"
};

var cityCircle;

html,
body,
#map-canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

</div>