Google Maps Api - Get Info Window To Open When Clicking A Circle?

I'm trying desparately to get a google map with circles which can be clicked to open an infowindow. It really doesn't seem like a complicated ask but searching online it does't see

Solution 1:

1. Create an infowindow: var infowindow = new google.maps.InfoWindow();

2. set its content, position and open it on a click:

   google.maps.event.addListener(cityCircle, 'click', function(e) {
     infowindow.setContent(this.getCenter().toUrlValue(6) + "<br>" + this.getRadius());
     infowindow.setPosition(this.getCenter());
     infowindow.open(map);
   });
   

working code snippet:

// 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['Mumbai'] = {
  center: new google.maps.LatLng(19.075787, 72.8774882),
  population: 14000
};
citymap['Cardiff'] = {
  center: new google.maps.LatLng(51.4887969, -3.1826222),
  population: 1000
};
citymap['Pune'] = {
  center: new google.maps.LatLng(18.5212252, 73.8556156),
  population: 14000
};
citymap['Beeston'] = {
  center: new google.maps.LatLng(52.9547839, -1.1581733),
  population: 3000
};
citymap['Birmingham'] = {
  center: new google.maps.LatLng(52.4677785, -1.7230922),
  population: 4000
};
citymap['Bristol'] = {
  center: new google.maps.LatLng(51.5434779, -2.573748),
  population: 2000
};
citymap['Brussels'] = {
  center: new google.maps.LatLng(50.8891268, 4.4592719),
  population: 1000
};
citymap['Crewe'] = {
  center: new google.maps.LatLng(53.0888925, -2.4357559),
  population: 2000
};
citymap['Dundee'] = {
  center: new google.maps.LatLng(56.4563534, -2.9752489),
  population: 1000
};
citymap['Durham'] = {
  center: new google.maps.LatLng(54.5468172, -1.5703596),
  population: 1000
};
citymap['Glasgow'] = {
  center: new google.maps.LatLng(55.8601948, -4.256542),
  population: 2000
};
citymap['Liverpool'] = {
  center: new google.maps.LatLng(53.4114691, -2.9954281),
  population: 5000
};
citymap['Livingston'] = {
  center: new google.maps.LatLng(55.8889266, -3.5575676),
  population: 12000
};
citymap['Moray'] = {
  center: new google.maps.LatLng(57.6153854, -3.5727702),
  population: 1000
};
citymap['Newcastle'] = {
  center: new google.maps.LatLng(55.0114826, -1.6218245),
  population: 1000
};
citymap['Runcorn'] = {
  center: new google.maps.LatLng(53.3416269, -2.7312661),
  population: 6000
};
citymap['Winnersh'] = {
  center: new google.maps.LatLng(51.43674, -0.89131),
  population: 5000
};
citymap['Wolverhampton'] = {
  center: new google.maps.LatLng(52.6375302, -2.1184067),
  population: 1000
};
citymap['Plymouth'] = {
  center: new google.maps.LatLng(50.3752499, -4.1425974),
  population: 1000
};
citymap['Swinton Manch'] = {
  center: new google.maps.LatLng(53.5108841, -2.3468262),
  population: 1000
};
citymap['Cleveleys'] = {
  center: new google.maps.LatLng(53.8758639, -3.0423774),
  population: 1000
};
citymap['Peterborough'] = {
  center: new google.maps.LatLng(52.5694182, -0.2415024),
  population: 1000
};
citymap['Saffron Walden'] = {
  center: new google.maps.LatLng(52.0224437, 0.2393275),
  population: 1000
};
citymap['Gloucester'] = {
  center: new google.maps.LatLng(51.864033, -2.2382369),
  population: 1000
};
citymap['LTQ'] = {
  center: new google.maps.LatLng(51.5250213, -0.141524),
  population: 18000
};
citymap['Enfield'] = {
  center: new google.maps.LatLng(51.651765, -0.0835785),
  population: 1000
};

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

functioninitialize() {
  // Create the map.var mapOptions = {
    zoom: 7,
    center: new google.maps.LatLng(53.3789721, -1.4693043),
    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
    };
    // Add the circle for this city to the map.
    cityCircle = new google.maps.Circle(populationOptions);
    google.maps.event.addListener(cityCircle, 'click', function(e) {
      infowindow.setContent(this.getCenter().toUrlValue(6) + "<br>" + this.getRadius());
      infowindow.setPosition(this.getCenter());
      infowindow.open(map);
    });
  }
}

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

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

<scriptsrc="https://maps.googleapis.com/maps/api/js"></script><divid="map-canvas"></div>