title: google maps circle overlay - fixed size on zoom in and zoom out of the map
body: <p>I'm trying to add a circle overlay to a map, but I have to make the circle to stay the same size if a user zooms in or out of the map 
  The below code shows how I am displaying the circle on the map</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Circles&lt;/title&gt;
      &lt;style&gt;
          html, body {
              height: 100%;
              margin: 0;
              padding: 0;
          }
          #map {
              height: 100%;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="map"&gt;&lt;/div&gt;
  &lt;script&gt;
         var citymap = [
          {
              center: {lat:21.176801, lng: 72.832036}
          }
      ];
      var gmarkers = [];
      var markers = [{
          "title": 'point1',
          "lat": '21.17700',
          "lng": '72.8321000',
          "description": 'uuu'
      }];
  
      function initMap() {
          // Create the map.
          var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 14,
              center: {lat:21.176801, lng: 72.832036},
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              styles: [
                  {
                      "featureType": "poi",
                      "stylers": [
                          { "visibility": "off" }
                      ]
                  }
              ]
          });
          var infoWindow = new google.maps.InfoWindow();
          var lat_lng = new Array();
          var latlngbounds = new google.maps.LatLngBounds();
          for (i = 0; i &lt; markers.length; i++) {
              var data = markers[i]
              var myLatlng = new google.maps.LatLng(data.lat, data.lng);
              lat_lng.push(myLatlng);
              var marker = new google.maps.Marker({
                  position: myLatlng,
                  map: map,
                  icon:'peoples_Notif.png',
                  title: data.title
              });
              latlngbounds.extend(marker.position);
              (function(marker, data) {
                  google.maps.event.addListener(marker, "click", function(e) {
                      infoWindow.setContent(data.title);
                      infoWindow.open(map, marker);
                  });
  
              })(marker, data);
  
              google.maps.event.addListener(marker, "click", function(e) {
                  map.setZoom(8);
              });
              gmarkers.push(marker);
          }
          map.setCenter(latlngbounds.getCenter());
  
          // Construct the circle for each value in citymap.
          //scale circle based on the radius
          for (var i=0;i&lt;citymap.length;i++) {
              var cityCircle = new google.maps.Circle({
                  strokeColor: '#FFD700',
                  strokeOpacity: 1.0,
                  strokeWeight: 2,
                  fillColor: '#FFD700',
                  fillOpacity: 1.0,
                  map: map,
                  center: citymap[i].center,
                  radius:200
              });
  
          }
      }
  
  &lt;/script&gt;
  &lt;script async defer
          src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkkS2pZmOgryjc3ZX0sE5Q8tIdsm-Ged4&amp;signed_in=true&amp;callback=initMap"&gt;&lt;/script&gt;
  &lt;script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>can any say is there a option where I can enable or how to go about it</p>