javascript - Google Maps Infowindows with shapes -

so pulling lat , lng database , using coordinates plotting circle on map.

all working exception infowindow, while populating correct information, popping on exact same circle, not 1 clicking on.

i have read several articles here can't seem find 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 $key =>$singleresult): ?>  citylocation = new google.maps.latlng(<?php echo $singleresult["lat"] ?>, <?php echo $singleresult["lng"] ?>);    // draw marker 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 each random point. markerbounds.extend(citylocation);  <?php endforeach; ?>  // map.fitbounds() method set map fit markerbounds map.fitbounds(markerbounds); 

change

this.info.open(map, circle);

to

this.info.open(map, this);