title: How to add circles around markers on Google Maps API
body: <p>This is a code that I use to display markers on several places in google maps.
  I want to make an addition to this and add a 5km circle around the markers.</p>
  
  <p><a href="https://i.stack.imgur.com/DmAyW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DmAyW.png" alt="enter image description here"></a></p>
  
  <p>I tried with adding this block of code without luck:</p>
  
  <pre><code>var circle = new google.maps.Circle({
  center:position, 
  radius: radius, 
  fillColor: "#0000FF", 
  fillOpacity: 0.1, 
  map: map, 
  strokeColor: "#FFFFFF", 
  strokeOpacity: 0.1, 
  strokeWeight: 2 
  });
  </code></pre>
  
  <p>this is the full code below, and here is a jsfiddle for reference</p>
  
  <pre><code>var center = "Vilnius, Lithuania";
  var locations = [
    ['Tuskulėnų g. 20, Vilnius 09211, Lithuania', "some info"],
    ['Stumbrų g. 21, Vilnius 08101, Lithuania', "more information"],
    ['Kalvarijų g. 55, Vilnius 09317, Lithuania', "blah, blah"],
    ['Birželio 23-iosios g. 6, Vilnius 03204, Lithuania', "other information"],
    ['Teatro g. 6, Vilnius 03107, Lithuania', "to be determined"]
  ];
  
  
  var geocoder;
  var map;
  var infoWin = new google.maps.InfoWindow();
  
  function initialize() {
    geocoder = new google.maps.Geocoder();
    map = new google.maps.Map(
      document.getElementById("map_canvas"));
    // center and zoom map on "center" address
    geocoder.geocode({
      address: center
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.fitBounds(results[0].geometry.bounds);
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
    for (var i = 0; i &lt; locations.length; i++) {
      codeAddress(locations[i], i);
    }
  
  }
  
  function codeAddress(location, i) {
    geocoder.geocode({
      'address': location[0]
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
          map: map,
          title: "marker " + i,
          position: results[0].geometry.location
        });
        google.maps.event.addListener(marker, 'click', function(evt) {
          infoWin.setContent(location[0] + "&lt;br&gt;" + location[1]);
          infoWin.open(map, this);
        })
  
  
  //i added this block
  var circle = new google.maps.Circle({
  center:position, 
  radius: radius, 
  fillColor: "#0000FF", 
  fillOpacity: 0.1, 
  map: map, 
  strokeColor: "#FFFFFF", 
  strokeOpacity: 0.1, 
  strokeWeight: 2 
  });
  //end of block addition
  
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
  
  google.maps.event.addDomListener(window, "load", initialize);
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>this is what I get from the console</p>
  
  <pre><code>radius is not defined
  </code></pre>